web-dev-qa-db-ja.com

Firebase signInWithPopupは、モバイルデバイスの組み込みブラウザを介して使用すると、auth / popup-blockedを提供します

問題：サードパーティのアプリ組み込みブラウザ（LINE、Twitter、Facebookメッセンジャーなど）を介して使用した場合、signInWithPopupreturnsauth/popup-blocked。 Firebaseドキュメントによる説明は次のとおりです。

  • auth/popup-blocked：ポップアップがブラウザによってブロックされた場合、通常はこの操作がクリックハンドラの外部でトリガーされた場合にスローされます。

このエラーをトリガーする一般的なシーケンスは次のとおりです。私のWebアプリのリンクがLINE、Twitter、またはFacebookのメッセンジャーに送信されます。ユーザーがモバイルデバイスを使用し、それらのアプリでそのリンクを開くと、組み込みのブラウザーが開きます。 signInWithPopupを呼び出すと、エラーが返されます。 iOSとAndroid）では動作が少し異なりますが、少なくともiOS/LINEの組み合わせでエラーが発生します。

Angularを使用して、Webアプリを構築しています。エラーメッセージはUnable to establish a connection with the popup. It may have been blocked by the browser.これはfirebase.js-私自身のテキストではありません。

通常のブラウザで使用する場合、サインアップは問題なく機能します。

組み込みのブラウザとsignInWithPopupが一緒に機能しない理由はありますか？

firebasefacebook-messenger
17
Hannu Hytönen

Firebase認証は、ボタンのクリックなど、ユーザーとのやり取りから開始する必要があります。これは私にとって問題を解決しました。

5
Zdeněk Mlčoch

多くのアプリ内埋め込みブラウザはポップアップをブロックします。 Instagramで問題に遭遇しました。 Oauth呼び出しを開始するときは、signInWithRedirectの代わりにsignInWithPopupを使用してみてください。

両方のメソッドの使用法に関するFirebaseのドキュメントはここにあります- https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPopup

3
Tope

signInWithPopup()はブラウザ用ですが、iOSまたはAndriodエミュレータまたはデバイスを実行している場合は、signInWithCredentialを呼び出す必要があります。

signInWithFacebook() {
    if (this.platform.is('cordova')) {
      return this.fb.login(['email', 'public_profile']).then(res => {
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
        return firebase.auth().signInWithCredential(facebookCredential);
      })
    }
    else {
      return this.afAuth.auth
        .signInWithPopup(new firebase.auth.FacebookAuthProvider())
        .then(res => console.log(res));
    }
  }

Ionic + Firebaseを使用している場合は、詳細情報を見つけることができます ここ

2
Nadine Jerome