はじめに
このラボでは次の内容について学びます。
- Node.js/Express WebアプリケーションにOkta Customer Identity Cloud (powered by Auth0)を使って認証機能を実装する方法
- 認証方式としてパスキーを有効化させる方法
必要環境
このラボを実施する場合は次の環境が必要となります。
- Okta Customer Identity Cloud (powered by Auth0)アカウント - 無料サインアップ
- Node.js (v12.0.0以降)
- 任意のコードエディタ
- パスキーに対応したブラウザ
パスキーとは
パスキーを使用したユーザー認証はパスワード認証で起こる可能性のあるフィッシングサイトへの誤った入力やパスワードの使い回しなどを抑制できるため、速く、簡単、安全なログイン体験を提供します。
パスキーは公開鍵暗号方式を使用し、秘密を共有せずにユーザーのIDを証明するキーペアであり、FIDO2クレデンシャル としても知られています。このクレデンシャルは暗号化機能をもつデバイスに保存されます。このデバイスは認証器とも呼ばれ、要件を満たすコンピューターやスマートフォン、セキュリティキーなどが該当します。
認証器に保存されたパスキーは ユーザーアカウントとWebサイトまたはアプリケーションの両方にバインド されます。新しいパスキーが作成されると、ユーザーIDとRelying Party ID（Webサイトの場合は通常そのドメイン）に自動的に関連付けられます。
ユーザー認証の際にはRelying Party IDを使用し、対象のWebサイトに対して自動的にユーザーIDを自度的に検出します（Discoverable - 検出可能）。この検出されたユーザーIDを認証に使用できるため、エンドユーザー自らがユーザーIDを記憶したり、入力したりする必要がなくなります。結果、悪意があるフィッシングサイトに誤ってユーザーIDを入力することを防げます。
パスキーには2つの種類が用意されており、セキュリティやユーザー体験によって選択できます。
-
Device-bound passkeys（デバイスにバインドされたパスキー）:作成された単一のデバイスにバインドされたパスキーを示します。このパスキーは他に共有できないため、セキュリティが高まります。一方、バインドされたデバイスが故障、あるいはデバイスを紛失してしまった場合のアカウントリカバリーが問題になることがあります。
-
Synced passkeys（同期されたパスキー）:複数のデバイス（マルチデバイス）間で同期できるパスキーを示します。デバイス間での同期やクラウドアカウント（Apple IDに紐づくiCloudキーチェーンなど）を用いて同期ができ、特定のデバイスに問題が発生した場合も同期されている他の端末を利用できるため、シンプルなユーザー体験を提供できます。
詳しくはFIDOアライアンス - パスキーをご覧ください。
次のセクションからOkta Customer Identity Cloud (powered by Auth0)を用いてアプリケーションの認証にパスキーを利用する方法を学習します。
Okta Customer Identity Cloud (powered by Auth0)のセットアップ
このセクションではOkta Customer Identity Cloud (powered by Auth0)を使って認証機能を実装するため、ダッシュボードから認証用のApplicationを作成します。
1. ダッシュボードにアクセス
ダッシュボードにはhttps://manage.auth0.comからアクセスできます。 ダッシュボード画面の左上にテナント名が表示されています。このラボに使用したいテナントであることを確認してください。
2. Regular Web Applicationの作成
ダッシュボードからApplications - Applicationsを開き、+ Create Applicationボタンをクリックして新規にApplicationを登録します。
新規にApplicationを作成する場合、名前とApplicationの種類を選択します。
このラボでは名前を Auth0ByOktaPasskeys とし、Applicationの種類については Regular Web Applications を選択し、Createボタンをクリックします。
これで新規に認証用Applicationが作成されました。
Quickstartを使用したサンプルExpressアプリケーションの設定
このセクションではQuickstartを使用しあらかじめ用意されているNode.js/Expressサンプルアプリケーションに認証機能を組み込みます。
1. Quickstart一覧からNode.js (Express)を選択
Okta Customer Identity Cloud (powered by Auth0)には認証機能をすばやく確認するためのQuickstartが用意されています。先ほど作成したApplicationを開き、Quickstartタブを選択します（Application作成直後はこのタブが開かれています）。
QuickstartタブからNode.js (Express)を選択します。
Quickstartでは既存のアプリケーションに認証機能を組み込む方法と、用意されているサンプルアプリケーションに組み込む方法が紹介されています。今回のラボではサンプルアプリケーションに認証機能を組み込むため、右側のExplore Sample Appをクリックします。
2. 設定を確認し、サンプルアプリケーションをダウンロード
アプリケーションをダッシュボードで作成した認証用のApplicationに連携させるには、Allowed Callback URLsとAllowed Logout URLsを設定する必要があります。
Allowed Callback URLs- 認証を完了した後、ユーザーをリダイレクトできるURLのセット。Allowed Logout URLs- ユーザーがログアウトした後に戻れるアプリケーション側のURLのセット。
今回はサンプルアプリケーション用にあらかじめ初期設定値が定義されているので変更せずに Save And Download Appボタンをクリックし__01-login.zip__ という名前がついたzipファイルをダウンロードします。
3. zipファイルを解凍しサンプルアプリケーションを実行
ダウンロードしたzipファイルを解凍し、ターミナル/コマンドプロンプトから解凍先のディレクトリに移動したのち依存関係をインストールします。
$ npm install
パッケージのインストール後、サンプルアプリケーションを実行します。
$ npm start
アプリケーションが正しく動作している場合、ブラウザーでhttp://localhost:3000を開くとサンプルアプリケーションが起動します。
4. ブラウザーでサンプルアプリケーションを開き認証機能が正しく動作することを確認
ここでは認証機能を確認します。起動したサンプルアプリケーションでLoginリンクをクリックします。これまでの設定が正しければログイン画面が表示されます。
初期設定では日本語環境においても英語のログインUIが表示されます。このまま動作を確認しても構いませんが、日本語で表示させたい場合はダッシュボードからSettings - Generalを選択し、LanguagesセクションのDefault LanguageをJapanese (ja)に設定します。値を変更した場合は、Saveボタンで反映することを忘れないようにします。
言語を変更した場合、日本語環境で再度http://localhost:3000を開きLoginリンクをクリックすると、ログイン画面が日本語で表示できます。
任意のメールアドレスを使用してサインアップから新たにユーザーを登録しログインすると下記のような画面が表示されます。これでExpress/Node.jsアプリケーションに認証機能が組み込まれました。
標準の設定ではパスワードを使った認証方式、あるいはGoogleアカウントを利用したソーシャルログインが提供されています。
ログインが確認できたため、次のセクションの準備としてLogoutリンクをクリックし、アプリケーションからログアウトします。
これでサンプルNode.js/Expressアプリケーションに認証機能が組み込まれたことを確認できました。次のセクションではパスキー機能の有効化を行います。
パスキー機能の有効化
このセクションではパスキーを使った認証方式をサンプルアプリケーションに組み込みます。
1. Database Connectionでパスキーを有効化
Database Connectionではユーザーを認証するためのデータベース接続を提供します。登録した資格情報は我々のデータストア、または、独自のデータベースに保存されるため、先ほどのテストで登録したユーザーもこちらを使って認証され登録されています。パスキーを使用する場合、Database Connectionの認証方式として設定します。
Database Connectionの設定はダッシュボードからAuthentication - Databaseを選択します。テナントを新規に作成した場合、Username-Password-Authenticationという名前のDatabase Connectionが自動的に作成されているため、こちらをクリックします。
続けてAuthentication Methodsタブを選択します。初期状態ではユーザー認証の方法がパスワードのみとなっているため、Passkeyを有効化します。
パスキー機能を利用するためにはいくつかの条件を満たす必要があります。条件に満たない場合は下記のようなポップアップが表示されます。
このラボ作成時点の利用条件は下記のとおりです。
- Identifier First login flowを使用する
- カスタムログインページを使用しない
- ユーザー名を使用しない
- Auth0へのユーザーインポートを使用しない場合は、Custom Databaseを使用しない
- New Universal Loginを使用する
それぞれに設定項目のリンクより条件に合うように設定を変更します。今回のようにIdentifier First login flowが DONE になっていない場合は、Authentication - Authentication Profileを表示し、Identifier Firstプロファイルを選択します。選択後、Saveボタンをクリックし、変更を反映します。
再度、Authentication - DatabaseからUsername-Password-Authenticationを選択し、Authentication MethodsタブでPasskeyを有効化します。トグルボタンが緑色になっていることを確認します。
これでパスキー機能が有効化されました。サンプルアプリケーションのコード変更は必要ありません。
パスキーを使った新規ユーザー登録フローの確認
それでは新規のユーザー登録を通じてパスキーの使用を確認しましょう。ブラウザーでhttp://localhost:3000を開き、Loginボタンをクリックしてログイン画面を表示させます。先ほどとはことなりパスキーを使用して続行するというラベルのボタンが追加されていることが確認できます。
サインアップから先ほど登録したEmailアドレスとは別のアドレスを使用しサインアップします。Identifier First login flowでは最初にメールアドレスのみを入力したのち、次の画面へと遷移します。
パスキー機能が有効になっている場合はここで利用を推奨されます。続けてパスキーを作成ボタンをクリックします。
どこにパスキーを作成するのかを問うダイアログをブラウザが表示するため、ご自身の環境に最も合った方法でパスキーを作成してください。
※実際の画面はブラウザによって異なります。
パスキー作成後、パスキーを用いたユーザー登録がされログインが完了します。 これでパスキー機能が有効化でき、実際にパスキーでのユーザ登録も確認できました。
パスワード認証を既に使用しているアカウントを利用した場合は、通常の認証後にパスキーの使用を提案するダイアログが表示されます。
まとめ
このラボではパスキーに関する基本的、Okta Customer Identity Cloud (powered by Auth0)を用いた認証機能の実装、パスキーの有効化について学習しました。
パスキーを利用するとWebサイトやアプリケーションにより早く、簡単にログインできます。また、フィッシングへの耐性も高くなります。 Okta Customer Identity Cloud (powered by Auth0)は無料プランを含む全てのプランでこれまでの認証方法に加え、パスキーを使用した認証を素早く、簡単に追加できます。 ぜひご活用ください。