Lock for Web

web app向けに、スムーズなログインおよびサインアップ体験を提供するウィジェット。

Lock は、ニーズに合わせて設定できる埋め込み可能なログインフォームです。Lock を使うと、ソーシャルアイデンティティプロバイダーを簡単に追加できるため、ユーザーは使いたいプロバイダーでシームレスにログインできます。

Web アプリケーションでの埋め込みログインでは、テナントにカスタムドメインを設定しない限り、クロスオリジン認証が使用されます。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを可能にするために、サードパーティ Cookie が使用されます。

Lock のインストール

Lock は複数の方法でインストールできます。ご利用の環境やアプリケーションに最適な、以下のインストール元を選択してください。

インストール方法

npm でインストールします。 npm install auth0-lock

bower でインストールします。

bower install auth0-lock

CDN 経由で読み込みます (.x と .y は、Lock GitHub repository にある最新のマイナーおよびパッチのリリース番号に置き換えてください) 。

最新のマイナーリリース:<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>最新のパッチリリース: <script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>

本番環境のアプリケーションでは、特定のパッチバージョン、少なくとも特定のマイナーバージョンを使用することを推奨します。Lock をどの方法で読み込む場合でも、バージョンは固定し、更新は手動でのみ行うことをおすすめします。これにより、更新によって実装に悪影響が及ぶのを防げます。現在のリリース一覧は、GitHub repository を確認してください。

モバイル

モバイル向けの場合、Auth0 ではアプリケーションの head に次のメタタグを追加することを推奨しています。

<meta name="viewport" content="width=device-width, initial-scale=1"/>

依存関係のバンドル

browserify または webpack を使ってプロジェクトをビルドし、依存関係をバンドルしている場合は、auth0-lock モジュールをインストールした後、それもすべての依存関係とあわせてバンドルする必要があります。Browserify と webpack の例を参照してください。

クロスオリジン認証

Web アプリケーションの埋め込みログインでは、テナントにカスタムドメインを設定していない限り、クロスオリジン認証が使用されます。クロスオリジン認証では、異なるオリジン間で認証トランザクションを安全に行えるようにするため、サードパーティ Cookie を使用します。

アプリケーションに Lock を埋め込むには、クロスオリジン認証が適切に設定されている必要があります。具体的には、Allowed Web Origins プロパティに、リクエスト元のドメインを設定する必要があります。この項目は、アプリケーション設定にあります。

使用状況

Step 1. Lock を初期化する

まず、新しい Auth0Lock オブジェクトを初期化し、Auth0 の クライアント ID (Auth0 アプリケーションごとに固有のクライアント ID で、管理ダッシュボード から確認できます) と Auth0 のドメイン (例: yourname.auth0.com) を指定する必要があります。

ステップ 2. 認証してユーザー情報を取得する

次に、on メソッドを使って authenticated イベントを監視します。イベントが発生したら、受け取った accessToken を使って getUserInfo メソッドを呼び出し、必要に応じてユーザーのプロファイル情報を取得します。

その後、ページの内容を操作して、ユーザーにプロファイル情報を表示できます (たとえば、ウェルカムメッセージに名前を表示するなど) 。

<h2>Welcome <span id="nick" class="nickname"></span></h2>

ユーザープロファイルを保存する場合は、プロファイルオブジェクトを JSON.stringify しておき、あとで使用するときに JSON.parse する必要がある点に注意してください。これは、localStorage には JSON オブジェクトではなく文字列として保存する必要があるためです。

ステップ 3. Lock を表示する

ここでは、ユーザーがログインボタンをクリックしたあとに Lock ウィジェットを表示していますが、ページの読み込み時に lock.show(); を使えば、そのページにアクセスしたときに自動的に Lock を表示することもできます。

これで Lock ウィジェットが表示され、上記の設定と組み合わせれば、ログインを処理する準備は完了です！

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});

パスワードレス

Lock の パスワードレス モードは、Lock v11.2.0 以降でのみ利用できます。この機能を使うには、Lock の最新リリースを使用してください。

