読者です 読者をやめる 読者になる 読者になる

【JavaScript実験】 Auth0の利用

JavaScript

ユーザー認証サービスAuth0を試してみた。

auth0.com

  1. 登録
  2. クライアントの作成
  3. コールバックURLの設定
  4. Auth0ライブラリの読み込み
  5. Auth0Lockオブジェクトの初期化
  6. ログインボタンの追加
  7. ログインボタンクリック時に認証ダイアログを表示
  8. 認証完了イベントの定義

登録

Githubアカウントで登録できた。

クライアントの作成

ダッシュボードの「NEW CLIENT」から。

f:id:kosumoro:20160820163509j:plain

「Name」にクライアント名を入力し、「Single Page Web Applications」を選択してCREATEする。

f:id:kosumoro:20160820152454j:plain

コールバックURLの設定

ダッシュボード左メニュー「Clients」をクリックして作成したクライアントを選ぶ。

「Settings」タブの「Allowed Callback URLs」にアプリケーションのURLを入力する。

f:id:kosumoro:20160820163956j:plain

今回はhttps://cosmology233.github.io/sandbox/hatena/2016/08/25/にサンプルページを作成するので「https://cosmology233.github.io/sandbox/hatena/2016/08/25/」を入力しておく。

Auth0ライブラリの読み込み

HTML内で <script src="//cdn.auth0.com/js/lock/10.0/lock.min.js"></script> を読み込む。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Practice Javascript</title>
</head>
<body>
  
  <script src="//cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

Auth0Lockオブジェクトの初期化

{
  // Auth0Lockオブジェクトの初期化
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com", {
    "auth": { 
      "params": {
        "scope": "openid email"
      }
    }
  });
}

Auth0Lock コンストラクタの引数はそれぞれ「Domain」、「Client ID」、「初期化設定用オブジェクト」となっている。

「Domain」と「Client ID」はダッシュボード左メニュー「Clients」でクライアント選択後、「Settings」タブから確認できる。

f:id:kosumoro:20160820163820j:plain

「初期化設定用オブジェクト」についてはよくわからない。

ログインボタンの追加

HTMLにログインボタンを追加する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Practice Javascript</title>
</head>
<body>
  <p>
    <button id="loginButton">LOGIN</button>
  </p>

  <script src="//cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

スクリプト内で要素を取得しておく。

{
  // Auth0Lockオブジェクトの初期化
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com", {
    "auth": { 
      "params": {
        "scope": "openid email"
      }
    }
  });

  // ログイン用ボタン要素を取得
  let loginButton = document.getElementById("loginButton");
}

ログインボタンクリック時に認証ダイアログを表示

{
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com", {
    "auth": { 
      "params": {
        "scope": "openid email"
      }
    }
  });
  let loginButton = document.getElementById("loginButton");
  
  loginButton.addEventListener("click", () => {
    lock.show();
  });
}

show メソッドを実行するだけで認証ダイアログが表示される。

f:id:kosumoro:20160820164259j:plain

認証完了イベントの定義

認証ダイアログで認証が完了すると元のページへリダイレクトされる。

{
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com", {
    "auth": { 
      "params": {
        "scope": "openid email"
      }
    }
  });
  let loginButton = document.getElementById("loginButton");
  
  loginButton.addEventListener("click", () => {
    lock.show();
  });
  
  lock.on("authenticated", (authResult) => {
    console.log("authenticated!");
  });
}

f:id:kosumoro:20160820163429j:plain

on メソッドでイベント登録ができる。認証完了時は authenticated イベントが発火する。

認証完了後の処理は on メソッドのコールバック関数として定義していく。