Vue.js｜Firebase v9のAuthenticationでTwitter認証後にTwitterプロフィール情報を取得する
こんな記事を書いて、Firebase v9のAuthenticationでTwitter認証を実装した。
ただ、認証した情報を利用してTwitter APIを叩き、さらにユーザー情報（プロフィールやツイートなど）を取得したかった。そもそも、Twitter APIを叩くための一意なTwitter IDなどを取得したかった。
しかし、情報があまり落ちなかったので備忘録です。
やりたいこと
Firebase v9のAuthenticationでTwitter認証後に、Twitter APIを叩くための一意なTwitter IDや詳細なプロフィール情報を取得したい
おさらい
認証の処理はこちらでした。
<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する。
import { getAuth, signInWithPopup, TwitterAuthProvider, getAdditionalUserInfo} from "firebase/auth";
そして、こうする。
const details = getAdditionalUserInfo(result);
console.log(details);
ログインしたユーザーのTwitterアカウントの一意なIDやスクリーンID、プロフィール文など、さまざまな情報を取得できる。Twitter API申請さえすませれば、idを利用してさらに情報を取得できる。めでたし。
このあたり、もっとFirebaseのドキュメントに親切に書いてほしかった。
最終全体コード
<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>
Author And Source
この問題について(Vue.js｜Firebase v9のAuthenticationでTwitter認証後にTwitterプロフィール情報を取得する), 我々は、より多くの情報をここで見つけました https://zenn.dev/knj/articles/ab7a7424d2a311著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol