開発環境 Google OAuth Error: redirect_uri_mismatchでハマる

アプリでGoogle APIを使うため、Google認証まわりの開発中にハマったのでメモ

結論としては、↓を参考にredirect_uriにpathを含めないようにしたら動いた

流れしては以下のコードモデルを採用し、フロントのNuxt側で認証し、codeを取得、サーバー側に保存。そのコードを元にaccess_tokenを取得して、フロント側でGoogle CalendarのAPIを叩こうとしていた。

サーバー側(Node.jsでNestJS)では、Oauthのライブラリに '@googleapis/oauth2'を使用。

import { auth } from '@googleapis/oauth2'

以下のようにクライアントを生成していた。

const client = new auth.OAuth2(clientId, clientSecret, redirectUri)

redirectUriには、Google Cloud Consoleの承認済みのリダイレクト URIに入れていたものを指定していた。（以下の例だとhttp://localhost:3001/callback）

その後、フロント側から送ったcodeを使ってgetTokenを叩くと

const res = await client.getToken(code)

以下のエラーが返ってきていた。どこかの設定ミスかと思い何度も確認、変更、クライアントID再発行したりしたものの変わらず。

Error: redirect_uri_mismatch

以下の記事を参考に、redirectUriから、path部分を削除し、

http://localhost:3001

いろんなところにredirectUriは設定とアプリ側で完全一致していないとだめ、という記載があるため、ここを変える発想が出てこなかったのも原因。

開発環境localhostのみの問題かもしれないけどメモ。

GAミント至上主義