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

# はじめに
この記事は[初めてのAuth0ハンズオン](https://qiita.com/hisashiyamaguchi/items/2d0bcae052077f6ae4a4)の続編で、Auth0のユニークな機能の一つである[Passwordless Connections](https://auth0.com/docs/connections/passwordless)の設定手順です。[Passwordless Connections](https://auth0.com/docs/connections/passwordless)はパスワードの代わりにEmail/SMSで認証できる機能です。ユーザ様がパスワードを管理する必要がなくなります。

# 事前準備
事前に下記をご準備お願いします。

- MacまたはWindows PC
- Chrome
- Node.js, Node Package Manager
- Auth0の無料トライアルアカウント

# 手順
左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。

<img src="https://i.imgur.com/ZtGP5PL.png" width=70%>

"Name"に任意の名前を入力、"Choose an application type"で"Simgle Page Web Applications"を選択して”CREATE”を押します。

<img src="https://i.imgur.com/70rHJkw.png" width=70%>

"Settings"タブをクリックして"Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs"に"`http://localhost:3000`"を入力して画面下の"SAVE CHANGES"を押します。

Applicationの[GitHubリポジトリ](https://github.com/auth0-samples/auth0-react-samples)をローカルPCにクローンします。

```console
$ git clone https://github.com/auth0-samples/auth0-react-samples.git
```

auth0-react-samples/01-Login/srcに移動します。

```console
$ cd auth0-react-samples/01-Login/src
```

auth_config.json.exampleをコピーしてauth_config.jsonを作成します。

```console
$ cp auth_config.json.example auth_config.json
```

auth_copnfig.jsonを編集します。
**<font color="DarkOrange">"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。</font>**

```json
{
  "domain": "kiriko.auth0.com",
  "clientId": "xxxx"
}
```

auth0-react-samples/01-Loginに移動します。

```console
$ cd auth0-react-samples/01-Login
```

npm installを実行して必要なパッケージをインストールします。

```console
$ npm install
```

npm startを実行してApplicationを起動します。

```console
$ npm start
```
Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押します。
**<font color="DarkOrange">手順通りに設定していればAuth0　のUniversal Login画面が表示されます。</font>**

<img src="https://i.imgur.com/igwKmVP.png" width=70%>

左ペインの"Connections"->"Passwordless"をクリックして"Email"をクリックします。
**<font color="DarkOrange">Passwordlessの要素はSMSまたはEmailを指定することが可能です。この記事ではEmailを使用しています。後ほどSMSもお試し下さい。</font>**

<img src="https://i.imgur.com/mzLWdi1.png" width=70%>

全てデフォルトのまま下の"SAVE"を押します。

<img src="https://i.imgur.com/0Yua3Ue.png" width=70%>

”Applications”タブをクリック、作成したApplicationのフリップスイッチをオンにして下の”SAVE”を押します。

<img src="https://i.imgur.com/YDIMIQN.png" width=70%>

"Try"タブをクリック、"Email recipient"にユーザのEmailを入力し"Mode"で"link"を選択して"TRY"ボタンを押します。
**<font color="DarkOrange">ボタンを押すとAuth0 Authentication APIの/passwordless/startエンドポイントにPostリクエストを送り認証を要求します。要求が成功するとユーザにApplicaionの認証リンクが含まれたメールが送信されます。</font>**
[Auth0 Authentication API /passwordless/start](https://auth0.com/docs/api/authentication?shell#passwordless)

<img src="https://i.imgur.com/grave2h.png" width=70%>

メールを確認し"SIGN IN TO YOUR APP"を押します。
**<font color="DarkOrange">指定したApplicationにリダイレクトされます。</font>**

<img src="https://i.imgur.com/KVFzyOe.png" width=70%>

右上の"Log in"を押します。
**<font color="DarkOrange">メールのリンクをクリックした時点でユーザは認証されID_tokenが払い出されています。Auth0のログイン画面が表示されずにログインできたら成功です。</font>**

<img src="https://i.imgur.com/dnTuPwz.png" width=70%>

念のためコマンドラインからcurlコマンドでAPIエンドポイントにPostリクエストを送って動作を確認します。
**<font color="DarkOrange">指定したユーザにメールが送られてきてApplicationにログインできれば成功です。</font>**


- url : `'https://<テナントのドメイン名>/passwordless/start'`
- header : 'content-type: application/json'
- data : client_id, connection, emailを各々JSON形式で指定

```console
$ 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](https://auth0.com/docs/universal-login)のデフォルトテンプレートでも試してみます。
**<font color="DarkOrange">Universal LoginはAuth0がホストする中央制御型のログイン機能です。個々のApplication毎にログイン機能を実装する手間が省けます。</font>**
左ペインの"Universal Login"をクリックして"Login"タブをクリックします。”Customize Login Page”フリップスイッチをオンにして、"DEFAULT TEMPLATES"で"Lock(Passwordless)"を選択、下の"SAVE"を押します。
**<font color="DarkOrange">Passwordless専用のログインウィジェットが表示されます。</font>**

<img src="https://i.imgur.com/rVQ2buC.png" width=70%>

Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押します。ユーザのユーザのEmailを入力して"SUBMIT"を押します。メールでコードが送られてきていれば成功です。コードを入力してログインします。

<img src="https://i.imgur.com/csMuuuR.png" width=70%>
<img src="https://i.imgur.com/xJsgh09.png" width=70%>

左ペインの"Users&Roles"-->"Users"をクリック、Emailで認証されたユーザが登録されていることを確認します。

<img src="https://i.imgur.com/kpNuqTF.png" width=70%>

# おわりに
昨今はパスワードのポリシーが厳しくなり、ユーザ様がパスワードを覚えておくことが困難になっていてユーザ様はApplicationにログインする度にパスワードを変更しているケースもあるかと思います。Passwordless Connectionsを利用することでユーザ様がパスワードを覚えたり、変更したりする手間を省けて、ユーザ様の満足度を上げることができます。不用意にパスワードを保管して盗難にあってしまう等の事故も防げますね。