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 同意画面 > アプリ登録の編集」画面から、「承認済みドメイン」に独自ドメインを追加した。
以上!