Web 用 Lock

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

Lock は埋め込み可能なログインフォームで、ニーズに合わせて設定できます。Lock を使用すると、ソーシャルIDプロバイダーを簡単に追加できるため、ユーザーは任意のプロバイダーを使ってスムーズにログインできます。

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

Lock のインストール

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

インストール方法

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

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

bower install auth0-lock

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

最新のマイナーリリース:<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 リポジトリ で確認してください。

モバイル

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

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

依存関係のバンドル

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

クロスオリジン認証

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

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

使い方

ステップ 1. Lock の初期化

まず、新しい Auth0Lock オブジェクトを初期化し、Auth0 の クライアントID (Auth0 アプリケーションごとに一意のクライアントIDで、Dashboard から確認できます) と 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’s パスワードレス モードは、Lock v11.2.0 以降でのみ利用できます。この機能を使用するには、Lock の最新リリースを使用してください。

Lock のパスワードレス モードを使用すると、ユーザーはメールアドレスまたは携帯電話番号だけで認証できます。ユーザーは code を受け取った後、戻ってその code を入力するか、リンクをクリックすることで、パスワードを覚えていなくても認証できます。

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

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

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

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

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

選択したパスワードレス接続を、Dashboard の Connections -> Passwordless で有効にし、続けてその接続をアプリケーションでも有効にしてください。そうしておけば、Lock がその接続を使用しようとしたときに、すでに設定とアプリケーションへの関連付けが完了しています。

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

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

パスワードレスの使用例

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

埋め込みログインを使用するアプリでシングルサインオン (SSO) を実現するには、2つの条件を満たす必要があります。

1. SSO を行う両方のアプリケーションが、いずれもファーストパーティアプリケーションである必要があります。サードパーティアプリケーションとの SSO は機能しません。
2. カスタムドメインを使用し、SSO を行う両方のアプリケーションと Auth0 テナントを同一ドメイン上に配置する必要があります。従来、Auth0 のドメインは foo.auth0.com の形式ですが、カスタムドメインを使用すると、対象の各アプリケーションと Auth0 テナントで同じドメインを使用できるため、CSRF 攻撃のリスクを軽減できます。

埋め込みログインのシナリオで SSO を設定する代わりに、Universal Login を使用することを推奨します。Universal Login は SSO を実現する最も信頼性が高く安定した方法であり、アプリケーションで複数のドメインを使用する必要がある場合、または サードパーティアプリケーションを使用する場合に、これを実現できる唯一の方法です。

エラーコードと説明

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

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

ステータス	コード	説明
400	invalid_request	リクエストボディが無効です。client_id、credential_type、username、otp、realm のすべてが必要であり、指定できるのはこれらのみです。
401	unauthorized_client	クロスオリジンログインは許可されていません。
400	unsupported_credential_type	credential_type パラメーターが不明です。
400	invalid_request	不明な realm: 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 の設定オプション