Auth0のCustom Social Connectionを利用してYahoo! JAPANと接続する

# はじめに

この記事はAuth0の[Custom Social Connection Extension](https://auth0.com/docs/extensions/custom-social-extensions)を利用してYahoo! JAPANとAuth0を接続、Yahoo! IDでSingle Page Web Applicationにログインする手順をまとめています。Yahoo! IDの取得、およびAuth0の無料アカウントの取得とテナントの作成が完了していることが前提となっています。Auth0の無料アカウント取得がまだの方は[こちら](https://qiita.com/furuth/items/8826b66a3ec2b2b14222)の記事を参照の上ご準備をお願いします。

# 検証環境

- **OS** : `macOS Catalina 10.15.1`
- **node** : `10.15.3`
- **npm** : `6.12.0`
- **Git** : `2.23.0`

# 手順

## Yahoo! JAPAN側

Auth0からYahoo! JAPANにOAuth2.0で接続する際に必要となるアプリケーションを作成します。Chromeで[デベロッパーネットワーク](https://e.developer.yahoo.co.jp/dashboard/)にアクセスして"新しいアプリケーションを開発"を押します。

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

"アプリケーションの種類"で"サーバサイド"を選択、"アプリケーション名"に任意の名前を入力、ガイドラインで同意をチェックしてその他は全てデフォルトで画面下の"確認"ボタンを押します。

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

作成したアプリケーションを選択し、"コールバックURL"に "`https://<auth0テナントのドメイン名>/login/callback`" を入力、画面下の"更新"を押します。
**<font color="DarkOrange">Yahoo! JAPAN側でAuth0のコールバックエンドポイントへのアクセスを許可しています</font>**
画面上に記載されている"CLIENT ID"と"シークレットを"控えておきます。
**<font color="DarkOrange">Auth0側の設定で必要になります</font>**

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

## Auth0側

### Custom Extensionの設定

Auth0のダッシュボードにログイン、左ペインの"Extensions"をクリックして左上の"Custom Social Connections"をクリックし"INSTALL"を押します。
<img src="https://i.imgur.com/xnAEXld.png" width=70%>

"Installed Extensions"タブから"Custom Social Connections"をクリック、右上の"NEW CONNECTION"をクリックします。

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

各パラメータを設定して画面下の"SAVE"を押します。

- **Name** : 任意
- **Client ID**  : Yahoo! JAPAN側で作成したアプリケーションのClient ID
- **Client Secret** : Yahoo! JAPAN側で作成したアプリケーションのSecret
- **Authorization URL** : https://auth.login.yahoo.co.jp/yconnect/v2/authorization
- **Token URL** : https://auth.login.yahoo.co.jp/yconnect/v2/token
- **Scope** : openid profile email
- **Custom Headers** : ブランクのまま
- **Fetch User Profile Script** : 以下のコード

```jsx
function(accessToken, ctx, cb) {
  request.get('https://userinfo.yahooapis.jp/yconnect/v2/attribute', {
    headers: {
      'Authorization': 'Bearer ' + accessToken
    }
  }, function(e, r, b) {
    if (e) return cb(e);
    if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));
    var profile = JSON.parse(b);
    cb(null, {
      user_id: profile.uid,
      email: profile.email,
    });
  });
}
```


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

"Apps"タブをクリック、有効にするApplicationのフリップスイッチをオンにして画面したの"SAVE"を押します。

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

### Single Page Web Applicationの登録

左ペインの"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"を押します。

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

### Single Page Web Applicationの配備

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を編集します。**"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。**

```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`"にアクセス、右上の"Login"を押します。

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

"LOG IN WITH <作成したCustom Connectionの名前>を押します。

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

Yahoo! IDでログインします。

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

Done!

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

# おわりに

Auth0は業界標準のプロトコル(例/OAuth2.0, Open ID Connect)に幅広く対応しているため、Yahoo! JAPANをはじめOAuth2.0対応のAuthorizationサービスと簡単に接続することが可能です。ダッシュボードの"Connections"->"Social"に該当のSocial Providerが無い場合はこちらの記事をご参照の上Custom Social Extensionを利用して接続設定をお願いします。