如何在React+Firebase环境中获取Facebook用户的UID？

我正在使用React和Firebase实现Facebook认证功能，通过signInWithPopup方法完成登录，但打印result.user时只能看到用户的displayName和邮箱，请问有没有办法获取该用户的Facebook原生UID？

我的实现代码如下：

import React, { Component } from 'react'
import './StartPage.css'
import fire from '../../fire.js'
import { provider, auth } from '../../fire.js';
class StartPage extends Component {
  constructor(props) {
    super(props)
    this.login = this.login.bind(this)
    this.loggedIn = this.loggedIn.bind(this)
  }
  async login() {
    provider.addScope('user_birthday');
    const result = await auth().signInWithPopup(provider)
    console.log(result)
    console.log(result.credential.accessToken)
    this.setState({ user: result.user });
    console.log("Logged in")
    this.props.history.push('/vote')
  }
  loggedIn() {
    console.log('meh')
    // make check for login here
    this.props.history.push('/vote')
  }
  render() {
    return (
      <div className = "StartPage">
        <div className = "StartPage-up">
          <div className = "StartPage-up-logo-container">
            <img className = "StartPage-up-logo" src = "http://koyilandykoottam.in/images/home/logo.png" />
          </div>
          <div className = "StartPage-up-poy"> PERSON OF THE YEAR </div>
        </div>
        <div className = "StartPage-down">
          <button className = "StartPage-facebook-login" onClick = { this.login }> Login with facebook </button>
        </div>
      </div>
    )
  }
}
export default StartPage

当然可以！你可以通过两种简单的方式获取用户的Facebook原生UID：

方式1：从登录凭据（result.credential）中获取 #

当signInWithPopup登录成功后，返回的result对象里的credential是FacebookAuthProvider的实例，它自带的userID属性就是用户的Facebook原生UID。

修改你的login方法，添加获取逻辑：

async login() {
  provider.addScope('user_birthday');
  const result = await auth().signInWithPopup(provider)
  
  // 获取Facebook UID
  const facebookUid = result.credential.userID;
  console.log("用户的Facebook UID:", facebookUid);
  
  console.log(result)
  console.log(result.credential.accessToken)
  this.setState({ user: result.user });
  console.log("Logged in")
  this.props.history.push('/vote')
}

方式2：从用户的提供商数据（result.user.providerData）中获取 #

Firebase用户对象的providerData是一个数组，包含了用户所有登录渠道的信息。你可以筛选出providerId为facebook.com的条目，其中的uid字段就是Facebook原生UID：

async login() {
  provider.addScope('user_birthday');
  const result = await auth().signInWithPopup(provider)
  
  // 从providerData中筛选Facebook相关信息
  const facebookProviderInfo = result.user.providerData.find(item => item.providerId === 'facebook.com');
  if (facebookProviderInfo) {
    const facebookUid = facebookProviderInfo.uid;
    console.log("用户的Facebook UID:", facebookUid);
  }
  
  console.log(result)
  console.log(result.credential.accessToken)
  this.setState({ user: result.user });
  console.log("Logged in")
  this.props.history.push('/vote')
}

额外注意 #

请确保你的fire.js中正确初始化了Facebook认证提供商，示例代码如下：

import { getAuth, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();

另外，Facebook UID属于基础用户信息，不需要额外申请权限，默认就能获取到，你当前添加的user_birthday scope不会影响这个字段的获取。

内容的提问来源于stack exchange，提问作者Arshak Anjum