実装ガイド

Push! Passkeyの実装は、とてもシンプルです

既存のWebサイトへパスキー登録・認証を追加するために、最初から複雑な仕組みを作る必要はありません。

画面側で行うことは、Push! PasskeyのJavaScriptを1行読み込み、パスキーボタンを置きたい場所へ数行のHTMLを追加するだけです。

<head>
    <!-- JavaScriptを1行追加 -->
</head>

<body>
    <!-- パスキーボタンを数行追加 -->
</body>

サーバー側は、このサイトからダウンロードしたサンプルコードを配置し、APIキーや画面のURLなど、指定された箇所だけを自社サイト用に書き換えます。

作業する場所	行うこと
画面側	JavaScriptを1行読み込み、登録・認証ボタンのHTMLを追加する
サーバー側	配布されたサンプルコードを配置し、指定箇所だけを書き換える
管理サイト	利用するドメインのAPIキーを発行する

この実装ガイドでは、最初に「何を用意し、どこを作業するのか」だけを説明します。実際のコードは、次の「フロントエンド実装」と、開発言語別の「バックエンド実装」でそのままコピーできる形で案内します。

Push! Passkeyの契約後、管理サイトへログインし、パスキーを設置するWebサイトのAPIキーを発行してください。

APIキーは、利用するドメインごとに取得します。開発環境と本番環境でドメインが異なる場合は、それぞれのドメインでAPIキーを発行してください。

発行したAPIキーは、サーバー側の設定ファイルへ記載します。ブラウザへ表示するHTMLやJavaScriptには記載しません。

APIキーを再発行した場合は、新しいキーが発行されます。再発行後は、サーバー側の設定を新しいAPIキーへ変更してください。

利用者が自分のパスキーを登録できるようにするため、次の3つを行います。

サンプルコードはそのまま利用できます。自社サイトに合わせて変更する箇所は、APIキー、ユーザーを識別する値、登録完了後の画面URLなど、コード内で指定された部分だけです。

ログイン画面などでパスキー認証を利用できるようにするため、次の3つを行います。

認証用のサンプルコードも、自社サイトに合わせて指定箇所だけを書き換えます。パスキー認証が成功した後は、その結果を使って自社サイトのログイン処理へつなげます。

実際のファイル名は、自社サイトの構成に合わせて変更できます。必要な役割は次のとおりです。

自社サイト
├── パスキー登録ボタンを置くページ
├── パスキー認証ボタンを置くページ
├── APIキーを保存する設定ファイル
├── 登録・認証を処理するサンプルコード
├── 登録完了後の画面
└── 認証完了後の画面

APIキーを保存する設定ファイルと、登録・認証用の処理はサーバー側へ置きます。APIキーが画面上に表示されない場所で管理してください。

まずはサンプルコードの構成を変えずに設置して、登録と認証が動くことを確認してください。動作確認後に、自社サイトの会員情報やログイン処理へ接続します。

次のページでは、JavaScriptの読み込みコードと、パスキー登録・認証ボタンのHTMLを示します。最初にサンプルコードをそのままコピーし、指定された箇所だけを書き換えてください。

利用している開発言語のページからサンプルコードをダウンロードし、APIキーなどの指定箇所だけを書き換えます。

APIのURL、リクエスト項目、レスポンス項目などを確認したい場合は、APIリファレンスを参照してください。