Zenn
Open6

Nextjs x GolangによるGoogle ログイン

Next.js
React
Golang
#
echo
dak2dak2

手段の検討

GoogleLogin

この方法でログインボタンをクリックすると、下記のようなJSONを返す

{
  "client_id": "client_id",
  "credential": "id_token",
  "select_by": "btn"
}

id_tokenをデコードすると、下記情報が取得できる
(デコードはこちらを利用 https://www.npmjs.com/package/jwt-decode)

{
  "iss": "https://accounts.google.com",
  "nbf": xxxxx,
  "aud": "xxxxxxxxxxxxxxxxxxxx",
  "sub": "xxxxxxxxxxxxxxxxxx",
  "email": "xxxxxxxxxxxxxxxx@gmail.com",
  "email_verified": true,
  "azp": "xxxxxxxxxxxxxxxxxxx",
  "name": "your_name",
  "picture": "xxxxxxxxxxxxxxxx",
  "given_name": "your",
  "family_name": "name",
  "iat": 1652687626,
  "exp": 1652691226,
  "jti": "xxxxxxxxxxx"
}

id_tokenをバックエンドに送る時に傍受されてデコードされたら危ないので却下

useGoogleLogin (implicit flow)

この方法でログインボタンをクリックすると、下記のようなJSOnを返す

{
  "access_token": "********************",
  "token_type": "Bearer",
  "expires_in": 1234,
  "scope": "email ....",
  "authuser": "0",
  "prompt": "none"
}

https://github.com/MomenSherif/react-oauth/issues/91#issuecomment-1256939688 によると、https://www.googleapis.com/oauth2/v3/userinfo にリクエストを送るための access_token とのこと

このAPIはBearer認証など必要なく、https://www.googleapis.com/oauth2/v3/userinfo?access_token=***** でユーザー情報が取得できるため、access_tokenをバックエンドに送る時に傍受されたら危ないので却下

useGoogleLogin (authorization code flow)

この方法でログインボタンをクリックすると、下記のようなJSONを返す

バックエンド側でこのコードとclient_idなどを利用してgoogle apiにリクエストを送った上で、access_tokenやid_tokenを取得して、ユーザー情報を得る

こちらが最も安全なのでこちらを採用