FirebaseのツイッターAuthでのリダイレクト後の処理

Firebaseのドキュメントを見ながらこんなに簡単にOAuthやってくれるならと思いやってみました。
解決できない問題について教えていただきたくお願いいたします。

やったこと

プロジェクトをfirebaseで初期化（Hostingのみ選択）
ホスティング用のデフォルトの構成がプロジェクトフォルダ内にできる
処理部分を追加するためにmain.jsをindex.htmlに加え以下のようになった

index.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Welcome to Firebase Hosting</title>
7    <link rel="stylesheet" href="../style.css">
8    <script defer src="/__/firebase/5.8.3/firebase-app.js"></script>
9    <script defer src="/__/firebase/5.8.3/firebase-auth.js"></script>
10    <script defer src="/__/firebase/init.js"></script>
11    <script src="./jquery.min.js"></script>
12  </head>
13  <body>
14    <h4>アクセストークン</h4>
15    <div>TOKEN:</div> <div class="token"></div>
16    <div>SECERET:</div><div class="secret"></div>
17    <script src="./main.js"></script>
18  </body>
19</html>

main.js

JavaScript
1  document.addEventListener('DOMContentLoaded', function() {
2    const provider = new firebase.auth.TwitterAuthProvider();
3    let loggedInnUser;
4    console.log('current user'+loggedInnUser);
5    firebase.auth().onAuthStateChanged(function(user) {
6      if (user) {
7        loggedInnUser = user;
8      } else {
9        console.log('no loginn user');
10      }
11    });
12    if(!loggedInnUser){
13      // firebase.auth().signInWithRedirect(provider)
14      firebase.auth().signInWithPopup(provider).then(function(result) {
15        var token = result.credential.accessToken;
16        var secret = result.credential.secret;
17        loggedInnUser = result.user;
18        $('.token').text(token);
19        $('.secret').text(secret);
20      }).catch(function(error) {
21        var errorCode = error.code;
22        var errorMessage = error.message;
23        var email = error.email;
24        var credential = error.credential;
25      });
26    }
27  });

アプリ設置先（TWT認証はポップアップ方式）

困っていること

上記のようにOAuthの認証をポップアップでやると問題なく
意図したとおりの動きになるのですが
ポップアップの方式はスマホでは推奨されていないらしく（ドキュメント内より）
リダイレクトの方式に変えてみました（上記のコメントアウトしている部分です）
するとツイッターでの認証が終わって帰ってきてもonAuthStateChangedのハンドラが呼ばれないので
ログインユーザーがnullのままで認証と戻りの無限ループに陥ります。

解決のためにやってみたこと

ドキュメントにあるようにリダイレクト後の処理はこちら・・・みたいな部分を
追加したのですが、やはりハンドラが呼ばれないのです

JavaScript
1    firebase.auth().getRedirectResult().then(function(result) {
2      loggedInnUser = result.user;
3    }).catch(function(error) {
4      // ...
5    });

ひょっとしてsignInWithRedirectから直接、処理を書かないといけないのかと思い
以下のようにしましたが反応はなく、どうやらthenableではないような感じです

JavaScript
1firebase.auth().signInWithRedirect(provider).then((res) => {
2     loggedInnUser = res.user;
3})

また、ひょっとして戻り値になにかあるのかと思い、見てみましたが
私には意味不明なオブジェクトが返ってきてるだけでした

JavaScript
1let res = firebase.auth().signInWithRedirect(provider);
2console.log(res);

質問

signInWithRedirectを使って、認証後に得たアクセストークンを使ったアプリを作っていくために
この部分をどう変更すればいいでしょうか？

環境

OS: Mojave
NodeJS： 10.6.0
npm: 6.3.0
firebase: 6.3.1
GoogleChrome: 72
FireFox: 65.0.1

行動規範の内容に同意します

回答2件

こちらはReactですが同じところで詰まりました。xenbeatさんの回答をみて後から来る人のために私の理解を残しておくと

signInWithRedirectを使うと当然画面がリロードされるので、先に読んで（内部的にはリッスン？して）おいたonAuthSatateChangedが解除されますよね。認証後に戻ってきた画面で再度onAuthStateChangedが呼ばれリッスンが開始するものの、その処理が終わる前にif文の中に入っちゃってsignInWithRedirectが呼ばれループしてるっぽいです。

