はじめに
この記事は初めてのAuth0ハンズオンの続編で、Auth0のユニークな機能の一つであるPasswordless Connectionsの設定手順です。Passwordless Connectionsはパスワードの代わりにEmail/SMSで認証できる機能です。ユーザ様がパスワードを管理する必要がなくなります。
事前準備
事前に下記をご準備お願いします。
- MacまたはWindows PC
- Chrome
- Node.js, Node Package Manager
- Auth0の無料トライアルアカウント
手順
左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。
"Name"に任意の名前を入力、"Choose an application type"で"Simgle Page Web Applications"を選択して”CREATE”を押します。
"Settings"タブをクリックして"Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs"に"http://localhost:3000"を入力して画面下の"SAVE CHANGES"を押します。
ApplicationのGitHubリポジトリをローカルPCにクローンします。
$ git clone https://github.com/auth0-samples/auth0-react-samples.git
auth0-react-samples/01-Login/srcに移動します。
$ cd auth0-react-samples/01-Login/src
auth_config.json.exampleをコピーしてauth_config.jsonを作成します。
$ cp auth_config.json.example auth_config.json
auth_copnfig.jsonを編集します。
"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。
{
"domain": "kiriko.auth0.com",
"clientId": "xxxx"
}
auth0-react-samples/01-Loginに移動します。
$ cd auth0-react-samples/01-Login
npm installを実行して必要なパッケージをインストールします。
$ npm install
npm startを実行してApplicationを起動します。
$ npm start
Chromeでhttp://localhost:3000にアクセスして右上の"Log in"を押します。
手順通りに設定していればAuth0 のUniversal Login画面が表示されます。
左ペインの"Connections"->"Passwordless"をクリックして"Email"をクリックします。
Passwordlessの要素はSMSまたはEmailを指定することが可能です。この記事ではEmailを使用しています。後ほどSMSもお試し下さい。
全てデフォルトのまま下の"SAVE"を押します。
”Applications”タブをクリック、作成したApplicationのフリップスイッチをオンにして下の”SAVE”を押します。
"Try"タブをクリック、"Email recipient"にユーザのEmailを入力し"Mode"で"link"を選択して"TRY"ボタンを押します。
ボタンを押すとAuth0 Authentication APIの/passwordless/startエンドポイントにPostリクエストを送り認証を要求します。要求が成功するとユーザにApplicaionの認証リンクが含まれたメールが送信されます。
Auth0 Authentication API /passwordless/start
メールを確認し"SIGN IN TO YOUR APP"を押します。
指定したApplicationにリダイレクトされます。
右上の"Log in"を押します。
メールのリンクをクリックした時点でユーザは認証されID_tokenが払い出されています。Auth0のログイン画面が表示されずにログインできたら成功です。
念のためコマンドラインからcurlコマンドでAPIエンドポイントにPostリクエストを送って動作を確認します。
指定したユーザにメールが送られてきてApplicationにログインできれば成功です。
- url :
'https://<テナントのドメイン名>/passwordless/start' - header : 'content-type: application/json'
- data : client_id, connection, emailを各々JSON形式で指定
$ curl --request POST \
--url 'https://kiriko.auth0.com/passwordless/start' \
--header 'content-type: application/json' \
--data '{"client_id":"xxxxxxxx", "connection":"email", "email":"minaminameatan@gmail.com"}'
Universal Loginのデフォルトテンプレートでも試してみます。
Universal LoginはAuth0がホストする中央制御型のログイン機能です。個々のApplication毎にログイン機能を実装する手間が省けます。
左ペインの"Universal Login"をクリックして"Login"タブをクリックします。”Customize Login Page”フリップスイッチをオンにして、"DEFAULT TEMPLATES"で"Lock(Passwordless)"を選択、下の"SAVE"を押します。
Passwordless専用のログインウィジェットが表示されます。
Chromeでhttp://localhost:3000にアクセスして右上の"Log in"を押します。ユーザのユーザのEmailを入力して"SUBMIT"を押します。メールでコードが送られてきていれば成功です。コードを入力してログインします。
左ペインの"Users&Roles"-->"Users"をクリック、Emailで認証されたユーザが登録されていることを確認します。
おわりに
昨今はパスワードのポリシーが厳しくなり、ユーザ様がパスワードを覚えておくことが困難になっていてユーザ様はApplicationにログインする度にパスワードを変更しているケースもあるかと思います。Passwordless Connectionsを利用することでユーザ様がパスワードを覚えたり、変更したりする手間を省けて、ユーザ様の満足度を上げることができます。不用意にパスワードを保管して盗難にあってしまう等の事故も防げますね。