Lock のパスワードレスモードを使用すると、ユーザーはメールアドレスまたは携帯電話番号だけで認証できます。ユーザーにはコードが送信され、そのコードを入力するか、リンクをクリックすることで、パスワードを覚えていなくても認証を完了できます。

Lock でパスワードレスモードを実装するには、Auth0Lock ではなく Auth0LockPasswordless を使用して、通常とは少し異なる方法で Lock を初期化します。

パスワードレスのオプション

さらに、Lock のパスワードレスモードには、このモード固有の設定オプションがいくつかあります。

使用する接続タイプを指定するには、allowedConnections オプションに email または sms を値として指定して Lock を初期化します。

var passwordlessOptions = {
  allowedConnections: ['sms']
}

選択したパスワードレス接続を、Auth0 Dashboard の Connections -> Passwordless で有効にし、さらにその接続をアプリケーションでも有効にしておくことを忘れないでください。そうしておけば、Lock がその接続を使おうとしたときに、すでに設定されてアプリケーションにリンクされた状態になっています。

email を使用する場合は、さらにもう 1 つ選択肢があります。ユーザーに入力用のコードを受け取ってもらうか、それとも「マジックリンク」を受け取ってもらうかを選べます。これは passwordlessMethod オプションで設定し、値には code または link を指定します。

var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code'
}

パスワードレスの使用例

埋め込み認証でのシングルサインオン

埋め込みログインでは、アプリケーションが次のアーキテクチャを共有している場合、シングルサインオン (SSO) がサポートされます。

• SSO を試みるアプリケーションは、ファーストパーティアプリケーションである必要があります。サードパーティアプリケーションとの埋め込みセッションの共有はサポートされていません。
• アプリケーションと Auth0 テナントが、カスタムドメインを介してトップレベルドメインを共有している必要があります。デフォルトでは、Auth0 のドメインは example.auth0.com 形式です。カスタムドメインを使用すると、アプリケーションと Auth0 テナントで同じトップレベルドメインを共有でき、CSRF 攻撃の防止にも役立ちます。

アーキテクチャがこれらの条件を満たす場合、Lock を使用した埋め込み SSO が適しています。Universal Login は、セッションレイヤーを通じて、複数のドメインにまたがる SSO やサードパーティアプリケーションとの SSO を自動的に処理します。両者は同じアプリケーション内で併用できます (たとえば、主要なサインインには Universal Login を使用し、埋め込み認証要素の登録やステップアップフローには Lock を使用します) 。トレードオフの比較については、ホスト型ログインと埋め込みログインを参照してください。

エラーコードと説明

Lock を埋め込みログインで使用する場合は、/co/authenticate エンドポイントが使用され、このエンドポイントでは次のエラーが返されます。

エラーの説明は人が読める形式です。コードで解析するべきではなく、また、内容はいつでも変更される可能性があります。

ステータス	コード	説明
400	invalid_request	無効な request body です。client_id、credential_type、username、otp、realm のみを指定する必要があり、これらはすべて必須です。
401	unauthorized_client	クロスオリジンのログインは許可されていません。
400	unsupported_credential_type	不明な credential type パラメーターです。
400	invalid_request	不明なレルム non-existent-connection です。
403	access_denied	メールアドレスまたはパスワードが正しくありません。
403	access_denied	認証エラー
403	blocked_user	ブロックされたユーザー
401	password_leaked	現在使用しているパスワードが、過去にデータ侵害 (このアプリケーション内ではありません) によって漏えいしていたため、このログイン試行はブロックされました。
429	too_many_attempts	ログイン試行が連続して複数回行われたため、アカウントがブロックされました。ブロックを解除する方法については、ご希望の連絡方法で通知を送信しました。
429	too_many_attempts	不審なログイン動作が検出されたため、以降の試行はブロックされます。管理者に連絡してください。

ブラウザー互換性

ブラウザー互換性は、Chrome、Safari、Firefox、および IE 10 以降 で保証されています。Auth0 では現在、各プッシュ時に zuul と Saucelabs を使用して統合テストを実行しています。

詳しくはこちら

• Lock API リファレンス
• Lock の設定オプション