Web用のLock

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

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を使用した例が用意されています。

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

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

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

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

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

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に保存する必要があるからです。

ここでは、ユーザーが［ログイン］ボタンをクリックしたときに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を若干異なる方法で初期化します。

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エンドポイントが採用されます。このエンドポイントには、次のエラーが含まれます。

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

Chrome、Safari、Firefox、IE >= 10ではブラウザー互換性が確保されています。Auth0は現在、zuulとSaucelabsを使って、各プッシュで統合テストを実行しています。

• Lock APIのリファレンス
• Lockの構成オプション