Lockライブラリを使用してログインウィジェットを作成する – 【Auth0】

Auth0

2023.08.31

lockライブラリを使用してログインウィジェットを作成する – 【Auth0】

lockライブラリを使用してログインウィジェットを作成する – 【Auth0】

Auth0で提供されているユニバーサルログイン画面を使用せずに自前でログインウィジェットを作成します。

lockライブラリをCDN経由で読み込みます。

<script src="https://cdn.auth0.com/js/lock/12.1.0/lock.min.js"></script>

Auth0Lockクラスのインスタンス生成します。引数は２つです。

引数	値
第一引数	クライアントID
第二引数	Auth0 ドメイン

var lock = new Auth0Lock('TYI3Ouyu3ZVqo4bDswKiKe7ixNxNvrty', 'dev-xxxxxxxxxxxxxxxx.jp.auth0.com');

画面表示はshow()メソッドを使用します。

lock.show();

Don’t remember your password?リンクを非表示にする

Auth0Lockクラスのインスタンス生成時に、allowForgotPassword:falseを指定すると「Don’t remember your password?」リンクが非表示になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="origin">
    <title>Lock Sample</title>
</head>

  <body>
    <script src="https://cdn.auth0.com/js/lock/12.1.0/lock.min.js"></script> 
    <script>
      window.addEventListener('load', function() {
        var lock = new Auth0Lock('TYI3Ouyu3ZVqo4bDswKiKe7ixNxNvrty', 'dev-xxxxxxxxxxxxxxxx.jp.auth0.com',{
          allowForgotPassword: false
        });
        lock.show();
      })
    </script>
  </body>
</html>