🤩

Vue.js｜Firebase v9のAuthenticationでTwitter認証後にTwitterプロフィール情報を取得する

2022/04/06に公開

Firebase

こんな記事を書いて、Firebase v9のAuthenticationでTwitter認証を実装した。

ただ、認証した情報を利用してTwitter APIを叩き、さらにユーザー情報（プロフィールやツイートなど）を取得したかった。そもそも、Twitter APIを叩くための一意なTwitter IDなどを取得したかった。
しかし、情報があまり落ちなかったので備忘録です。

やりたいこと

Firebase v9のAuthenticationでTwitter認証後に、Twitter APIを叩くための一意なTwitter IDや詳細なプロフィール情報を取得したい

おさらい

認証の処理はこちらでした。

src/views/Login.vue

<template>
<!-- 省略｜↑のリンクにあります -->
</template>

<script>
// import firebaseApp from '@/src/main.js'
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

export default {
  name: 'Login',
  methods: {
    signin: () => {
      const provider = new TwitterAuthProvider();
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
        const user = result.user;
        if (user) {
          console.log(user);
        } else {
          alert('有効なアカウントではありません')
        }
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode + "@@@" + errorMessage);
      });
    }
  }
}
</script>

上記処理のなかで、const user = result.user; でユーザー情報にアクセスできるが、十分でない。中身をみてみるとわかる。user.uidもFirebaseのもの？であり、Twitterの一意なIDではない。

ではどうするか？

getAdditionalUserInfo()を利用する

既存コードで、getAdditionalUserInfoをimportする。

src/views/Login.vue

import { getAuth, signInWithPopup, TwitterAuthProvider, getAdditionalUserInfo} from "firebase/auth";

そして、こうする。

src/views/Login.vue

const details = getAdditionalUserInfo(result);
console.log(details);

ログインしたユーザーのTwitterアカウントの一意なIDやスクリーンID、プロフィール文など、さまざまな情報を取得できる。Twitter API申請さえすませれば、idを利用してさらに情報を取得できる。めでたし。

このあたり、もっとFirebaseのドキュメントに親切に書いてほしかった。

最終全体コード

src/views/Login.vue

<template>
<!-- 省略｜↑のリンクにあります -->
</template>

<script>
// import firebaseApp from '@/src/main.js'
import { getAuth, signInWithPopup, TwitterAuthProvider, getAdditionalUserInfo } from "firebase/auth";

export default {
  name: 'Login',
  methods: {
    signin: () => {
      // const provider = new firebaseApp.auth.TwitterAuthProvider()
      const provider = new TwitterAuthProvider();
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
        // The signed-in user info.
        const user = result.user;
        if (user) {
          console.log(user);
	  const details = getAdditionalUserInfo(result);
	   console.log(details);
        } else {
          alert('有効なアカウントではありません')
        }
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode + "@@@" + errorMessage);
      });
    }
  }
}
</script>

やりたいこと

おさらい

getAdditionalUserInfo()を利用する

最終全体コード

Discussion