Auth0 を使ってユーザログインを実装する

この記事は 弁護士ドットコム [Advent Calendar 2019](https://qiita.com/advent-calendar/2019/bengo4com) 20日目の記事です。

<img width="508" alt="スクリーンショット 2019-12-16 20.13.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/218a8f63-755d-c050-3a9e-419edac43b2b.png">

# はじめに
簡単に認証認可基盤が作れるAuth0を触ってみました。今回は、Auth0で提供しているサンプルコードで簡単なアプリを作ってみます。

# Auth0とは
> Auth0はWeb、モバイル、およびレガシーアプリケーション向けのユニバーサル認証・認可プラットフォームを提供します

https://auth0.com/jp/

# Auth0に登録
https://auth0.com/signup

![スクリーンショット 2019-12-16 19.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/c7a7f2d1-7067-fe5e-0fc3-912980f32579.png)

Googleアカウントを利用してAuth0のアカウントを作ります

テナントの登録と連絡先を入力すると登録完了です

## ダッシュボード画面
![スクリーンショット 2019-12-16 19.21.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/f27d3ea5-dfd1-32b5-370b-71ef45bc6c46.png)

## アプリケーション画面
![スクリーンショット 2019-12-16 19.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/3b419790-15e4-779c-bc6a-406d86284b76.png)

Default Appがあるので、今回はこれを利用します

# クライアント側の設定

## Applicationの設定画面
![スクリーンショット 2019-12-16 19.23.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/7f73b2df-d091-26f0-8e05-23fa509dfd82.png)

### Quick Start を見てみます
![スクリーンショット 2019-12-16 19.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/08a1171d-4a7f-0a9a-369a-37c21bdc1fe1.png)

今回は、「Regular Web　App」->「PHP」と選択したサンプルコードを利用します

 <img width="1145" alt="スクリーンショット 2019-12-16 19.28.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/33c3e60c-0348-0caa-2311-7a190b8feb5e.png">

### 必要な情報を取得します
- Domain
- Client ID
- Client Secret

を、メモします

### CallbackUriを登録します
<img width="589" alt="スクリーンショット 2019-12-16 19.42.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/38e454d5-b1b1-9605-75f7-e7dc9963ca71.png">

サンプルコードのコールバックを、`http://localhost:3000` 登録します

### Logout URLを登録します
<img width="619" alt="スクリーンショット 2019-12-16 19.48.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/3bd496ae-b3e8-45d4-fd6e-f6cce133bad9.png">

サンプルコードの場合は、`http://localhost:3000` を登録します

# PHPサンプルコード
サンプルコード https://github.com/auth0-samples/auth0-php-web-app/tree/master/00-Starter-Seed
を展開します

## `.env` ファイルの内容を修正します

```
AUTH0_CLIENT_ID=
AUTH0_DOMAIN=
AUTH0_CLIENT_SECRET=
AUTH0_CALLBACK_URL=
AUTH0_AUDIENCE=
```

上記で、メモした情報を入れます

## Dockerを使用する場合は、DockerFileがあるのでImageを作って実行します

```
$docker build -t auth0:sample .
$docker run -it -p 3000:3000 --rm --env-file=./.env auth0:sample
```

## Dockerを使わない場合は、PHPビルトインサーバーを利用します

```
$composer install
$php -S localhost:3000
```

## localhost:3000 にアクセスします
<img width="1222" alt="スクリーンショット 2019-12-16 20.12.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/4479701a-2bc0-59d3-986a-f65b7005b935.png">

## ログインします
<img width="508" alt="スクリーンショット 2019-12-16 20.13.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/cfb0b0bc-f2e6-43b8-1e15-76f32c21d841.png">

Googleの認証ボタンと、メールアドレス＋パスワードの認証が求められました
まだ、メールアドレス＋パスワードの登録はしていないので、Googleで認証します

<img width="491" alt="スクリーンショット 2019-12-16 20.15.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/c69e3956-0904-c00b-9886-c67e9179346e.png">

認証が通りました
許可します

![スクリーンショット 2019-12-16 20.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/8c34a895-9f86-1491-17e3-f28f6bbaf456.png)

localhost:3000に戻ってきました
ちゃんと、ユーザの情報が取得されてますね

# Auth0のダッシュボードも登録されたユーザがあります
<img width="1100" alt="スクリーンショット 2019-12-16 20.32.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15095/5f241a83-c399-4156-3a5c-785bea15acb8.png">

# まとめ
Auth0 で、簡単に認証認可のサービスを作ることができました。また、Auth0の管理画面でユーザ情報が見れて、管理画面を作らなくてもいいのも嬉しいですね。まだ他にもAuth0には色々な機能があるので試していきたいと思います。（2要素認証とかRole管理など）