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>
その他にも色々オプションが指定できます。
参考サイト
ttps://auth0.com/docs/libraries/lock
ttps://auth0.com/docs/libraries/lock/lock-configuration
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント