如何集成 GitHub 登录：四步指南-js教程-PHP中文网

问题

还记得用户需要为每个应用程序提供唯一的用户名和密码的日子吗？是时候继续前进了。

让我们通过集成 GitHub 登录来简化应用程序的登录，这对于开发人员和精通技术的用户来说是一个不错的选择。

解决方案

GitHub OAuth 允许您无缝地对用户进行身份验证，并通过 GitHub 的 API 访问他们的公共个人资料或其他数据。

让我们将其分解为前端和后端的可管理步骤。

第 1 步：在 GitHub 上注册您的应用程序

转到 GitHub 设置：导航到 GitHub 开发者设置。
OAuth 应用程序：单击侧边栏中的 OAuth 应用程序。

How To Integrate GitHub Sign-In: A Four Step Guide

注册新的 OAuth 应用程序：
- 主页 URL：使用 http://localhost:3000（或您应用的本地 URL）。
- 授权回调 URL：使用 http://localhost:3000 （或您计划集成 GitHub 登录的部署 URL）。您可以稍后更新。

How To Integrate GitHub Sign-In: A Four Step Guide

复制客户端 ID：创建后，GitHub 将提供一个客户端 ID。
创建客户端密钥：生成后端操作所需的客户端密钥，例如用令牌交换用户数据。

How To Integrate GitHub Sign-In: A Four Step Guide

第 2 步：前端实施

添加 GitHub 登录按钮

使用以下 HTML 和 CSS 显示 GitHub 登录按钮：

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

登录后复制

处理登录按钮点击

使用 JavaScript 将用户重定向到 GitHub 的授权页面：

const handleGithubLogin = () => {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
  window.location.href = githubAuthUrl;
};

登录后复制

将 GITHUB_CLIENT_ID 和 REDIRECT_URI 替换为您的值。

第 3 步：处理 GitHub 的重定向

GitHub 将使用 ?code= 重定向回您的应用程序在网址中。使用此代码兑换访问令牌。

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&accessToken=${code}&provider=github`;
  callBackendAPI("GET", target);
}, []);

登录后复制

这会将代码发送到您的后端，以安全地将其交换为访问令牌。

第四步：后端实现

交换访问令牌的授权代码

使用 GitHub 的 OAuth 令牌端点：

const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';

const url = `${GITHUB_ACCESS_TOKEN_URL}?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_SECRET_ID}&code=${request.body.code}`;

const response = await fetch(url, {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Accept-Encoding": "application/json",
  },
});

const githubUserData = await response.json();
const accessToken = githubUserData.access_token;

登录后复制

将 GITHUB_CLIENT_ID 和 GITHUB_SECRET_ID 替换为步骤 1 中的值。

获取用户数据

使用访问令牌，调用 GitHub 的 User API 检索用户信息：

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

登录后复制

How To Integrate GitHub Sign-In: A Four Step Guide