GoogleでOpenIDConnectでIDトークンを貰う（いわゆる、Sign in with Google） #OAuth

前提

OpenIDConnect の Authorization Code Flow を理解していること。

とりあえず読む

公式ドキュメント
https://developers.google.com/identity/protocols/oauth2/openid-connect

手順

Google API Consoleの設定

クライアントIDとクライアントシークレットを発行する必要がある。

↓へアクセス。
https://console.developers.google.com/

google API Console で OAuth同意画面を設定する。
google API Console で認証情報 > 認証情報を作成 > OAuth 2.0 クライアント ID する。

名前：ウェブ クライアント 1
Javascript生成元: http://localhost
承認済みのリダイレクト URI: https://www.google.com

上記実行でクライアントIDとクライアントシークレットが生成される。

Googleで認証する

authorization_endpoint を使って認証する。（Cognitoで置き換えるとログインエンドポイント）
※Authorization Code Flow なので code を貰うところまで

↓のGETリクエストの該当箇所に埋め込んで（クライアントIDをclient_id）、ブラウザにペースト

※ここではリダイレクト先にGoogleを指定しているが、実戦時には自サイトを指定すること
※見易くするために改行しているがリクエスト投げる時は改行を消すこと

https://accounts.google.com/o/oauth2/v2/auth
?response_type=code
&client_id=Google API Consoleで発行したクライアントID
&scope=openid%20email
&redirect_uri=https://www.google.com
&access_type=offline

ちなみに、scopeにprofileを追加すると、名前（例：鈴木太郎）まで取得できる。名前はIDトークンに含まれる。
※↓が追加される。

{
    "name": "鈴木太郎", "family_name": "鈴木", "given_name": "太郎",
    "picture": "googleで使っているアイコンのURL"
}

認証に成功した場合

https://www.google.com （redirect_uriで指定したURL）へ認証結果のパラメータ付きでリダイレクトされる。

IDトークンの発行

token_endpoint を使ってIDトークンを貰う。（Cognitoで置き換えるとトークンエンドポイント）
※認証時に貰った code をIDトークンと交換する。

実戦時はリダイレクト先が https://www.google.com ではなく、自サイトとなる。
認証成功後にリダイレクトで送られてくるパラメータ（code）を元に、GETリクエストを受けた時の内部処理としてIDトークンを取得する。（後述のPOSTリクエストをサーバ側の処理として実行する）
が、今は、 https://www.google.com に飛ばしているので、IDトークン取得のリクエストは手動でやる。

※IDトークンの発行はPOSTリクエストなのでリクエストが投げれるツールを使うこと

POST https://oauth2.googleapis.com/token http/1.1

↓リクエストボディ
{
    "client_id": "Google API Consoleで発行したクライアントID",
    "client_secret": "Google API Consoleで発行したクライアントシークレット",
    "redirect_uri": "https://www.google.com",
    "grant_type": "authorization_code",
    "code": "GETリクエスト後にリダイレクトされたURLのパラメータとして付与されているcodeの値"
}

成功した場合

↓がレスポンスとして返ってくる。

{
  "access_token": "...",
  "expires_in": 3599,
  "refresh_token": "...",
  "scope": "openid https://www.googleapis.com/auth/userinfo.email",
  "token_type": "Bearer",
  "id_token": "..."
}

ちなみにその後は・・・

IDトークン内の認証情報を自サイトの情報（ID以外の自サイトから新規登録した際に生成される情報）と紐づけしてよろしくやる。

注意

最小限のパラメータで動作するようにしているが、実戦ではセキュリティの問題があるので、公式の例のように、state にトークンを埋め込むこと