0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

⚙ Vercelでサンプルアプリ作ってGoogle認証入れようとしたらハマったのでメモ

Posted at

概要

  1. Googleログイン設定する際にOAuth2.0 クライアントの作成を行うと思うが、新しい管理画面ですよーという通知を受けてGoogle API Platform経由に切り替えた
  2. 承認済みドメインの設定で通らずエラーメッセージも出なくてハマりかけた

結論

  • 古いとされる「APIとサービス」のみ承認済みドメインを簡単に登録できる仕様のため、そっちでやり直した方が簡単
    • ただし新しい管理画面(=Google Auth Platform)に切り替えて一週間以内に設定する必要あり
    • あとローカルキャッシュか何かで「APIとサービス」の設定画面が「Auth Platform」の設定画面にさし変わる現象もあったので、設定項目が変わらない場合はブラウザキャッシュをクリアした方がいいかも
  • API Platform経由でやる場合はGoogle Serch Consoleからドメインの承認手順を踏むよう案内されるが、Vercelのデフォルトドメイン(.vercel.app)だとVercel側の仕様上ドメインでの承認は不可能で、URLプレフィックスプロパティなら多分承認できるはず(自分は未検証)

説明

Next.jsの練習をするかということでVercelにてサンプルアプリ(認証アリのCRUDアプリ)を作ろうとしました。Vercelで●●●.vercel.appを貰い、無事デプロイ成功。
そこから、認証が必要ということで今回はFirebase Authenticationを噛まさず、Googleログインを直で導入しようと考え、OAuth2.0クライアントの設定をやろうとしたら、上部に新しい管理画面に移行してくださいという案内が出て切り替えたところ、ドハマりしました。

APIとサービスとGoogle Auth Platfromで設定項目はほとんど同じなのですが、承認済みドメイン絡みのところだけUIが違っていて、別途承認を受けた後に設定しないといけないようになっています。
大昔Google Analytics仕込んだ時にやったなぁと思い出しつつ、Vercelの管理画面からドメイン設定画面見たら……DNSレコード弄れそうな項目が、ない😨

そこで調べ倒して上記結論に至りました。よく見たらAPIとサービスの設定画面には「下で追加するURIのドメインは~」って書いてあって、この機能の有無がポイントなんですよね。

スクリーンショット 2025-01-28 034812.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?