フロントエンド実装

JavaScriptを1行読み込み、ボタンを追加します

フロントエンドで行う作業は、Push! PasskeyのJavaScriptを読み込み、パスキー登録・認証ボタン、またはログイン後の登録情報表示タグをHTMLへ追加することです。

headタグ内にJavaScriptの読み込みコードを1行追加する
パスキーボタンを表示したい場所へ、サンプルのbuttonタグを追加する
バックエンドの設置場所と、成功後の移動先だけを書き換える

クリック後の処理中表示、連続クリックの防止、処理失敗時のボタン復帰、Push! Passkeyから戻った後の結果確認は、読み込んだJavaScriptが行います。これらの処理を利用者側で追加する必要はありません。

1. パスキー登録ボタンを設置する

登録ボタンは、ログイン後のページへ設置します

パスキー登録では、どのユーザーへパスキーを登録するのかを特定する必要があります。そのため、登録ボタンは、ログイン済みの会員ページや、本人確認が完了しているページへ設置してください。

ユーザーの特定は、HTMLへユーザーIDを書くのではなく、バックエンド側で現在のログインセッションから行います。

登録ボタン設置HTMLコードサンプル

次は、ログイン後のパスキー設定ページへ登録ボタンを設置する最小構成サンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>パスキー設定</title>

	<!-- この1行をheadタグ内へ追加します -->
	<script src="https://auth.jintec.com/js/passkey.js"></script>
</head>
<body>

	<h1>パスキー設定</h1>

	<!-- パスキー登録ボタンを表示したい場所へ追加します -->
	<button
		type="button"
		class="push_btn"
		data-pushpasskey="regist"
		data-endpoint="/pushpasskey/endpoint.php"
		data-success-url="/mypage/passkey_complete.php">
		パスキーを登録する
	</button>

	<!-- 登録に失敗した場合、この場所へメッセージが表示されます -->
	<div id="resultMessage" role="alert" aria-live="polite"></div>

</body>
</html>

既存ページへは、JavaScriptの1行と、buttonタグ、エラー表示用のdivタグだけ追加します。

2. 登録ボタンの設定を書き換える

サンプルコードのうち、次の設定を自社サイトに合わせて変更します。

属性	設定内容
`type="button"`	固定値
`class="push_btn"`	CSSを適用するためのクラスです。Push! Passkeyの動作では使用しません
`data-pushpasskey="regist"`	変更しません。パスキー登録ボタンであることを意味します
`data-endpoint`	自社サイトへ配置したバックエンドのコードのURLへ書き換えます
`data-success-url`	登録成功後に表示する会員ページや登録完了画面のURLへ書き換えます

基本的に書き換えるのは、data-endpointとdata-success-urlの2か所です。

3. パスキー認証ボタンを設置する

既存のログインページに追加します

パスキー認証ボタンは、既存のユーザーID・パスワードによるログインページに追加できます。利用者は、従来のログイン方法に加えてパスキー認証も選択できるようになります。

認証ボタン設置HTMLコードサンプル

次は、既存のログインフォームの下へパスキー認証ボタンを追加する最小構成サンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ログイン</title>

	<!-- この1行をheadタグ内へ追加します -->
	<script src="https://auth.jintec.com/js/passkey.js"></script>
</head>
<body>

	<h1>ログイン</h1>

	<!-- 既存のユーザーID・パスワードによるログインフォーム -->
	<form method="post" action="/login.php">
		<label>
			ユーザーID
			<input type="text" name="login_id" autocomplete="username">
		</label>

		<label>
			パスワード
			<input type="password" name="password" autocomplete="current-password">
		</label>

		<button type="submit">ログイン</button>
	</form>

	<p>または</p>

	<!-- パスキー認証ボタンを表示したい場所へ追加します -->
	<button
		type="button"
		class="push_btn auth"
		data-pushpasskey="auth"
		data-endpoint="/pushpasskey/endpoint.php"
		data-success-url="/mypage/">
		パスキーでログインする
	</button>

	<!-- 認証に失敗した場合、この場所へメッセージが表示されます -->
	<div id="resultMessage" role="alert" aria-live="polite"></div>

