已实现Firebase GitHub认证，如何获取用户GitHub用户名？

别担心，你的需求完全能实现！你已经走对了关键一步——拿到GitHub的access token，接下来只要用这个令牌调用GitHub的API，就能拿到你需要的login字段（也就是GitHub用户名）。下面是给新手的详细步骤：

第一步：确认权限没问题 #

你已经给provider添加了read:user的scope，这个权限刚好能调用获取当前用户信息的API，完全够用，不用额外添加其他权限。

第二步：在登录成功回调里添加API调用代码 #

就在你拿到token和user的代码块里，新增一个fetch请求（新手友好的HTTP请求方式），调用GitHub的用户信息接口。具体位置就在var token = result.credential.accessToken;之后，新增以下代码：

// 调用GitHub API获取用户核心信息
fetch('https://api.github.com/user', {
  headers: {
    // 用拿到的token做身份验证
    'Authorization': `token ${token}`
  }
})
.then(response => response.json())
.then(githubUser => {
  // githubUser.login就是你要的GitHub用户名！
  var userName = githubUser.login;
  console.log('GitHub用户名:', userName);

  // 可选：把用户名存入Firebase数据库（二选一即可）
  // 方式1：Firestore数据库
  firebase.firestore().collection('users').doc(user.uid).set({
    githubUsername: userName,
    displayName: user.displayName,
    email: user.email
  }, { merge: true })
  .then(() => console.log('用户名已成功存入Firestore'))
  .catch(dbErr => console.error('存数据库失败:', dbErr));

  // 方式2：实时数据库
  // firebase.database().ref('users/' + user.uid).update({
  //   githubUsername: userName
  // }).then(() => console.log('用户名已成功存入实时数据库'));
})
.catch(apiErr => console.error('调用GitHub API出错:', apiErr));

第三步：整合后的完整代码 #

把上面的代码嵌入到你的现有登录逻辑里，完整的click事件回调代码如下：

var provider = new firebase.auth.GithubAuthProvider();
provider.addScope('read:user');
//get elements
const authenticateBtn = document.getElementById('authbtn');
//add login event
authenticateBtn.addEventListener('click', e=>{
  firebase.auth().signInWithPopup(provider).then(function(result) {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;

    // --- 新增的核心代码开始 ---
    fetch('https://api.github.com/user', {
      headers: {
        'Authorization': `token ${token}`
      }
    })
    .then(response => response.json())
    .then(githubUser => {
      var userName = githubUser.login;
      console.log('GitHub用户名:', userName);

      // 示例：存入Firestore数据库
      firebase.firestore().collection('users').doc(user.uid).set({
        githubUsername: userName,
        displayName: user.displayName,
        email: user.email
      }, { merge: true })
      .then(() => console.log('用户名已存入数据库'))
      .catch(dbError => console.error('存数据库出错:', dbError));
    })
    .catch(apiError => {
      console.error('调用GitHub API出错:', apiError);
    });
    // --- 新增的核心代码结束 ---

    // 你原来获取的其他用户数据
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;

  }).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    var email = error.email;
    var credential = error.credential;
    console.error('登录出错:', error);
  });
})

关键说明 #

1. 为什么用https://api.github.com/user？
   这个接口会返回当前认证用户的所有基本信息，其中login字段就是用户的GitHub账号名（比如你的个人主页URL里的名称）。

2. 请求头的作用？
   Authorization: token ${token}是告诉GitHub：我已经通过Firebase拿到了合法的用户授权令牌，有权限获取该用户的信息。

3. 数据库存储注意事项

   • 如果还没开启Firebase数据库，先去Firebase控制台启用Firestore或实时数据库。
   • 新手可以先设置测试模式的安全规则（上线前一定要改成严格规则，避免数据泄露）。

内容的提问来源于stack exchange，提问作者H Darne