FirebaseのTwitterログインを使用したWebアプリを開発している際、TwitterのID(ユーザー名)の取得で手間取った為、記事にしました。
(ユーザー名だと表示名と混同しそうなため、ユーザー名ではなくTwitter ID と呼びます)
前提
以下の2つの公式の記事を参考に、Twitterを用いたログイン機能を実装し、ユーザー情報の取得を試みました。
ユーザー情報は、ログイン後に以下のコードを実行すれば取得できます。(JavaScriptを想定)
import firebase from 'firebase/app'
import 'firebase/auth'
var user = firebase.auth().currentUser
このuser変数の中にユーザー情報が入っており、以下のコードによりTwitterの表示名や、Twitterアイコン画像URLをコンソールへ出力できます。
console.log(user.displayName)//Twitterの表示名を出力
console.log(user.photoURL)//TwitterアイコンのURLを出力
開発当初はTwitterの表示名とアイコンが取得できれば十分だと思ったのですが、表示名はアカウント固有では無い為、アカウント固有のTwitter ID(@から始まる文字列)も取得したいと思いました。(Twitter IDが取得できれば、そのユーザーのTwitterページへのリンクも作成できる)
しかし、上記のuser変数にはTwitter IDは含まれておらず、Twitter IDを取得するには別の手法が必要となります。
解決策
ユーザー名を得るには__additionalUserInfo__というデータを取得する必要があります。直訳で「追加のユーザー情報」。そのまんまですね。
additionalUserInfo に関するFirebaseの公式記事は日本語化されておらず(2021/05/27 現在)、頑張って読みます。(日本語検索ばかりしていたのも苦戦した原因ですね...)
additionalUserInfoはフェデレーションIDプロバイダーから取得すると書いてあります。
これだけでは、どうやって取得できるのか分からなかったのですが、以下のサイトに回答が書かれていました。
「フェデレーションIDプロバイダーから取得する」つまりTwitterログインを成功させた直後に取得できるということだったようです。
以下のコードでTwitterログイン処理と、Twitterユーザー名の取得ができます。
firebase.auth().signInWithPopup(new firebase.auth.TwitterAuthProvider())//Twitterログイン
.then((userCredential) => {
console.log(userCredential.additionalUserInfo.username);
//このusernameにユーザー名が入っており、Twitterのユーザー名が取得できる
})
.catch((error) => {
});
これで、めでたしめでたし...と思いきや...
リダイレクトを用いたログインでのユーザー名取得
FirebaseのTwitterを用いたログインには以下の二種類があります。
- signInWithPopup(ポップアップウィンドウでログインを行う)
- signInWithRedirect(ログインページにリダイレクトしてログインを行う)
signInWithPopupを用いてTwitterログインを行う場合は上記のコードで問題ないのですが、signInWithRedirectを用いた、リダイレクトによるログインを行う場合、一旦別のページに飛んでから戻ってくるので、上記のような書き方ではadditionalUserInfoを取得できません。
この場合は、ログイン後にページが読み込まれた際にgetRedirectResultを呼び出すことで、additionalUserInfoを取得できます。
(私はVue.jsで開発している為、watchを用いてログイン後かの判別を行って呼び出しています)
firebase
.auth()
.getRedirectResult()
.then((userCredential) => {
this.twitterId = userCredential.additionalUserInfo.username //Twitter ID を取得
//ついでに最新の表示名とアイコンも取得
this.displayName = userCredential.additionalUserInfo.profile.name
this.photoURL =
userCredential.additionalUserInfo.profile.profile_image_url
})
補足
上記のコードでは、Twitter IDに加え、表示名とアイコンも取得しています。これは、additionalUserInfoはプロバイダーから情報を取得しているため、最新のTwitter表示名とアイコンを取得できるためです。
additionalUserInfoから最新の情報を取得し、updateProfileを用いてユーザー情報を更新しないと、昔のアイコンや表示名が更新されずに古いままになってしまいます。
その為、additionalUserInfoからはユーザー名だけではなく、表示名やアイコンも取得して常に更新するのが良いと思われます。
おわり
誤り等がありましたら、ご指摘頂けると幸いです。
参考
https://firebase.google.com/docs/auth/web/twitter-login?hl=ja
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://firebase.google.com/docs/reference/js/firebase.auth#additionaluserinfo
https://stackoverflow.com/questions/56177525/firebase-auth-is-it-possible-to-see-users-twitter-id