</body>
</html>

既存のログインページでは、JavaScriptの1行と、パスキー認証用のbuttonタグ、エラー表示用のdivタグを追加します。既存のログインフォームは、そのまま残すことができます。

4. 認証ボタンの設定を書き換える

属性	設定内容
`type="button"`	固定値
`class="push_btn auth"`	CSSを適用するためのクラスです。Push! Passkeyの動作では使用しません
`data-pushpasskey="auth"`	変更しません。パスキー認証を開始するボタンであることを指定します
`data-endpoint`	自社サイトへ配置したバックエンドのコードのURLへ書き換えます
`data-success-url`	認証成功後に表示する会員メニューなどのURLへ書き換えます

基本的に書き換えるのは、登録ボタンと同じく、data-endpointとdata-success-urlの2か所です。

5. ログイン後のページへパスキー登録情報を表示する

表示用タグを1つ追加します

パスキー認証後の会員ページや設定ページでは、ログイン中のユーザーに登録されているパスキーの件数と端末情報を表示できます。

表示したい場所へ、次のタグを追加してください。

<div
	data-pushpasskey-credentials
	data-endpoint="/pushpasskey/endpoint.php">
</div>

passkey.jsがこのタグを検出すると、data-endpointで指定した自社サイトのバックエンドへ登録状況を問い合わせ、自動的に一覧を表示します。

表示される情報

登録済みパスキーの件数
端末名
ブラウザ
OS
登録日時
最終利用日時

公開鍵、Credential ID、Credentialの内部JSONはブラウザへ返されません。

ログイン済みページへ設置してください

ブラウザからuser_keyを送信する必要はありません。自社サイトのendpoint.phpがログインセッションからユーザーを特定し、APIキーとuser_keyをPush! Passkeyへサーバー間送信します。

この機能を使用するページでも、次のJavaScriptを読み込んでください。

<script src="https://auth.jintec.com/js/passkey.js"></script>

登録済みパスキーがない場合は「登録されているパスキーはありません」と表示されます。通信中と取得失敗時の案内もJavaScriptが自動表示します。

6. エラーメッセージの表示場所

サンプルHTMLに記載した次のタグは、登録・認証に失敗した場合のメッセージ表示場所です。

<div id="resultMessage" role="alert" aria-live="polite"></div>

通常は何も表示されません。利用者が操作をキャンセルした場合、認証の有効時間が終了した場合、登録・認証に失敗した場合などに、Push! PasskeyのJavaScriptがこの場所へ案内を表示します。

表示されるエラーの種類やエラーコードの詳細は、エラーコードを参照してください。

7. ボタンのデザインを変更する

ボタンの色、横幅、余白などは、自社サイトのデザインに合わせて自由に変更できます。次はCSSの一例です。

.push_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	border: 1px solid #087f8c;
	border-radius: 6px;
	color: #fff;
	background: #087f8c;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

.push_btn:hover {
	opacity: 0.9;
}

.push_btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

このCSSは必須ではありません。既存サイトで使用しているボタン用のCSSに合わせて調整してください。

8. 次にバックエンドを設置する

フロントエンドのHTMLだけでは、パスキー登録・認証・登録情報取得を完了できません。ボタンをクリックすると、data-endpointで指定した自社サイトのバックエンドへ接続します。

そのため、登録・認証・登録情報表示の動作確認は、バックエンドのサンプルコードを設置した後に行います。

次のページから利用している開発言語を選び、サンプルコードを配置してください。

9. 登録情報に削除ボタンを表示する

顧客サイトがユーザーによる削除を許可する場合だけ、登録情報表示タグへ次の属性を追加します。

<div
	data-pushpasskey-credentials
	data-endpoint="/common/endpoint.php"
	data-allow-credential-delete="true"
	data-credential-csrf-token="サーバーで発行したCSRFトークン">
</div>

data-allow-credential-deleteは画面表示の指定です。削除権限の確認はバックエンドで、ログインセッションのユーザーと削除対象が一致するかを必ず検証してください。

削除後は共通JavaScriptが登録情報を再取得します。最後の1件を削除した場合は「登録されているパスキーはありません。」へ表示が切り替わります。