Edited at

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

More than 1 year has passed since last update.


Googleアカウントのログイン情報の取得

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


下準備 Dialogflow(旧API.AI)

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

Screen Shot 0029-10-16 at 22.52.17.png


Oauth認証の準備

GCP Consoleに移動します。Google assistantでも使用している同じプロジェクトIDを選択します。APIとサービスというメニューを開きます。

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

Screen Shot 0029-10-16 at 22.58.38.png

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

Screen Shot 0029-10-16 at 23.02.22.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認証を試すだけなので、深く考えずササッと入力しちゃいましょう。

Screen Shot 0029-10-16 at 23.10.14.png


Account linking

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

Screen Shot 0029-10-16 at 23.16.29.png


  • Configure your client (optional)


    • こちらを参考に好きなscopeを入れる



    • URLのスタイルで入れるのは非推奨となりました



Screen Shot 0029-10-16 at 23.20.58.png


  • Testing instructions


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



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


UserIDとAccessTokenの取得

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

Screen Shot 0029-10-16 at 23.25.33.png

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

{

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

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

Screen Shot 0029-10-16 at 23.30.48.png

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

Screen Shot 0029-10-16 at 23.33.05.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": ""
}


備考

アカウントへのアクセス権が付与されているアプリの表示