初めてのAuth0ハンズオン

# はじめに
この記事は、初めてAuth0を触る方がAuth0を利用した認証・認可の基本的な実装方法を短時間でご習得頂くことを目的とした簡易チュートリアルです。

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

- MacまたはWindows PC
- Chrome
- GitHubのアカウント、Git CLI
- Node.js, Node Package Manager
- SMSが使える携帯電話
- 通信制限がかかっていないインターネット環境

# ハンズオン
## Auth0無料アカウントの取得〜テナントの作成
Chromeで`https://auth0.com`にアクセスして画面右上の"SIGN UP"を押します。任意のEmailアドレスでアカウントを作成します。アカウントが作成されると開発テナントが作成され、このアカウントがテナントの管理者となります。

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

右上の顔写真の右下矢印をクリックして"Create tenant"を選択します。

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

Tenant Domainに任意の名前を入力して他はデフォルトのまま"CREATE"を押します。
**<font color="DarkOrange">テナントの作成をご体感頂くために作成しています。アカウント作成のタイミングで作成された開発テナントをそのままご利用頂いても問題ありません。</font>**

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

## Applicationの登録〜認証機能の統合

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

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

"Name"に任意の名前を入力、"Choose an application type"で"Single 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"を押します。
**<font color="DarkOrange">Auth0で認証が成功した際やApplicationからログアウトした際にコールバックできるURLを指定しています。</font>**

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

