こんにちは、なりかくんです。
私が運営しているWebサービスで発生したFirebase Authenticationを使ってモバイル端末でGoogleログインが出来なくなった問題についての、解決方法を記事として書き残しておきます。
同じ問題に遇った方など方などいましたら、ぜひ参考にしていただければ幸いです。
なぜGoogleログインできなくなったのか
まず、なぜFirebase Authenticationでログインできなくなったのか私がわかる範囲で簡単に説明します。
最近Cookieの規制が強くなってきているのが現状でクロスオリジンでのストレージアクセスが出来なくなりました。（まだできるブラウザもいずれ出来なくなると思われます。）
Firebase AuthenticationのGoogleログインは、.firebaseapp.comというドメインにリダイレクトしてログインするのが標準のやり方です。
しかし、この方法では オリジンのサイトからfirebaseのドメインにリダイレクトし、Googleのログイン画面に移動するという処理をしてしまい、クロスオリジンでのストレージアクセスが出来なくなってしまいます。
この問題については、Firebaseのドキュメントにも記載されています。
これが原因により、以来の方法ではGoogleでのログインが出来なくなってしまいます。
プロキシしてリクエストを行うようにする
そこで、オリジンのドメインでfirebaseのドメインにプロキシして、リクエストを行うようにするとこの問題が解決します。
この方法は、Firebaseのドキュメントにも書かれています。
https://firebase.google.com/docs/auth/web/redirect-best-practices?hl=ja#proxy-requests
次にVercelとNuxt3でプロキシする方法を紹介します。
Nuxt3でプロキシする方法
Nuxt３でプロキシを設定する方法として、一番手っ取り早いのはnitroの機能を使う方法です。
nuxt.config.jsonに以下のように追加することでプロキシを追加することができます。
nitro: {
devProxy: {
"/__/auth": {
target: `https://<project>.firebaseapp.com/__/auth`,
changeOrigin: true,
hostRewrite: true,
}
}
}
Vercelでプロキシを追加で設定する
Vercelでデプロイする際には、追加でVercel側でもプロキシを設定しないと動作しませんでした。
プロジェクトのルートディレクトリにvercel.jsonというファイルを作成して、そこにプロキシの設定を追加します。
{
"rewrites" : [
{
"source": "/__/auth/:path*",
"destination": "https://<project>.firebaseapp.com/__/auth/:path*"
}
]
}FirebaseのauthDomainを変える
firebaseのauthDomainを変えておく必要があります。以下のようになっている場合は、
const firebaseConfig = {
apiKey: "",
authDomain: "<project>.firebaseapp.com",
projectId: "",
};以下のようにオリジンのホスト名に変更しておく必要があります。
const firebaseConfig = {
apiKey: "",
authDomain: "オリジンのホスト名",
projectId: "",
};Googleの認証でredirect_uri_mismatchと出る場合
いざFirebase AuthenticationでGoogleログインをしようとしたら、redirect_uri_mismatchとエラーが出た場合は、Google Cloudのページからリダイレクトリンクを追加する必要があります。
- Google Cloudのコンソールにアクセスする。
- 認証情報を開く。
- OAuth 2.0 クライアント IDの対象のクライアントを開く。
- 承認済みの JavaScript 生成元と承認済みのリダイレクト URIを適切に設定する。
これで解決しました。
以上です、参考になれば幸いです。ありがとうございました。
コメント