DrupalのAuth0モジュールを使ってソーシャルログインを有効にする

Drupalアプリケーションでソーシャルログインを有効にする方法。

## 設定方法

1. Drupalアプリケーションの起動

Composer経由でDrupalをインストール。

```
$ composer create-project drupal/recommended-project drupal-and-auth0
```

Composer経由で[Auth0モジュール](https://www.drupal.org/project/auth0)を追加する。

```
$ cd drupal-and-auth0
$ composer require drupal/auth0
```

Drupalアプリケーションを起動。

```
$ cd web
$ php -S localhost:5656

PHP 7.1.23 Development Server started at Thu Feb 13 02:25:02 2020
Listening on http://localhost:5656
Document root is /Users/hikaru.maruyama/src/github.com/hmaruyama/drupal-and-auth0/web
Press Ctrl-C to quit.
```

http://localhost:5656 にアクセスし、Drupalの初期設定を行う。

<img width="900" alt="スクリーンショット 2020-02-13 午前2.40.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/a24cecc2-c394-eb12-68c2-d215800be535.png">

- Choose language : 日本語
- プロフィールの選択 : 標準
- 必要条件の検証 : とりあえず進む
- データベースのセットアップ: 任意のデータベースタイプを選択
- サイトの環境設定 : 必須項目を埋める

<img width="1048" alt="スクリーンショット 2020-02-13 午前2.45.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/f7dee423-6538-341a-584b-87a8c2443233.png">

2. Auth0モジュールの有効化

メニューから 拡張機能 をクリック。

モジュールのリストから Auth0 を探し、横のチェックボックスにチェックを入れて インストール をクリックして有効化する。

<img width="1145" alt="スクリーンショット 2020-02-13 午前2.47.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/5bb906ca-5abf-3983-6aa9-63e0d82e3b68.png">

3. Auth0の管理画面での設定

Auth0のアカウントを取得し、 https://manage.auth0.com にアクセス。
左メニューの Applications をクリックして、 + CREATE APPLICATION をクリック。

Regular Web Applications を選択し、アプリケーションを作成。

Settings タブをクリックし、以下の項目を設定。

- `Allowed Callback URLs` : http://localhost:5656/auth0/callback
- `Allowed Web Origins` : http://localhost:5656
- `Allowed Logout URLs` : http://localhost:5656
- `Allowed Origins (CORS)` : http://localhost:5656

最後に SAVE CHANGES をクリックして保存。

4. Drupal側のAuth0の設定

Drupalアプリケーション( http://localhost:5656 )に戻り、メニューから 環境設定 をクリック。

システム の項目の中にある Auth0 をクリックし、以下の項目を設定。

- ドメイン : Auth0のアプリケーションの Settings 内の `Domain` の値
- Client ID : Auth0のアプリケーションの Settings 内の `Client ID` の値
- Client Secret : Auth0のアプリケーションの Settings 内の `Client Secret` の値

最後に 保存 をクリック。

5. ログアウト後のリダイレクト設定

https://manage.auth0.com/#/tenant/advanced にアクセスし、以下の項目を設定。

- `Allowed Logout URLs` : http://localhost:5656

最後に SAVE をクリック。これで全ての設定完了。

## 試してみるその1 サインアップしてみる

シークレットウィンドウ等で http://localhost:5656/user にアクセス。

<img width="841" alt="スクリーンショット 2020-02-13 午前3.06.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/ac690c0c-2161-d44c-62b9-7500ab530fb1.png">

Sign Up をクリックし、Drupalの初期ユーザーで設定していないメールアドレスを使用して新規でアカウントを作成する。

<img width="749" alt="スクリーンショット 2020-02-13 午前3.09.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/bc558087-7b44-96c8-b360-a888010f054a.png">

登録したメールアドレス宛に以下の検証メールが届いたら

<img width="670" alt="スクリーンショット 2020-02-13 午前3.11.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/bfaa2c38-771b-3dff-14b2-4964c250970a.png">

VELIFY YOUR ACCOUNT をクリックして

<img width="573" alt="スクリーンショット 2020-02-13 午前3.12.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/a6b8a1fc-6ae4-449c-ec76-0be4a20ccef0.png">

http://localhost:5656/user に再度アクセスし、メールアドレス、パスワードでログイン。

<img width="1019" alt="スクリーンショット 2020-02-13 午前3.13.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/92e02aaa-c62d-f63a-3eb9-db87869337ca.png">

Drupalアプリケーションに無事ログインできた。

ユーザー情報はAuth0の管理画面より確認が可能。
<img width="1127" alt="スクリーンショット 2020-02-13 午前3.15.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/7960068d-35e4-6e0d-b486-ce44aee96223.png">

 ## 試してみるその2 ログアウト

Drupalアプリケーションでログインした状態から、ログアウト( http://localhost:5656/user/logout )にアクセス。

トップページに遷移したら成功。

<img width="1191" alt="スクリーンショット 2020-02-13 午前3.17.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/20f2a448-771d-6782-b02f-a4cf8d590700.png">

## 確認その3 Drupalアプリケーションに登録済みのアカウントでログイン

Drupalアプリケーションの初期設定時に登録したアカウントでログインする場合、Auth0側にもアカウントを追加する必要がある。

Auth0管理画面 メニューの Users & Roles の Users をクリック。

CREATE USER をクリック。

Drupalアプリケーションに登録済みアカウントに紐づいているメールアドレスを入力し、パスワードを新たに設定して保存。

<img width="688" alt="スクリーンショット 2020-02-13 午前3.20.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/e9ac1738-a93a-5d02-24fd-c16b7032b2a1.png">

http://localhost:5656/user から先ほど設定したメールアドレスとパスワードでログイン。

<img width="1275" alt="スクリーンショット 2020-02-13 午前3.27.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/b1fdd923-9fda-217a-e131-7c8182d1d723.png">

既存のDrupalアカウントと紐づいていたら成功。