はじめに

この記事は初めての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を利用することでユーザ様がパスワードを覚えたり、変更したりする手間を省けて、ユーザ様の満足度を上げることができます。不用意にパスワードを保管して盗難にあってしまう等の事故も防げますね。

Auth0のユニークな機能 - Passwordless Connections編

はじめに

事前準備

手順

おわりに