如何通过Javascript从Firebase Authentication获取Twitter用户名

1. 登录时直接获取Twitter用户名 #

Firebase Twitter登录返回的result对象中，additionalUserInfo.username字段就是你需要的Twitter账号用户名，默认result.user对象里不会携带该字段，你可以修改登录逻辑直接获取：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js";
import { getAuth, signInWithPopup, TwitterAuthProvider } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js";
import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-firestore.js";

const app = initializeApp(firebaseConfig);
const provider = new TwitterAuthProvider();
const auth = getAuth();
const db = getFirestore(app);

document.querySelector('button').addEventListener('click', authenticate);

function authenticate() {
  signInWithPopup(auth, provider)
    .then((result) => {
      const credential = TwitterAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;
      const secret = credential.secret;

      const user = result.user;
      // 新增代码获取Twitter用户名
      const twitterUsername = result.additionalUserInfo.username;
      console.log('Twitter账号用户名：', twitterUsername);

      // 将用户名与uid绑定存储到数据库，方便后续查询
      setDoc(doc(db, "users", user.uid), {
        uid: user.uid,
        displayName: user.displayName,
        twitterUsername: twitterUsername,
        photoURL: user.photoURL
      }, { merge: true });
    }).catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      const email = error.email;
      const credential = TwitterAuthProvider.credentialFromError(error);
      console.log(error);
    });
}

2. 通过onAuthStateChanged获取用户名的方法 #

auth对象本身以及onAuthStateChanged回调返回的标准User对象不会存储第三方平台的用户名字段，你需要从提前存储用户信息的数据库中查询对应数据，实现示例如下：

import { getAuth } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js"
import { getFirestore, doc, getDoc } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-firestore.js"

const auth = getAuth();
const db = getFirestore();
auth.onAuthStateChanged(async user => {
  if(user){
    // 用uid查询对应的用户信息
    const userDoc = await getDoc(doc(db, "users", user.uid));
    if(userDoc.exists()){
      const userData = userDoc.data();
      const twitterUsername = userData.twitterUsername;
      // 此处可使用获取到的用户名做业务逻辑处理
      console.log('当前用户Twitter用户名：', twitterUsername);
    }
  }
})

3. 按uid查询用户标识信息的方案 #

登录成功后将uid作为文档ID，把你需要的用户标识信息（Twitter用户名、昵称、头像等）存储到Firebase数据库的用户集合中，后续任意场景需要查询指定uid的信息时，直接用uid作为键查询对应文档即可。

内容的提问来源于stack exchange，提问作者Pratik Pakhale