5分ではじめるAuth0アプリ

IDaaSとして有名な認証サービス「[Auth0](!https://auth0.com/jp)」を触ってみました。その過程のメモ書きです。
スムーズに行けば５分くらい(?)でアプリのファーストコールができそうです。

以下、手順です。

* Auth0 のアカウントを作成する
    * ダッシュボードの情報を確認する
* ダッシュボードからApplicationを登録
* サンプルアプリをダウンロード
    * npmコマンドで関連ファイルをダウンロード
    * server.js の configを書き換え
* 起動

前提条件・環境は以下としました。

* node.js + Express でローカル起動
* Macを利用
* Auth0が配布している[サンプルアプリ](!https://github.com/auth0-samples/auth0-express-webapp-sample)を利用

## Auth0のアカウントを作成する

Auth0のトップページにアクセスして「Sign up」をクリックします。
https://auth0.com/jp
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/e936349e-0d24-49ef-6eac-cb440402b4df.png" width="400">

アカウント作成方法を選ぶ。今回はGoogle アカウントを利用しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/ba3f835c-ced0-c684-59c9-3aef66ebdbd6.png" width="400">

アカウント作成後、ダッシュボードに遷移します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/88561c89-fb55-49b9-0cf7-9381187dcdca.png" width="400">

## ダッシュボードからアプリケーションを作成する

ダッシュボード→Applications→Applications→Create Application を選択して、新しいアプリを作成。「Regular Web Applicationsを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/2e436be9-2e5e-f040-546b-f1aeb1a88a10.png" width="400">


作成が完了すると、アプリ一覧に新しいアプリが追加されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/d0dbb77f-8b2a-8034-7f06-c2fda280f74f.png" width="400">

このタイミングで、作成したアプリケーションの詳細画面からSettingsタブを開き、Clinet ID、Domainなどの値を確認します。後ほど設定の際に必要になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/5047643a-2062-aed9-721e-04bad5b2898a.png" width="400">

## サンプルアプリをダウンロードする

Applicationのタブ「Quick Start」からサンプルアプリをダウンロードします。「QuickStart」タブ→「Explore Sample App」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/3fc2204a-deda-496a-e58a-bca760a04448.png" width="400">

「SAVE AND DOWNLOAD APP」をクリックしてダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/66b42ea2-b1a7-d478-bfaa-d957f88ead06.png" width="400">

もしくは、GitHub
https://github.com/auth0-samples/auth0-express-webapp-sample
から、「01-login」をダウンロードします。

ダウンロード後、起動するディレクトリに、展開したサンプルアプリを配置します。こんな感じになるはず。

```bash├── README.md
├── package-lock.json
├── package.json
├── routes
│   └── index.js
├── server.js
└── views
    ├── README.md
    ├── error.ejs
    ├── index.ejs
    ├── package-lock.json
    ├── package.json
    ├── partials
    │   ├── footer.ejs
    │   └── header.ejs
    ├── profile.ejs
    ├── routes
    │   └── index.js
    └── server.js
```


配置が終わったら、以下のコマンドで必要なファイルをダウンロードします。

```javascript
npm install
```

次に、server.js の「const config」を以下のように書き換えます。

```javascript
 const config = {
   authRequired: false,
   auth0Logout: true,
   baseURL: 'http://localhost:3000',
   clientID: 'サンプルアプリのClient IDをコピペ',
   issuerBaseURL: 'サンプルアプリのDomainをhttpsから始まる書式でコピペ',
   secret: 'ランダムな文字列、なんでも良い’'
 };
```

ポイントは「baseURL」「clientID」「issuerBaseURL」の3点。
baseURLは、アプリを起動した際のURL。今回はexpressを利用したローカルアプリとして利用するため、localhostを利用。
cientIDは、先ほどダッシュボードで確認したClient IDの値をそのまま利用します。
issuerBaseURLは、アプリで設定されたDomainの値となります。https:// をつけ、URLの書式で設定する。
設定変更が完了したら、保存。

設定がしたら、

```javascript
npm start
```
と打ち込むことで、サンプルアプリが起動します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/c2661760-e03c-ee59-be85-53c38d98ee62.png" width="400">

「Login」をクリックすると、認証画面が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/1d6b212d-4630-20de-79d1-e291be6f81ee.png" width="400">


以下は、Googleでサインインしたところ。View Profileをクリックすると、Googleから取得したユーザー情報が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/2425bfd8-6fbb-87d4-8c3e-2c5b14d77115.png" width="400">


以上で、サンプルアプリのファーストコールが完了しました。お疲れ様でした！