LoginSignup
0
1

More than 1 year has passed since last update.

firebaseで独自ドメインでもGoogle Authでログインできるようにする

Last updated at Posted at 2022-07-04

firebaseを使った自作アプリで独自ドメインを使いたい

そんな私が「はじめての自作アプリデプロイ🥺」をしてみた結果、
独自ドメインでgoogle Authによるログインができなくて困ったので
絶対に忘れる未来の自分に向けてメモを残す。

がんばれ!絶対できる!

〜以下、(絶対忘れる)未来の自分へ。〜

発生したおこられ:

エラー 400: redirect_uri_mismatch

このアプリは Google の OAuth 2.0 ポリシーを遵守していないため、ログインできません。

このアプリのデベロッパーの方は、Google Cloud Console でリダイレクト URI を登録してください。

googleログイン認証が本番環境で出来なかった原因は:

deploy後、認証が失敗していたのは、「独自ドメイン」用の設定をしていなかったから。
(認証のソースコード自体には問題はなし。)

対策1)firebaseのコンソールから独自ドメインを「承認済みドメイン」に追加

https://console.firebase.google.com/project/(あなたのプロジェクト名)/authentication/providers
から、「承認済みドメイン」にも『hogehoge.com』(独自ドメイン)を追加した。

対策2)ソースコード内のauthDomainを独自ドメインに変更

main.js 内の config 内の authDomain を変更。

例)
authDomain: "hogehoge.firebaseapp.com",
authDomain: "hogehoge.com", (独自ドメイン)に変更

対策3)google cloud consoleから、リダイレクトURIに独自ドメインを追加

https://console.cloud.google.com/apis/credentials?project=(あなたのプロジェクト名)
から、「認証情報 > OAuth 2.0 クライアント ID」内で、
「Web client (auto created by Google Service)」の
承認済みのリダイレクト URIに『https://hogehoge.com/__/auth/handler』を、追加した。
ついでに「承認済みの JavaScript 生成元」にも独自ドメインを追加した。
また、「0Auth 同意画面 > アプリ登録の編集」画面から、「承認済みドメイン」に独自ドメインを追加した。


以上!

参考:
https://firebase.google.com/docs/auth/web/google-signin

0
1
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
1