\r\n \r\n \r\n \r\n \r\n \r\n

アクセストークン

\r\n
TOKEN:
\r\n
SECERET:
\r\n \r\n \r\n\r\n```\r\nmain.js\r\n```JavaScript\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const provider = new firebase.auth.TwitterAuthProvider();\r\n let loggedInnUser;\r\n console.log('current user'+loggedInnUser);\r\n firebase.auth().onAuthStateChanged(function(user) {\r\n if (user) {\r\n loggedInnUser = user;\r\n } else {\r\n console.log('no loginn user');\r\n }\r\n });\r\n if(!loggedInnUser){\r\n // firebase.auth().signInWithRedirect(provider)\r\n firebase.auth().signInWithPopup(provider).then(function(result) {\r\n var token = result.credential.accessToken;\r\n var secret = result.credential.secret;\r\n loggedInnUser = result.user;\r\n $('.token').text(token);\r\n $('.secret').text(secret);\r\n }).catch(function(error) {\r\n var errorCode = error.code;\r\n var errorMessage = error.message;\r\n var email = error.email;\r\n var credential = error.credential;\r\n });\r\n }\r\n });\r\n```\r\n\r\n[アプリ設置先](https://gcmproject-141802.firebaseapp.com/)(TWT認証はポップアップ方式)\r\n\r\n## 困っていること\r\n上記のようにOAuthの認証をポップアップでやると問題なく\r\n意図したとおりの動きになるのですが\r\nポップアップの方式はスマホでは推奨されていないらしく(ドキュメント内より)\r\nリダイレクトの方式に変えてみました(上記のコメントアウトしている部分です)\r\nするとツイッターでの認証が終わって帰ってきてもonAuthStateChangedのハンドラが呼ばれないので\r\nログインユーザーがnullのままで認証と戻りの無限ループに陥ります。\r\n\r\n## 解決のためにやってみたこと\r\nドキュメントにあるようにリダイレクト後の処理はこちら・・・みたいな部分を\r\n追加したのですが、やはりハンドラが呼ばれないのです\r\n```JavaScript\r\n firebase.auth().getRedirectResult().then(function(result) {\r\n loggedInnUser = result.user;\r\n }).catch(function(error) {\r\n // ...\r\n });\r\n```\r\nひょっとしてsignInWithRedirectから直接、処理を書かないといけないのかと思い\r\n以下のようにしましたが反応はなく、どうやらthenableではないような感じです\r\n```JavaScript\r\nfirebase.auth().signInWithRedirect(provider).then((res) => {\r\n loggedInnUser = res.user;\r\n})\r\n```\r\n\r\nまた、ひょっとして戻り値になにかあるのかと思い、見てみましたが\r\n私には意味不明なオブジェクトが返ってきてるだけでした\r\n```JavaScript\r\nlet res = firebase.auth().signInWithRedirect(provider);\r\nconsole.log(res);\r\n```\r\n## 質問\r\nsignInWithRedirectを使って、認証後に得たアクセストークンを使ったアプリを作っていくために\r\nこの部分をどう変更すればいいでしょうか?\r\n\r\n## 環境\r\nOS: Mojave\r\nNodeJS: 10.6.0\r\nnpm: 6.3.0\r\nfirebase: 6.3.1\r\nGoogleChrome: 72\r\nFireFox: 65.0.1","answerCount":2,"upvoteCount":0,"datePublished":"2019-02-20T07:38:54.582Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"こちらはReactですが同じところで詰まりました。xenbeatさんの回答をみて後から来る人のために私の理解を残しておくと\r\n\r\n`signInWithRedirect`を使うと当然画面がリロードされるので、先に読んで(内部的にはリッスン?して)おいた`onAuthSatateChanged`が解除されますよね。認証後に戻ってきた画面で再度`onAuthStateChanged`が呼ばれリッスンが開始するものの、その処理が終わる前にif文の中に入っちゃって`signInWithRedirect`が呼ばれループしてるっぽいです。\r\n\r\n質問者さんのようにOAuthトークンを使いたい場合は`getRedirectResult`の処理が終わった後に`onAuthStateChanged`がトリガーされるので、こういう実装ということですよね。\r\n\r\n1. 認証後に戻ってくる画面で以下2つを呼ぶ\r\n- getRedirectResult()\r\n- onAuthStateChanged()\r\n\r\n2. ボタンクリックしたときだけ`signInWithRedirect`が呼ばれるようにする\r\n\r\n```\r\n\r\n\r\n```\r\n\r\nFirebase公式ドキュメントが、そのまま同じファイル上にscriptを書くのではなく、ボタンクリックなど状況に応じて使い方は変わるから基礎部分のコードしか書いてくれてないからJSに慣れてないと辛いよねって話かなと思います。","dateModified":"2021-08-13T04:43:23.300Z","datePublished":"2021-08-13T04:43:23.300Z","upvoteCount":0,"url":"https://teratail.com/questions/175462#reply-484259","comment":[]},{"@type":"Answer","text":"参考にされている[公式ドキュメント](https://firebase.google.com/docs/auth/web/twitter-login?hl=ja#handle_the_sign-in_flow_with_the_firebase_sdk)に書いてあるじゃないですか。\r\n\r\n> ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。\r\n``` Javascript\r\nfirebase.auth().signInWithRedirect(provider);\r\n```\r\n\r\n> 次に、**ページが読み込まれたときに getRedirectResult を呼び出すことによって、Twitter プロバイダの OAuth トークンを取得**することもできます。\r\n``` Javascript\r\nfirebase.auth().getRedirectResult().then(function(result) {\r\n if (result.credential) {\r\n // This gives you a the Twitter OAuth 1.0 Access Token and Secret.\r\n // You can use these server side with your app's credentials to access the Twitter API.\r\n var token = result.credential.accessToken;\r\n var secret = result.credential.secret;\r\n // ...\r\n }\r\n // The signed-in user info.\r\n var user = result.user;\r\n}).catch(function(error) {\r\n // Handle Errors here.\r\n var errorCode = error.code;\r\n var errorMessage = error.message;\r\n // The email of the user's account used.\r\n var email = error.email;\r\n // The firebase.auth.AuthCredential type that was used.\r\n var credential = error.credential;\r\n // ...\r\n});\r\n```","dateModified":"2019-02-20T08:18:26.198Z","datePublished":"2019-02-20T08:18:26.198Z","upvoteCount":0,"url":"https://teratail.com/questions/175462#reply-261139","comment":[{"@type":"Comment","text":"すみません、それもやってみた一つで、記載するのを忘れてました。\r\nリダイレクト方式だとこのハンドラ部分がスルーされてしまうのです・・・","datePublished":"2019-02-20T08:29:46.281Z","dateModified":"2019-02-20T08:29:46.281Z"},{"@type":"Comment","text":"> それもやってみた一つで、記載するのを忘れてました\r\n本文へ追記願います。\r\n\r\n> リダイレクト方式だとこのハンドラ部分がスルーされてしまう\r\nonAuthStateChangedは「getRedirectResult が解決された後にトリガー」されます。\r\nhttps://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_user","datePublished":"2019-02-20T08:36:21.631Z","dateModified":"2019-02-20T08:37:19.357Z"},{"@type":"Comment","text":"ありがとうございます。\r\n現在、設定を無限ループしてしまう以下のようにしています。\r\nツイッターのIDとパスを入力し戻ってくるところまではいいのですが\r\n以下の2つのイベントハンドラはいずれも無視されてしまい\r\n再度、リダイレクトに向かってしまいます。\r\n何か記述内容、場所等、間違いがあるのでしょうか?\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const provider = new firebase.auth.TwitterAuthProvider();\r\n let loggedInnUser;\r\n\r\n firebase.auth().getRedirectResult().then(function(result) {\r\n loggedInnUser = result.user;\r\n }).catch(function(error) {\r\n console.log('failure in Redirect');\r\n });\r\n\r\n firebase.auth().onAuthStateChanged(function(user) {\r\n if (user) {\r\n loggedInnUser = user;\r\n } else {\r\n console.log('no loginn user');\r\n }\r\n });\r\n\r\n if(!loggedInnUser){\r\n let res =firebase.auth().signInWithRedirect(provider)\r\n }\r\n });","datePublished":"2019-02-21T01:59:33.172Z","dateModified":"2019-02-21T02:00:01.305Z"},{"@type":"Comment","text":"> 2つのイベントハンドラはいずれも無視されてしまい再度、リダイレクトに向かってしまいます。\r\n> 何か記述内容、場所等、間違いがあるのでしょうか?\r\n\r\n手元に同様の環境を用意できない状況なのでエスパー回答になりますが\r\n「signInWithRedirect」を「DOMContentLoaded」の中で実行していることが原因かと思います。\r\n\r\n通常なら「signInWithRedirect」はボタンのクリックイベント等で(Sign inのようなボタンがクリックされた時に)呼び出すと思います。\r\n\r\nなので、とりあえず適当なボタンを作って、そのボタンのクリックイベントで次のような処理(signInWithRedirect)が実行されるようにしてみてください。\r\n```\r\nfunction hoge() {\r\n var provider = new firebase.auth.TwitterAuthProvider();\r\n firebase.auth().signInWithRedirect(provider);\r\n}\r\n```\r\nそうすると「DOMContentLoaded」で「getRedirectResult」が解決され、「onAuthStateChanged」がトリガーされるのではないかと思います。","datePublished":"2019-02-21T08:05:06.485Z","dateModified":"2019-02-21T10:29:30.400Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/npm","name":"npmに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/175462","name":"FirebaseのツイッターAuthでのリダイレクト後の処理"}}]}}}
質問するログイン新規登録

Q&A

2回答

3841閲覧

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

Fujiman

総合スコア41

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

OAuth

OAuth(Open Authorization)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

0グッド

1クリップ

投稿2019/02/20 07:38

編集2019/02/20 08:28

0

1

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

  1. 認証後に戻ってくる画面で以下2つを呼ぶ
  • getRedirectResult()
  • onAuthStateChanged()
  1. ボタンクリックしたときだけ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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

ログインページにリダイレクトしてログインを行う場合は、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

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

2019/02/21 02:00 編集

ありがとうございます。 現在、設定を無限ループしてしまう以下のようにしています。 ツイッターのIDとパスを入力し戻ってくるところまではいいのですが 以下の2つのイベントハンドラはいずれも無視されてしまい 再度、リダイレクトに向かってしまいます。 何か記述内容、場所等、間違いがあるのでしょうか? 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 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問