このガイドは、開発者にパスキーベースの認証を追加して、セキュリティとユーザーエクスペリエンスを向上させる方法を示しています。 マニュアルサーバーとクライアントの両方のセットアップと、Descopeが視覚インターフェイスと事前に構築されたフローでこれをどのように単純化するかを説明します。 このチュートリアルは、インドのソフトウェア開発者および技術著者であるKumar Harshによるものです。彼のウェブサイトで彼の作品の詳細をご覧ください!
PassKeysを使用すると、アプリケーションのセキュリティとユーザーの利便性が向上します。このガイドでは、セットアップから展開まで、PassKeyの実装を詳しく説明しています。 これらの手順に従うと、安全でユーザーフレンドリーな認証エクスペリエンスが作成され、不正アクセスが減り、ユーザーの信頼が削減されます。passkey認証:基本
脆弱なパスワードとは異なり、PassKeysはパブリックキー暗号化を使用して、セキュリティとユーザーエクスペリエンスの両方を強化します。ボールトを考えてみてください:あなたのアイデンティティは固定されており、一意のキーペアでのみアクセスできます。 PassKeysは同様に動作します。各ユーザーには秘密キー(デバイスに安全に保存されています)と、ウェブサイトと共有される公開キーがあります。
ログインには、ユーザーのデバイスにチャレンジを送信するWebサイトが含まれます。秘密鍵は、一意の署名(デジタル指紋)を作成し、キー自体を明らかにすることなくIDを確認します。 これにより、ウェブサイトが侵害されてもログインが安全になります。視覚的表現は次のとおりです
図:パスキー認証式
PassKeysの実装:マニュアルアプローチ(そして、なぜそうすべきではないのか)
PassKeysは革新的ですが、セットアップの難易度とセキュリティリスクのために手動の実装は複雑であり、落胆しています。 サポートされているライブラリを使用するのが最善です
サーバーサイドのセットアップ:これには、キー生成、署名検証、証明の取り扱い、およびユーザー情報のためのデータベース統合が含まれます。
FrontEnd統合:
JavaScriptのおよび
を使用して、クライアントはユーザーを認証機のインタラクション(指紋スキャン、ピンなど)を介してユーザーをガイドし、サーバーにデータを送信します。/generate-registration-options
:クライアントの登録オプションを構成および生成し、同じデバイスから複数の登録を防ぎます。 また、課題を生成します。/verify-registration
:成功したオンデバイス登録を検証し、データベースにユーザーの詳細(公開キー、資格情報、デバイス情報)を保存します。
/generate-authentication-options
/verify-authentication
を使用します。 登録が成功した後、onRegistrationStart
結果を検証します。 認証は、/generate-registration-options
、startRegistration()
、および@simple-webauthn/browser
。
/verify-registration
このマニュアル方法は複雑で、ユーザーの識別とデータストレージのために追加のセットアップとメンテナンスが必要です。 HTTPSセットアップには追加の手順が必要です
/generate-authentication-options
startAuthentication()
簡単な方法:Descopeを使用してPassKeysを実装します/verify-authentication
DescopeはPassKeyの実装を簡素化し、複雑な手動のセットアップを排除します。 認証フローを管理するためのノーコードインターフェイスを提供します
セコープフローの作成
Descopeアカウントにサインアップします。
ダッシュボードで、Auth Flowを作成します。主要な方法としてpasskeys(webauthn)を選択します オプションで、2FAメソッドを追加します ログイン画面を選択します(追加の登録方法がある可能性があります)。
をインストールします プロジェクトIDを使用してin
を設定しますnpm create vite
この単純化された例は、Descopeのサインアップまたはサインインフローを統合する方法を示しています:npm install @descope/react-sdk
AuthProvider
main.jsx
実行App.js
descopeのドラッグアンドドロップ認証
Descopeは、認証フローを管理するためのドラッグアンドドロップインターフェイスを使用してPassKeyの実装を合理化します。これにより、セットアップと変更が簡素化され、あらゆるスキルレベルの開発者がアクセスできます。 簡単に、より速く、よりアクセスしやすいログインを可能にします。
無料のデスコープアカウントにサインアップして詳細を確認してください。
以上が開発者ガイド:PassKeysの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。