如何整合 GitHub 登入：四步驟指南

問題

還記得使用者需要為每個應用程式提供唯一的使用者名稱和密碼的日子嗎？是時候繼續前進了。

讓我們透過整合 GitHub 登入來簡化應用程式的登錄，這對於開發人員和精通技術的用戶來說是一個不錯的選擇。

解決方案

GitHub OAuth 讓您可以無縫地對使用者進行身份驗證，並透過 GitHub 的 API 存取他們的公開個人資料或其他資料。

讓我們將其分解為前端和後端的可管理步驟。

---

第 1 步：在 GitHub 上註冊您的應用程式

1. 前往 GitHub 設定：導覽至 GitHub 開發者設定。

2. OAuth 應用程式：點擊側邊欄中的 OAuth 應用程式。

1. 註冊新的 OAuth 應用程式：
   • 首頁 URL：使用 http://localhost:3000（或您套用的本機 URL）。
   • 授權回呼 URL：使用 http://localhost:3000 （或您規劃整合 GitHub 登入的部署 URL）。您可以稍後更新。

1. 複製客戶端 ID：建立後，GitHub 將提供一個客戶端 ID。

2. 建立客戶端金鑰：產生後端操作所需的客戶端金鑰，例如用代幣交換使用者資料。

---

第 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;
}

使用此資料在資料庫中建立或更新使用者。

---

長話短說

1. 在 GitHub 上註冊您的應用程式以取得 客戶端 ID 和 客戶端金鑰。
2. 將 GitHub 登入按鈕新增至您的前端。
3. 將使用者重新導向至 GitHub 的 OAuth 頁面進行登入。
4. 使用授權程式碼處理重定向。
5. 將程式碼交換為後端的存取權杖。
6. 使用令牌從 GitHub 的 API 取得使用者資料。

---

獎勵：LiveAPI 讓您的生活更輕鬆

我正在開發一個名為 LiveAPI 的工具，它可以直接從您的程式碼庫產生安全、美觀的 API 文件。獎勵：它可以讓您執行 API 並產生任何語言的請求片段！

嘗試一下，節省文件時間，同時專注於您的應用程式。快樂編碼！

以上是如何整合 GitHub 登入：四步驟指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！