Applicationの[GitHubリポジトリ](https://github.com/auth0-samples/auth0-react-samples)をローカルPCにクローンします。
**<font color="DarkOrange">Auth0は65以上の言語やフレームワークに対応したSDK、それらのSDKを利用したサンプルアプリケーションをGitHubに公開しています。一から実装する必要は無いのでそれらを検索して利用して下さい。</font>**

```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%>

"Sign up"タブをクリック、任意のEmail/Passwordでユーザを作成します。User Consentの画面で”Accept”を押します。Auth0のダッシュボード・左ペインの"Users"をクリックして作成されたユーザが表示されていれば成功です。

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

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

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

## Social Connectionの設定
左ペインの"Connections"->"Social"をクリックしてGoogleのフリップスイッチをクリックします。Googleアカウントでログイン可能なApplicationを選択して"CONTINUE"を押します。

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

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

設定画面で全てデフォルトのまま画面下の"SAVE"を押します。
**<font color="DarkOrange">Client ID/SecretはAuth0が標準のDevelopment Keyを持っているため指定しなくても問題ありません。Permissionsをカスタマイズする場合はGoogle側のセキュリティ設定が必要になるケースもあります。詳細はGoogle側のAPIドキュメントをご参照下さい。</font>**
Googleのフリップスイッチがオンになったことを確認します。

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

Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押します。
**<font color="DarkOrange">Googleのログインボタンが表示されていれば成功です。Googleアカウントでログインして下さい。</font>**

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



## Rulesの設定
Rulesは、認証・認可のプロセスで予めJSで定義したロジックを実行することができるAuth0のユニークな機能です。[参考:Inside the Auth0 Engine](https://cdn.auth0.com/blog/auth0-raises-100m-to-fuel-the-growth/inside-the-auth0-engine-high-res.jpg)

左ペインの"Rules"をクリック、右上の"CREATE RULE"を押します。

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

"Access Cpontrol"配下の"Add persistent attributes to user"をクリックします。
**<font color="DarkOrange">この記事では例としてユーザにカスタムの属性を追加するルールを試しています。後ほど他のルールもお試し下さい。</font>**

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

画面下の"SAVE CHANGES"を押します。

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

Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押して任意のアカウントでログインします。

左ペインの"Users & Roles"->該当のユーザをクリック、"user_metadata"に"color": "blue"が属性として追加されていれば成功です。
**<font color="DarkOrange">ログイン認証のプロセス中に設定したルールが実行されカスタム属性が追加されました。</font>**

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


## Multi Factor Authenticationの設定
左ペインの"Multifactor Auth"をクリック、"Always require Multi-factor Authentication"フリップスイッチをオンにします。

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

Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押します。"アカウントの安全性向上"と表示されたダイアログで”別の方法を試す”をクリックします。”他の方法”と表示されたダイアログで”SMS”をクリックします。
**<font color="DarkOrange">この記事では例として二要素目をSMSにしています。後ほど他の要素もお試し下さい。</font>**

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

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


"アカウントの安全性向上"と表示されたダイアログでご自身の携帯電話番号を入力します。SMSに送られてきた6桁のコードを入力して”続ける”を押します。"この番号を安全な場所に保管しました"をチェックして”続ける”を押します。
**<font color="DarkOrange">この記事ではコードは保管せずに進めています。実運用ではリカバリーコードは重要なコードになるため安全な場所に保管して下さい。</font>**


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

Applicationにログインできたら成功です。

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

**<font color="DarkOrange">この記事では"Always require Multi-factor Authentication"をオンにして常に多要素認証がかかるようにしていますが、先のステップで試したRulesを作成して特定の条件下(例/特定の時間帯、機密性の高い情報へのアクセスが発生したタイミング)で多要素認証がかかるようにすることが可能です。</font>**


## APIの登録〜API Protectionの概要
Ctr-Cで起動したApplicationを停止して"Always require Multi-factor Authentication"フリップスイッチをオフにします。左ペインの"APIs"をクリック、右上の"CREATE API"を押します。

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

"Name", "Identifier"に任意の値を入力して”CREATE”を押します。
**<font color="DarkOrange">"Identifier"は実在するURLである必要はありません。識別し易いIDを入力して下さい。</font>**

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

"Settings"タブをクリック、画面中頃の"Enable RBAC", "Add Permissions in the Access Token"フリップスイッチをオンにして画面下の"SAVE"を押します。
**<font color="DarkOrange">後続のステップで設定するPermissionをaccess_tokenの中に含めて認可情報を制御することが可能になります。</font>**

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

"Permissions"タブをクリック、"read:appointments", "update:appointments"を各々入力して"ADD"を押します。
**<font color="DarkOrange">Permissionの書式はOAuth2.0で定義されているxxxx:xxxxである必要があります。</font>**

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

左ペインの"Roles"をクリック、"CREATE ROLE"を押します。

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

"Name"に"Appointments Submitter", "Description"に任意の説明を入力して"CREATE"を押します。

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

"Permissions"タブをクリックして"ADD PERMISSIONS"を押します。

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

作成したAPIを選択して全てのPermissonを選択、"ADD PERMISSIONS"を押します。

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

"Users"タブをクリックして"ADD USERS"を押します。

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

任意のユーザを選択して"ASSIGN"を押します。
**<font color="DarkOrange">アサインされたユーザでApplicationにログインしたタイミングでこのAPIのスコープにアクセスすることが許可された認可情報がaccess_tokenに追加されます。</font>**

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

ターミナルでauth0-react-samples/02-Calling-an-API/srcに移動します。

```console
$ cd auth0-react-samples/02-Calling-an-API/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"、"audience"は"APIs"から確認できます。</font>**

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

Node.jsのパッケージをインストールしてApplicationを起動します。

```console
$ pwd
~/auth0-react-samples/02-Calling-an-API
$ npm install
$ npm run dev
```

Chromeで`http://localhost:3000`にアクセスしてRoleにアサインしたユーザでログインします。"External API"タブをクリック、"Ping API"ボタンを押します。

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

Chromeのデベロッパーツールを開いて"Network"->"External"をクリック、"Request Headers"の"ey..."をコピーします。
**<font color="DarkOrange">これがaccess_tokenです。</font>**

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

`https://jwt.io/`にアクセスして”Encoded”の下にコピーしたaccess_tokenをペーストします。”Decoded”の"PAYLOAD"にRoleに割り当てたPermissionが表示されていれば成功です。

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


# 次のステップ
最後までお付き合い頂きありがとうございます。この記事はAuth0を初めて触る方に短時間でAuth0をご習得頂くことを目的とした入り口のため、物足りないとお感じになる方もいらっしゃるかと思います。次のステップとして、Auth0のContent Engineering Teamが投稿している[技術ブログ](https://auth0.com/blog/developers/)をお試し頂くことをお勧めします。様々な言語やフレームワーク、実際の現場で起こりうる認証・認可のシナリオに沿ったテーマを準備しています。