Panduan Pemaju: Cara Melaksanakan Passkeys

Panduan ini menunjukkan pemaju bagaimana untuk menambah pengesahan berasaskan laluan untuk keselamatan dan pengalaman pengguna yang lebih baik. Ia menerangkan kedua-dua pelayan manual dan persediaan klien, dan bagaimana Descope memudahkannya dengan antara muka visual dan aliran pra-dibina.

Tutorial ini adalah oleh Kumar Harsh, pemaju perisian dan pengarang teknikal dari India. Lihat lebih banyak karyanya di laman webnya!

Menggunakan PassKeys meningkatkan keselamatan aplikasi dan kemudahan pengguna. Panduan ini memperincikan pelaksanaan Passkey, dari persediaan ke penempatan. Berikutan langkah-langkah ini mewujudkan pengalaman pengesahan yang selamat dan mesra pengguna, mengurangkan akses yang tidak dibenarkan dan membina kepercayaan pengguna.

Pengesahan PassKey: Asas

Tidak seperti kata laluan yang terdedah, passkeys menggunakan kriptografi awam-kunci untuk meningkatkan pengalaman keselamatan dan pengguna. Fikirkan peti besi: identiti anda dijamin, hanya boleh diakses dengan pasangan kunci yang unik. Passkeys bekerja sama; Setiap pengguna mempunyai kunci peribadi (selamat disimpan pada peranti mereka), dan kunci awam yang dikongsi dengan laman web.

Login melibatkan laman web yang menghantar cabaran kepada peranti pengguna. Kunci peribadi mencipta tandatangan yang unik (cap jari digital), mengesahkan identiti tanpa mendedahkan kunci itu sendiri. Ini menyimpan log masuk selamat walaupun laman web dikompromi.

inilah perwakilan visual:

FIG: Upacara Pengesahan Passkey

Melaksanakan Passkeys: Pendekatan Manual (dan Mengapa Anda Tidak Perlu)

Walaupun passkeys adalah inovatif, pelaksanaan manual adalah rumit dan tidak digalakkan kerana kesukaran persediaan dan risiko keselamatan. Lebih baik menggunakan perpustakaan yang disokong.

Secara amnya, pelaksanaan manual melibatkan:

• Persediaan Server-Side: Ini termasuk penjanaan utama, pengesahan tandatangan, pengendalian pengesahan, dan integrasi pangkalan data untuk maklumat pengguna dan kelayakan passkey.
• Integrasi Frontend: Menggunakan JavaScript's navigator.credentials.create() dan navigator.credentials.get(), pelanggan membimbing pengguna melalui interaksi pengesahan (imbasan cap jari, pin, dll.) Dan menghantar data ke pelayan.

perpustakaan seperti SimpleWebAuthn memudahkan ini. Ia mengendalikan penjanaan utama, menjadikan proses lebih mudah daripada pendekatan manual.

(Projek Contoh Pelayan Klien dan Node.js Express menggunakan SimpleWebAuthn tersedia.)

persediaan sisi pelayan (menggunakan simpleWebAuthn)

Pelayan menggunakan pakej

dengan empat titik akhir utama: @simple-webauthn/server

1. /generate-registration-options: Mengkonfigurasi dan menjana pilihan pendaftaran untuk pelanggan, menghalang pelbagai pendaftaran dari peranti yang sama. Ia juga menghasilkan cabaran.
2. /verify-registration: Mengesahkan pendaftaran pada peranti yang berjaya dan menjimatkan butiran pengguna (kunci awam, ID kelayakan, maklumat peranti) dalam pangkalan data.
3. /generate-authentication-options: Mengembalikan pilihan pengesahan, mengambil ID peranti berdaftar.
4. /verify-authentication: Mengesahkan pengesahan pada peranti yang berjaya menggunakan peranti berdaftar.

Contoh ini menghilangkan integrasi pangkalan data; Anda perlu menambah bahawa untuk kegunaan pengeluaran.

Persediaan sisi pelanggan (menggunakan SimpleWebAuthn)

Pelanggan memerlukan dua butang (untuk pendaftaran dan pengesahan).

Permintaan konfigurasi dari

, kemudian menggunakan onRegistrationStart dari /generate-registration-options. Selepas pendaftaran yang berjaya, startRegistration() mengesahkan hasilnya. Pengesahan mengikuti corak yang sama menggunakan @simple-webauthn/browser, /verify-registration, dan /generate-authentication-options. startAuthentication() /verify-authentication Kaedah manual ini adalah kompleks dan memerlukan persediaan dan penyelenggaraan tambahan untuk pengenalan pengguna dan penyimpanan data. Persediaan HTTPS memerlukan langkah tambahan.

Cara yang lebih mudah: Melaksanakan Passkeys dengan Descope

Descope memudahkan pelaksanaan passkey, menghapuskan persediaan manual kompleks. Ia menyediakan antara muka tidak kod untuk menguruskan aliran pengesahan.

Mencipta aliran Descope

Daftar untuk akaun Descope.

1. Di papan pemuka, buat aliran auth. Pilih PassKeys (WebAuthn) sebagai kaedah utama.
2. Pilihan, tambahkan kaedah 2FA.
3. Pilih skrin log masuk (berpotensi dengan kaedah pendaftaran tambahan).
4. Descope menjana aliran auth anda dan menyediakan coretan kod dengan ID projek anda.

Menyediakan projek React

Buat projek React baru menggunakan

.
1. npm create vite Pasang Descope SDK:
.
2. npm install @descope/react-sdk Konfigurasikan
dalam
3. dengan id projek anda. AuthProvider main.jsx Gunakan komponen descope dan cangkuk dalam
untuk melaksanakan aliran pengesahan.
4. App.js
Contoh mudah ini menunjukkan cara mengintegrasikan aliran pendaftaran atau log masuk Descope:

// Simplified App.js example
import { useDescope, useSession } from '@descope/react-sdk';
import { Descope } from '@descope/react-sdk';

const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession();
  const { logout } = useDescope();

  return (
    <div>
      {!isAuthenticated && (
        <Descope flowId="sign-up-or-in" onSuccess={(e) => console.log(e.detail.user)} onError={(e) => console.log('Error!')} />
      )}
      {isAuthenticated && <button onClick={logout}>Logout</button>}
    </div>
  );
};

mencuba aplikasi

Run

dan akses aplikasi di

. Daftar pengguna, sediakan passkeys, dan log masuk ujian. Anda juga boleh mengaktifkan Autofill Passkey di papan pemuka Descope. npm run dev http://localhost:5173

(kod lengkap boleh didapati di GitHub.)

Pengesahan Drag-and-Drop Descope

Descope menyelaraskan pelaksanaan Passkey dengan antara muka drag-and-drop untuk menguruskan aliran pengesahan. Ini memudahkan persediaan dan pengubahsuaian, menjadikannya mudah diakses oleh pemaju semua tahap kemahiran. Ia membolehkan log masuk yang lebih mudah, lebih cepat, dan lebih mudah diakses.

Daftar untuk akaun Descope percuma untuk mengetahui lebih lanjut.

Atas ialah kandungan terperinci Panduan Pemaju: Cara Melaksanakan Passkeys. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!