Firebaseを使ってTwitterログイン機能を作る際、モバイルでは挙動がおかしくなった際の対応

3322 ワード
Vue.js Twitter FirebaseAuth Firebase JavaScript JavaScript テキストリンク

こちらでは正しく挙動しなかったため、現在修正中。
有識者のアドバイスを求めています

問題

firebaseを利用してtwitterログイン機能を作成した際に、PCでは動作するが、モバイルだとログイン画面に遷移しなかった。
その記事がなかったので、改善方法を記しておきます。

公式ドキュメントをよく見ると、

Twitter プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Twitter アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。

との記載が。
つまりsignInWithPopupではなく、signInWithRedirectを利用しないといけないです。

結論

methods: {
    twitterSignIn: function () {
      const auth = getAuth();
      let self = this;
      const provider = new TwitterAuthProvider();
      setPersistence(auth,browserLocalPersistence).then(() => {
        signInWithRedirect(auth, provider).then(() => {

          getRedirectResult(auth)
            .then((result) => {
    
              // The signed-in user info.
              const credential = TwitterAuthProvider.credentialFromResult(result);
              const user = result.user;

ただログイン機能を導入するだけであれば、signInWithRedirectだけでも問題ないですが、ログイン後に、そのアカウントのIDなどを取得したい場合はgetRedirectResultを使いましょう。

参考

発信活動

twitter