Google assistant でGoogleのアカウントの情報を取得する #dialogflow

#Googleアカウントのログイン情報の取得
Google assistantのアプリケーションを開発していく上で、ユーザー情報を使いたくなる場面が出てくると思います。OAuth 2.0 Implicit Flowという方法を使ってGoogleアカウントの情報を取得することができるので、その手順を紹介したいと思います。

##下準備 Dialogflow(旧API.AI)
Dialogflowで作成している方は左メニューのIntegrationsからGoogle Assistantを選択し、**Sign in required for welcome intent**にチェックを入れてください。この作業によりログインを必須にすることができます。

<img width="786" alt="Screen Shot 0029-10-16 at 22.52.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/3318beae-052c-81c7-3241-4885f04929f4.png">

##Oauth認証の準備
[GCP Console](https://console.developers.google.com/apis/credentials)に移動します。Google assistantでも使用している同じプロジェクトIDを選択します。APIとサービスというメニューを開きます。

**Web client (auto created by Google Service)を選択します。**

<img width="1163" alt="Screen Shot 0029-10-16 at 22.58.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/8871f5be-3244-7467-7602-8d4bf21999ff.png">

**クライアントIDは後ほど使用するので、どこかに保管してください。**

<img width="635" alt="Screen Shot 0029-10-16 at 23.02.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/3d496360-ff0b-455d-65ed-294327a28905.png">

**承認済リダイレクトURIに下記のURIを追加して保存してください**
hogehogeは自分のプロジェクトIDに変えてください。

```
https://oauth-redirect.googleusercontent.com/r/hogehoge
```

##Actions on Google Overviewの編集
Actions on Google OverviewのAccount linkingでOauth認証の設定を行います。Account linkingは最後の項目なので1~4の必須項目を入力する必要があります。Oauth認証を試すだけなので、深く考えずササッと入力しちゃいましょう。

<img width="596" alt="Screen Shot 0029-10-16 at 23.10.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/028c5d3c-d62e-f1d4-2e96-66d46ae6910b.png">

###Account linking
下記を参考に必要な項目を入力します。

- Grant type
    - Implicitを選択
- クライアントID
    - 先ほど保管したクライアントIDを入力
- Authorization URL
    - https://accounts.google.com/o/oauth2/v2/auth

<img width="430" alt="Screen Shot 0029-10-16 at 23.16.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/f674cc58-e7ee-383c-55c3-c02936d0493a.png">

- Configure your client (optional)
    - こちらを参考に好きなscopeを入れる
        - [参考リンク](https://developers.google.com/identity/protocols/googlescopes#google_sign-in)
    - URLのスタイルで入れるのは非推奨となりました

<img width="552" alt="Screen Shot 0029-10-16 at 23.20.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/39bd2eda-89b0-6644-1bdd-a15cc9e70a70.png">

- Testing instructions
    - とりあえず何か入力しておきましょう

全て入力が終えたらSaveしましょう

##UserIDとAccessTokenの取得
いつも通りGoogle Assistantのシミュレーションを行いましょう。するとまだアカウントがリンクがされていないと言われます。

<img width="331" alt="Screen Shot 0029-10-16 at 23.25.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/1263247e-c191-525b-4a44-9ed682be93f9.png">

**この時にシミュレーターの右のメニューからDEBUGタブを選択します。**

```
{
  "sharedDebugInfo": [
    {
      "debugInfo": "",
      "name": "Account Linking Url"
    }
  ]
}
```

debugInfoにあるURLにブラウザでアクセスするとこのような見覚えのあるページに飛ぶので、ログインをしましょう。

<img width="200" alt="Screen Shot 0029-10-16 at 23.30.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/432c832a-1c33-a31c-41d4-294f19a56b41.png">

ログインが終わったらもう一度シミュレーションに戻りアプリを呼び出します。すると今度は普通に会話がスタートしました。

<img width="336" alt="Screen Shot 0029-10-16 at 23.33.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/13ab1532-5235-ec75-0995-fa5aa7a0e491.png">

**またDEBUGタブを選択します**

userIdとaccessTokenが取ることが出来ました＼(^o^)／

```
"user": {
  "userId": "",
  "accessToken": "",
  "locale": "en-US"
}
```

##詳細情報の取得
ブラウザで以下のURLにアクセスすると詳細を取得することが出来ます。
※hogehogeは取得したaccessTokenに置き換えます。

```
https://www.googleapis.com/oauth2/v1/userinfo?access_token=hogehoge
```

レスポンス例

```
{
 "id": "",
 "email": "",
 "verified_email": true,
 "name": "",
 "given_name": "",
 "family_name": "",
 "link": "",
 "picture": "",
 "gender": ""
}
```

##備考
[アカウントへのアクセス権が付与されているアプリの表示](https://myaccount.google.com/permissions)