Web用のLock

Webアプリにスムーズなログイン・サインアップエクスペリエンスを提供するウィジェットです。

Lockは、ユーザーのニーズに合わせて構成できる埋め込み可能なログインフォームで、シングルページアプリでの使用が推奨されますが、ユニバーサルログインと併用するのが望ましく、可能なときはいつでも使用してください。Lockを使用すると、ソーシャルIDプロバイダーを手軽に追加できるため、ユーザーは任意のプロバイダーを使用してシームレスにログインすることができます。

Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、カスタムドメインを設定して同じドメインにアプリをホスト しないと、クロスオリジン認証の信頼性が欠ける可能性があります。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。

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リポジトリで現在のリリース一覧を確認します。

モバイル

モバイルのオーディエンスを対象にしている場合は、次のメタタグをアプリケーションのheadに追加することをお勧めします。

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

依存関係のバンドル

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

クロスオリジン認証

Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、カスタムドメインを設定して同じドメインにアプリをホスト しないと、クロスオリジン認証の信頼性が欠ける可能性があります。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。

アプリケーション内でLockを埋め込むには、クロスオリジン認証を適切に構成する必要があります。具体的には、［Allowed Web Origins（許可されているWebオリジン）］ プロパティを要求しているドメインに設定する必要があります。このフィールドは、［Application Settings（アプリケーションの設定）］で見つけることができます。

Lockで埋め込みログインを実装する前に、必ずクロスオリジン認証の制限事項をお読みください。

使用

1. Lockの初期化

まず、新しいAuth0Lockオブジェクトを初期化し、そのオブジェクトにAuth0クライアントID（Auth0アプリケーションごとに一意のクライアントIDで、管理ダッシュボードから入手可能）とAuth0ドメイン（yourname.auth0.comなど）を提供する必要があります。

codeblockOld.header.login.logInButton codeblockOld.header.login.configureSnippet

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);

2. ユーザー情報の認証と取得

次に、onメソッドを使ってauthenticatedイベントをリッスンします。イベントが発生したら、accessTokenを使用します。これは、getUserInfoメソッドを呼び出し、ユーザーのプロファイル情報を（必要に応じて）取得するために受け取ったものです。

codeblockOld.header.login.logInButton codeblockOld.header.login.configureSnippet

var Auth = (function() {

  var wm = new WeakMap();
  var privateStore = {};
  var lock;

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
    wm.set(privateStore, {
      appName: "example"
    });
  }

  Auth.prototype.getProfile = function() {
    return wm.get(privateStore).profile;
  };

  Auth.prototype.authn = function() {
    // Listening for the authenticated event
    this.lock.on("authenticated", function(authResult) {
      // Use the token in authResult to getUserInfo() and save it if necessary
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Handle error
          return;
        }

        //we recommend not storing Access Tokens unless absolutely necessary
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

        wm.set(privateStore, {
          profile: profile
        });

      });
    });
  };
  return Auth;
}());

その後で、ページのコンテンツを操作して、ユーザーにプロファイル情報を表示（歓迎メッセージに名前を表示するなど）することができます。

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

ユーザープロファイルを保存する場合は、プロファイルオブジェクトにJSON.stringifyを適用し、後で使用する場合はJSON.parseを適用します。これは、JSONオブジェクトでなく文字列としてlocalStorageに保存する必要があるからです。

3. Lockの表示

ここでは、ユーザーが［ログイン］ボタンをクリックしたときにLockウィジェットが表示されるようにしています。ページに移動した時点で自動的にLockを表示したいときは、ページの読み込み時にlock.show();を使用します。

これでLockウィジェットが表示されるようになります。上記の手順も完了し、ログインを処理する準備が整いました！

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

パスワードレス

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

Lockのパスワードレスモードを使うと、ユーザーがメールアドレスや携帯電話番号だけで認証できるようになります。ユーザーにコードが送信され、それを入力するか、リンクをクリックするだけで認証できるため、パスワードを覚える必要がありません。

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

codeblockOld.header.login.logInButton codeblockOld.header.login.configureSnippet

var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}'
);

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

また、Lockのパスワードレスモードには、専用の構成オプションがいくつかあります。

使用したい接続タイプを示すには、allowedConnectionsオプションでLockを初期化し、emailかsmsのいずれかを値に使用します。

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

［Dashboard］の ［Connections（接続）］-> ［Passwordless（パスワードレス）］ でご希望のパスワードレス接続を必ず有効にしてから、アプリケーション用に有効にします。こうすることで、Lockで使用しようとするときに、接続はすでに設定されアプリケーションにリンクされています。

emailを使用することを選んだ場合は、ユーザーに入力コードとマジックリンクのどちらを送信するかも指定しなければなりません。これは、passwordlessMethodオプションを介して行われます。このオプションは、codeまたはlinkの値をとります。

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

パスワードレスの例

var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code',
  auth: {
    redirectUrl: 'http://localhost:3000/callback',   
    responseType: 'token id_token',
    params: {
      scope: 'openid email'               
    }          
  }
}

var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}',
 passwordlessOptions
);

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

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

1. SSOを行おうとするアプリケーションの両方が、ファーストパーティーのアプリケーションでなくてはなりません。サードパーティーのアプリケーションではSSOが動作しません。
2. カスタムドメインを使用していること、SSOを実装しようとしているアプリケーションとAuth0テナントが同じドメインにあることが必要です。従来、Auth0ドメインの形式はfoo.auth0.comですが、カスタムドメインを使用すると、該当するすべてのアプリケーションとAuth0テナントに同じドメインを使用してCSRF攻撃のリスクを回避できます。

埋め込みログインの実装では、SSOをセットアップする代わりに、ユニバーサルログインの使用をお勧めします。ユニバーサル ログインは、SSOを実行するための最も信頼性が高く安定した方法であり、アプリケーションに複数のドメインを使用する必要がある場合や、サードパーティアプリケーションを使用する必要がある場合に実行できる唯一の方法です。

エラーコードと説明

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

エラーの説明は人間が判読できるものです。この説明はコードを用いて解析するものではありません 。また、いつでも変更される可能性があります。

ステータス	コード	説明
400	invalid_request	無効な要求本文。client_id、credential_type、username、otp、realmのすべてが必要で、これ以外があってはなりません。
401	unauthorized_client	クロスオリジンログインは許可されていません。
400	unsupported_credential_type	不明な資格情報タイプのパラメーター。
400	invalid_request	不明な領域の存在しない接続。
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の構成オプション