FirebaseのSDKで設定ミスしたときのエラー
Firebase Authenticationでログイン機能を実装しようとして失敗したときのメモ。
FirebaseSDKのsignInWithPopup()を利用したところ、
コンソールに下記エラーを吐き出し、真っ白なままポップアップが閉じてしまいました。
Refused to display 'https://console.firebase.google.com/u/0/project/[PROJECT_NAME]/database/data/__/auth/iframe#id=I1_1234567891234&_gfid=I1_1234567891234&parent=https%3A%2F%2F[DOMAIN]&pfname=&rpctoken=12345678' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
結論から言うと、原因は初期設定値のミスでした。
↓間違ってた設定↓
firebase.initializeApp({ apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX', authDomain: '[APP_NAME].firebaseio.com', projectId: '[APP_NAME]' })
↓正しい設定↓
firebase.initializeApp({ apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX', authDomain: '[APP_NAME].firebaseapp.com', projectId: '[APP_NAME]' })
firebaseio.com
はRealtime Databaseの利用時に使われる設定です。
(というかエラーのURLちゃんと見ると、思いっきりDatabaseって書いてます
firebase.google.com
そんなものがiframeで使えるわけもなく、
X-Frame-Optionsのエラーが出ているんだと思います。
ちなみにコード上での設定内容は、Firebase側のconsoleでこんな感じに生成できちゃいます。
これをコピペするのが吉ですね。
今回はfirebase側のdomain許可設定が間違ってると思い、
めちゃくちゃ時間使っちゃいました。初期設定には気をつけましょう。