開発者ガイド：PassKeysの実装方法

このガイドは、開発者にパスキーベースの認証を追加して、セキュリティとユーザーエクスペリエンスを向上させる方法を示しています。 マニュアルサーバーとクライアントの両方のセットアップと、Descopeが視覚インターフェイスと事前に構築されたフローでこれをどのように単純化するかを説明します。 このチュートリアルは、インドのソフトウェア開発者および技術著者であるKumar Harshによるものです。彼のウェブサイトで彼の作品の詳細をご覧ください！

PassKeysを使用すると、アプリケーションのセキュリティとユーザーの利便性が向上します。このガイドでは、セットアップから展開まで、PassKeyの実装を詳しく説明しています。 これらの手順に従うと、安全でユーザーフレンドリーな認証エクスペリエンスが作成され、不正アクセスが減り、ユーザーの信頼が削減されます。

passkey認証：基本

脆弱なパスワードとは異なり、PassKeysはパブリックキー暗号化を使用して、セキュリティとユーザーエクスペリエンスの両方を強化します。ボールトを考えてみてください：あなたのアイデンティティは固定されており、一意のキーペアでのみアクセスできます。 PassKeysは同様に動作します。各ユーザーには秘密キー（デバイスに安全に保存されています）と、ウェブサイトと共有される公開キーがあります。

ログインには、ユーザーのデバイスにチャレンジを送信するWebサイトが含まれます。秘密鍵は、一意の署名（デジタル指紋）を作成し、キー自体を明らかにすることなくIDを確認します。 これにより、ウェブサイトが侵害されてもログインが安全になります。

視覚的表現は次のとおりです

図：パスキー認証式

PassKeysの実装：マニュアルアプローチ（そして、なぜそうすべきではないのか）

PassKeysは革新的ですが、セットアップの難易度とセキュリティリスクのために手動の実装は複雑であり、落胆しています。 サポートされているライブラリを使用するのが最善です

一般的に、手動の実装には：

サーバーサイドのセットアップ：これには、キー生成、署名検証、証明の取り扱い、およびユーザー情報のためのデータベース統合が含まれます。

FrontEnd統合：

JavaScriptの

および

を使用して、クライアントはユーザーを認証機のインタラクション（指紋スキャン、ピンなど）を介してユーザーをガイドし、サーバーにデータを送信します。

SimpleWauthnのようなライブラリはこれを簡素化します。 キー生成を処理し、手動アプローチよりもプロセスを容易にします。
• （simplewauthnを使用したReactクライアントとnode.js Expressサーバーの例プロジェクトが利用可能です。
サーバー側のセットアップ（SimpleWauthnを使用）サーバーは、4つのキーエンドポイントを備えたパッケージを使用します。
1. /generate-registration-options：クライアントの登録オプションを構成および生成し、同じデバイスから複数の登録を防ぎます。 また、課題を生成します。
2. /verify-registration：成功したオンデバイス登録を検証し、データベースにユーザーの詳細（公開キー、資格情報、デバイス情報）を保存します。
3. ：認証オプションを返し、登録されたデバイスIDを取得します /generate-authentication-options
：登録されたデバイスを使用して、成功したオンデバイス認証を検証します。
4. /verify-authentication
この例では、データベース統合が省略されています。生産用にそれを追加する必要があります。
クライアント側のセットアップ（SimpleWauthnを使用）クライアントには2つのボタンが必要です（登録と認証用）。 からの構成要求、次にfrom

を使用します。 登録が成功した後、onRegistrationStart結果を検証します。 認証は、/generate-registration-options、startRegistration()、および@simple-webauthn/browser。 /verify-registrationこのマニュアル方法は複雑で、ユーザーの識別とデータストレージのために追加のセットアップとメンテナンスが必要です。 HTTPSセットアップには追加の手順が必要です /generate-authentication-optionsstartAuthentication()簡単な方法：Descopeを使用してPassKeysを実装します/verify-authentication

DescopeはPassKeyの実装を簡素化し、複雑な手動のセットアップを排除します。 認証フローを管理するためのノーコードインターフェイスを提供します

セコープフローの作成

Descopeアカウントにサインアップします。

ダッシュボードで、Auth Flowを作成します。主要な方法としてpasskeys（webauthn）を選択します オプションで、2FAメソッドを追加します ログイン画面を選択します（追加の登録方法がある可能性があります）。

DescopeはAuth Flowを生成し、プロジェクトIDでコードスニペットを提供します。
2. Reactプロジェクトのセットアップ
4. 。
5. を使用して新しいReactプロジェクトを作成します
Descope sdk：
。

をインストールします プロジェクトIDを使用してin

を設定します
デスコープコンポーネントとフックを使用して、認証フローを実装してください。
1. npm create viteこの単純化された例は、Descopeのサインアップまたはサインインフローを統合する方法を示しています：
2. npm install @descope/react-sdk
アプリを試してみてください
3. AuthProvider main.jsx実行
を実行し、
4. でアプリにアクセスします。 ユーザーを登録し、PassKeysを設定し、ログインをテストします。 DescopeダッシュボードでPassKey Autofillを有効にすることもできます。 App.js
（完全なコードはgithubで利用できます。）

descopeのドラッグアンドドロップ認証

Descopeは、認証フローを管理するためのドラッグアンドドロップインターフェイスを使用してPassKeyの実装を合理化します。これにより、セットアップと変更が簡素化され、あらゆるスキルレベルの開発者がアクセスできます。 簡単に、より速く、よりアクセスしやすいログインを可能にします。

無料のデスコープアカウントにサインアップして詳細を確認してください。

以上が開発者ガイド：PassKeysの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。