使用 GitHub 的 OAuth

在本教學中，我們將在 Next.js 應用程式中設定 Auth.js，以便能夠使用 GitHub 登入。

設定 Auth.js

安裝 Auth.js 和 Next.js

在本教學中，我們將使用預設的 Auth.js & Next.js 範例應用程式。如果您已經有現有的 Next.js 應用程式，它也應該可以運作。如果沒有，請複製儲存庫

git clone https://github.com/nextauthjs/next-auth-example.git && cd next-auth-example

如果您使用範例應用程式，則 Auth.js 已安裝，否則請按照安裝說明進行。

建立伺服器設定

接下來，我們將建立主要的 Auth.js 設定檔，其中包含 Auth.js 的必要設定以及動態路由處理程式。

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, auth } = NextAuth({
  providers: [GitHub],
})

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers
export const runtime = "edge" // optional

由於這是一個捕獲所有動態路由，它將回應所有相關的 Auth.js API 路由，以便您的應用程式可以使用 OAuth 2 協定與選定的 OAuth 提供者互動。

新增環境變數

如果尚未建立，請依照安裝章節中的說明建立 .env.local 檔案，並新增以下兩個 GitHub 變數

AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

一旦我們在 GitHub 中註冊我們的應用程式，我們將使用 GitHub 開發人員入口網站中的正確值填寫 AUTH_GITHUB_ID 和 AUTH_GITHUB_SECRET。

註冊您的應用程式

在 GitHub 中建立 OAuth 應用程式

若要從 GitHub 取得所需的認證，我們需要在其開發人員設定中建立一個應用程式。

前往GitHub 開發人員設定，也可在 設定 → 開發人員 → OAuth 應用程式下找到，然後按一下「新增 OAuth 應用程式」

接下來，您將看到一個註冊應用程式的畫面。填寫所有必填欄位。

預設的回呼 URL 通常應採用 [origin]/api/auth/callback/[provider] 的形式，但是，預設值會根據您使用的框架而略有不同。

// Local
https://127.0.0.1:3000/api/auth/callback/github
 
// Prod
https://app.company.com/api/auth/callback/github

// Local
https://127.0.0.1:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

// Local
https://127.0.0.1:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

// Local
https://127.0.0.1:3000/auth/callback/github
 
// Prod
https://app.company.com/auth/callback/github

輸入所有必填欄位後，按一下 「註冊應用程式」。

密碼

成功註冊您的應用程式後，GitHub 將向我們顯示所需的詳細資訊。

我們需要從此畫面取得 2 個項目，即 用戶端 ID 和 用戶端密碼。

用戶端 ID 始終可見，它是您在 GitHub 中 OAuth 應用程式的公開識別碼。

若要取得用戶端密碼，您必須按一下 「產生新的用戶端密碼」，這將建立您的第一個用戶端密碼。如果您的第一個密碼外洩、遺失等，您可以輕鬆地在此處建立新的用戶端密碼。

將所有東西串連起來

現在我們有了所需的用戶端 ID 和用戶端密碼，將它們貼到我們先前建立的 .env.local 檔案中。

AUTH_SECRET="changeMe"
 
AUTH_GITHUB_ID={clientId}
AUTH_GITHUB_SECRET={clientSecret}

完成所有步驟後，您現在可以啟動您的本機開發伺服器並測試登入流程。

npm run dev

pnpm run dev

yarn dev

bun run dev

導覽至 https://127.0.0.1:3000。您應該會看到以下頁面

按一下 「登入」，您應該會被重新導向至預設的 Auth.js 登入頁面。您可以自訂此頁面以符合您的需求。接下來，按一下 「使用 GitHub 登入」。Auth.js 會將您重新導向至 GitHub，GitHub 會識別您的應用程式，並要求使用者輸入憑證以確認他們想要驗證您的新應用程式。

驗證完成後，GitHub 會將使用者重新導向回您的應用程式，而 Auth.js 會處理其餘部分

如果您回到這裡，表示一切都運作正常！我們已完成整個 OAuth 驗證流程，讓使用者可以透過 GitHub 登入您的應用程式！

部署

在您可以將應用程式發佈到生產環境之前，您需要變更一些項目。

遺憾的是，GitHub 是少數不允許您為一個應用程式註冊多個回呼 URL 的提供者之一。因此，您需要在 GitHub 的儀表板中註冊另一個應用程式，就像我們之前所做的一樣，但將回呼 URL 設定為您應用程式的生產網域（例如 https://example.com/api/auth/callback/github）。然後，您也會有一個新的 用戶端 ID 和 用戶端密碼，您需要透過您的託管提供者儀表板（Vercel、Netlify、Cloudflare 等）或您在生產環境中管理環境變數的方式將其新增至您的生產環境。

如需更多資訊，請參閱部署頁面。