如何整合 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