質問者さんのようにOAuthトークンを使いたい場合はgetRedirectResultの処理が終わった後にonAuthStateChangedがトリガーされるので、こういう実装ということですよね。

認証後に戻ってくる画面で以下2つを呼ぶ

getRedirectResult()
onAuthStateChanged()

ボタンクリックしたときだけsignInWithRedirectが呼ばれるようにする

<button onClick="login()">ログイン</button>
<script>
function login() {
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithRedirect(provider);
}
</script>

Firebase公式ドキュメントが、そのまま同じファイル上にscriptを書くのではなく、ボタンクリックなど状況に応じて使い方は変わるから基礎部分のコードしか書いてくれてないからJSに慣れてないと辛いよねって話かなと思います。

投稿2021/08/13 04:43

maztak

総合スコア61

参考にされている公式ドキュメントに書いてあるじゃないですか。

ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。

Javascript
1firebase.auth().signInWithRedirect(provider);

次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、Twitter プロバイダの OAuth トークンを取得することもできます。

Javascript
1firebase.auth().getRedirectResult().then(function(result) {
2  if (result.credential) {
3    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
4    // You can use these server side with your app's credentials to access the Twitter API.
5    var token = result.credential.accessToken;
6    var secret = result.credential.secret;
7    // ...
8  }
9  // The signed-in user info.
10  var user = result.user;
11}).catch(function(error) {
12  // Handle Errors here.
13  var errorCode = error.code;
14  var errorMessage = error.message;
15  // The email of the user's account used.
16  var email = error.email;
17  // The firebase.auth.AuthCredential type that was used.
18  var credential = error.credential;
19  // ...
20});

投稿2019/02/20 08:18

xenbeat

総合スコア4258

Fujiman

2019/02/20 08:29

すみません、それもやってみた一つで、記載するのを忘れてました。リダイレクト方式だとこのハンドラ部分がスルーされてしまうのです・・・

xenbeat

2019/02/20 08:37 編集

> それもやってみた一つで、記載するのを忘れてました本文へ追記願います。 > リダイレクト方式だとこのハンドラ部分がスルーされてしまう onAuthStateChangedは「getRedirectResult が解決された後にトリガー」されます。 https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_user

Fujiman

2019/02/21 02:00 編集

ありがとうございます。現在、設定を無限ループしてしまう以下のようにしています。ツイッターのIDとパスを入力し戻ってくるところまではいいのですが以下の２つのイベントハンドラはいずれも無視されてしまい再度、リダイレクトに向かってしまいます。何か記述内容、場所等、間違いがあるのでしょうか？ document.addEventListener('DOMContentLoaded', function() { const provider = new firebase.auth.TwitterAuthProvider(); let loggedInnUser; firebase.auth().getRedirectResult().then(function(result) { loggedInnUser = result.user; }).catch(function(error) { console.log('failure in Redirect'); }); firebase.auth().onAuthStateChanged(function(user) { if (user) { loggedInnUser = user; } else { console.log('no loginn user'); } }); if(!loggedInnUser){ let res =firebase.auth().signInWithRedirect(provider) } });

xenbeat

2019/02/21 10:29 編集

> ２つのイベントハンドラはいずれも無視されてしまい再度、リダイレクトに向かってしまいます。 > 何か記述内容、場所等、間違いがあるのでしょうか？手元に同様の環境を用意できない状況なのでエスパー回答になりますが「signInWithRedirect」を「DOMContentLoaded」の中で実行していることが原因かと思います。通常なら「signInWithRedirect」はボタンのクリックイベント等で（Sign inのようなボタンがクリックされた時に）呼び出すと思います。なので、とりあえず適当なボタンを作って、そのボタンのクリックイベントで次のような処理（signInWithRedirect）が実行されるようにしてみてください。 ``` function hoge() { var provider = new firebase.auth.TwitterAuthProvider(); firebase.auth().signInWithRedirect(provider); } ``` そうすると「DOMContentLoaded」で「getRedirectResult」が解決され、「onAuthStateChanged」がトリガーされるのではないかと思います。

行動規範の内容に同意します

あなたの回答