質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
Firebase

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

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

1回答

1453閲覧

firebaseのTwitter認証でログインしたユーザーの情報を取得したい

yusuke.y

総合スコア17

Firebase

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

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/05/10 20:56

編集2021/05/10 21:11

ExpressにFirebaseを導入してTwitter認証でログインしたユーザーの情報を使ったアプリケーションを作成しています。

ログイン認証は実装できたのですが、ログインしたユーザーの下記の情報を取得したいです。
・Twitterアカウント名
・TwitterID
・直近のツイート(50くらい)
・フォロワー
・アイコン

firebase.auth().onAuthStateChanged(user => {})でアカウント名が取得できることはわかっているのですが、他の項目についてはどのように取得したら良いでしょうか?
ログインしたユーザーのアクセストークンとリクエストトークンが分かればTwitterAPIを用いて情報が取得できそうなのですが、2つのトークンの取得方法がわかりません。

index.ejs

ejs

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>battle</title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth__ja.js"></script> 8 <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" /> 9 </head> 10 <body> 11 <div class="app-title"> 12 <h1>battle</h1> 13 <p>twitterフォロワーで対戦するアプリ</p> 14 </div> 15 <div class="app-image-container"> 16 <div class="left-arrow"></div> 17 <div class="app-images"></div> 18 <div class="right-arrow"></div> 19 </div> 20 <div class="app-info"> 21 <p> 22 レート・ランキング機能対応 23 </p> 24 <p> 25 あなたのフォロワーで競い合おう!! 26 </p> 27 </div> 28 <div class="twi-cooperation"> 29 <div id="firebaseui-auth-container"></div> 30 </div> 31 32 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script> 33 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js"></script> 34 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script> 35 <script src='javascripts/config.js'></script> 36 <script> 37 var ui = new firebaseui.auth.AuthUI(firebase.auth()); 38 ui.start('#firebaseui-auth-container', { 39 signInSuccessUrl: 'http://localhost:3000/test', 40 signInOptions: [ 41 firebase.auth.TwitterAuthProvider.PROVIDER_ID 42 ] 43 }); 44 </script> 45 46 </body> 47</html>

test.ejs(ログイン後の画面)

ejs

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>twipoke</title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 </head> 8 <body> 9 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script> 10 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js"></script> 11 <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script> 12 <script src='javascripts/config.js'></script> 13 <script> 14 firebase.auth().onAuthStateChanged(user => { 15 console.log(user); 16 }); 17 </script> 18 </body> 19</html>

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

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

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

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

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

guest

回答1

0

APIをを利用する場合は、TwitterAPI利用申請をしないと使用できません。
https://developer.twitter.com/
上記のデベロッパーページから申請しましょう。

私は数年前に登録したので、当時と今で手順が多少異なると思いますので
最新の登録手順の記事が色々あるかと思いますので、そちらを参考にされると良いと思います。

投稿2021/05/10 23:09

yy_tn

総合スコア299

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

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

yusuke.y

2021/05/10 23:16

そもそもtwitterAPIに登録しなければFirebaseでTwitter認証できませんので当然しています。
yy_tn

2021/05/10 23:21

その時に、consumer_key、consumer_secret、access_token_key、access_token_secretを発行されていませんか?
yusuke.y

2021/05/10 23:34

それは私がdeveloperでログインしている私自身のTwitterアカウントのキー郡では? ログイン認証したユーザーのaccess_token_keyとaccess_token_secretが取得したいのですが。
yy_tn

2021/05/10 23:40 編集

Twitter認証で初回ログイン時に、アプリの許可(あなたのツイートを取得できます等)をすると思いますが、 それを許可したということは、あなたのAPIキーでログインしたユーザーの情報を取得してもOKということですので あなたのAPIのキーをTwitterAPIに渡すことでログインユーザーの情報を取得できます。 先ほどコメントしました4つのキーがあればそれでOKです。
yusuke.y

2021/05/11 00:47 編集

当然の結果ですができませんでした。 デベロッパーでTwitterアプリを立ち上げた際に発行されるaccess_token_key、access_token_secretはデベロッパー登録に使ったアカウントですので、他アカウントでFirebaseのTwitter認証を通したとしてもTwitterAPIは使えませんでしたよ。 もちろん、デベロッパー登録に使ったアカウントで認証したら問題なくTwitterAPIが使用できました。 access_token_key、access_token_secretはTwitter認証をしたら上書きされるようなので、ログインの都度取得してfirestoreに保存する必要があると思います。 ですのでログイン認証したユーザーのaccess_token_key、access_token_secretを取得する必要があります。
yy_tn

2021/05/11 01:30 編集

失礼しました、勘違いしておりました。申し訳ないです… 仰る通り、各ユーザーごとのアクセストークンは都度取得するものでした。 ただ、下記の情報はユーザーごとのトークンが無くてもAPIで取得できますので、その認識からユーザーごとのトークンは不要だ。という勘違いしたコメントで返してしまいました。 ・Twitterアカウント名 ・TwitterID ・直近のツイート(50くらい)※鍵垢除く ・フォロワー ※鍵垢除く ・アイコン
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問