产品 使用场景 价格 文档 支持
ไปที่คอนโซล

在 JavaScript 中使用 GitHub 进行身份验证

您可以将 GitHub 身份验证机制集成到您的应用中，让您的用户可使用自己的 GitHub 帐号进行 Firebase 身份验证。集成 GitHub 身份验证的方法有两种：使用 Firebase SDK 执行登录流程；手动执行 GitHub OAuth 2.0 流程并将生成的访问令牌传递给 Firebase。

准备工作

  1. 将 Firebase 添加至您的 JavaScript 项目。
  2. 在 Firebase 控制台中，打开身份验证部分。
  3. 在登录方法标签页中，启用 GitHub 提供方。
  4. 将该提供方的开发者控制台中的客户端 ID 和客户端密文添加至提供方配置：
    1. 在 GitHub 上将您的应用注册为开发者应用，并为其获取 OAuth 2.0 客户端 ID 和客户端密文。
    2. 请务必在您的 GitHub 应用配置的应用设置页面中，将 Firebase OAuth 重定向 URI（例如 my-app-12345.firebaseapp.com/__/auth/handler）设置为授权回调网址。
  5. 点击保存。

使用 Firebase SDK 处理登录流程

如果您是在构建网页应用，想要通过用户的 GitHub 帐号对其进行 Firebase 身份验证，最简单的方法是使用 Firebase JavaScript SDK 来处理登录流程（如果您希望在 Node.js 或其他非浏览器环境中对用户进行身份验证，则必须手动处理登录流程。）

如需使用 Firebase JavaScript SDK 处理登录流程，请按以下步骤操作：

  1. 创建 GitHub 提供方对象实例：
    var provider = new firebase.auth.GithubAuthProvider();
  2. 可选：指定您希望向身份验证提供方请求的额外 OAuth 2.0 范围。如需添加范围，请调用 addScope。例如：
    provider.addScope('repo');
    请参阅身份验证提供方文档。
  3. 可选：指定您希望通过 OAuth 请求发送的其他自定义 OAuth 提供方参数。如需添加自定义参数，请使用包含 OAuth 提供方文档中指定的键及相应值的对象，调用已初始化的提供方的 setCustomParameters 方法。例如：
    provider.setCustomParameters({
  'allow_signup': 'false'
});
    禁止使用保留的必需 OAuth 参数，系统将忽略此类参数。有关详情，请参阅身份验证提供方参考。
  4. 使用 GitHub 提供方对象进行 Firebase 身份验证。您可以提示您的用户，让其通过打开弹出式窗口或重定向至登录页面的方法用自己的 GitHub 帐号登录。移动设备最好使用重定向方法。
    • 要使用弹出式窗口登录，请调用 signInWithPopup： 
      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;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});
      此外请注意，您可以检索 GitHub 提供方的 OAuth 令牌，使用该令牌可通过 GitHub API 提取额外数据。

      您还可以在此处捕捉并处理错误。要获取错误代码列表，请参阅身份验证参考文档。

    • 要用重定向至登录页面的方法登录，请调用 signInWithRedirect：
      firebase.auth().signInWithRedirect(provider);
      然后，您还可以在页面加载时调用 getRedirectResult 来检索 GitHub 提供方的 OAuth 令牌：
      firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // 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;
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});
      您还可以在此处捕捉并处理错误。要获取错误代码列表，请参阅身份验证参考文档。

手动处理登录流程

您还可以通过调用 GitHub OAuth 2.0 端点来处理登录流程，从而使用 GitHub 帐号进行 Firebase 身份验证：

  1. 按开发者文档中的说明操作，将 GitHub 身份验证集成到您的应用中。在 GitHub 登录流程结束后，您会收到一个 OAuth 2.0 访问令牌。
  2. 如果您需要在 Node.js 应用上登录，请将 OAuth 访问令牌发送到 Node.js 应用。
  3. 在用户使用 GitHub 成功登录后，用 OAuth 2.0 访问令牌换取一个 Firebase 凭据： 
    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. 使用 Firebase 凭据进行 Firebase 身份验证： 
    firebase.auth().signInWithCredential(credential).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

在 Chrome 扩展程序中进行 Firebase 身份验证

如果您正在构建 Chrome 扩展程序应用，则必须将 Chrome 扩展程序 ID 列入白名单：

  1. 在 Firebase 控制台中打开您的项目。
  2. 在 Authentication（身份验证）部分中，打开登录方法页面。
  3. 向“已获授权的网域”列表添加格式如下的 URI：
    chrome-extension://CHROME_EXTENSION_ID

由于 Chrome 扩展程序无法使用 HTTP 重定向，因此只能使用弹出式操作方式（signInWithPopup 和 linkWithPopup）。您应该从后台脚本而不是浏览器操作弹出窗口中调用这些方法，因为身份验证弹出窗口将取消浏览器操作弹出窗口。

在 Chrome 扩展程序的清单文件中，确保将 https://apis.google.com 网址加入到 content_security_policy 白名单中。

后续步骤

在用户首次登录后，系统会创建一个新的用户帐号，并将其与该用户登录时使用的凭据（即用户名、密码、电话号码或者身份验证提供方信息）相关联。此新帐号存储为您的 Firebase 项目的一部分，无论用户采用何种方式登录，您项目中的每个应用都可以使用此帐号来识别用户。

  • 在您的应用中，建议采用在 Auth 对象上设置观察者的方式来了解用户的身份验证状态。然后您可以从 User 对象获取用户的个人资料基本信息。请参阅管理用户。

  • 在您的 Firebase 实时数据库和 Cloud Storage 安全规则中，您可以从 auth 变量获取已登录用户的唯一用户 ID，然后用其控制用户可以访问哪些数据。

您可以通过将身份验证提供方凭据关联至现有用户帐号，让用户可以使用多个身份验证提供方登录您的应用。

要让用户退出登录，请调用 signOut：

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});