如何用Next.js 14實作使用Google, Microsoft, Facebook, Apple帳號授權登入並整合JWT

在現代網頁應用程式中，使用社交帳號進行登入是一種方便且常見的功能。這不僅讓使用者更容易登入，也減少了忘記密碼的麻煩。今天，我們將探討如何在Next.js 14專案中實作Google, Microsoft, Facebook, Apple帳號的授權登入功能，並且整合JWT來管理使用者的認證狀態。這篇文章將一步步帶你完成整個過程，讓你輕鬆上手。

什麼是OAuth？

OAuth是一種開放標準，主要用來讓第三方應用程式可以安全地存取使用者的資源，而不需透露使用者的密碼。透過OAuth，使用者可以授權應用程式存取他們在不同平台上的資訊，例如Google、Facebook、Microsoft和Apple。

為什麼選擇Next.js 14？

Next.js 14是一個基於React的框架，它提供了許多強大的功能，如伺服器端渲染（SSR）和靜態網站生成（SSG）。這使得Next.js成為開發現代網頁應用程式的理想選擇。此外，Next.js也容易與各種OAuth服務和JWT整合。

實作步驟

以下是實作Google, Microsoft, Facebook, Apple授權登入並整合JWT的詳細步驟。

1. 安裝必要的套件

首先，我們需要安裝一些必要的套件，如next-auth和jsonwebtoken等。

npm install next-auth jsonwebtoken

2. 設定NextAuth.js

在你的Next.js專案中，建立一個新的檔案[...nextauth].js，放在pages/api/auth/目錄下。這個檔案將包含所有OAuth設定和JWT的生成邏輯。

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import jwt from "jsonwebtoken";

const secret = process.env.JWT_SECRET;

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    Providers.Facebook({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET,
    }),
    Providers.Microsoft({
      clientId: process.env.MICROSOFT_ID,
      clientSecret: process.env.MICROSOFT_SECRET,
    }),
  ],
  callbacks: {
    async jwt(token, user, account, profile, isNewUser) {
      if (account?.accessToken) {
        token.accessToken = account.accessToken;
      }
      return token;
    },
    async session(session, token) {
      session.accessToken = token.accessToken;
      return session;
    }
  },
  secret: secret,
});

3. 設定環境變數

在專案根目錄下，建立一個.env.local檔案，並加入以下內容：

GOOGLE_ID=你的Google客戶端ID
GOOGLE_SECRET=你的Google客戶端密鑰
FACEBOOK_ID=你的Facebook應用程式ID
FACEBOOK_SECRET=你的Facebook應用程式密鑰
APPLE_ID=你的Apple應用程式ID
APPLE_SECRET=你的Apple應用程式密鑰
MICROSOFT_ID=你的Microsoft應用程式ID
MICROSOFT_SECRET=你的Microsoft應用程式密鑰
JWT_SECRET=你的JWT密鑰

4. 設定OAuth應用程式

Google

  1. 前往Google Cloud Console，建立一個新的專案。
  2. 啟用OAuth 2.0 API並建立憑證。
  3. 在授權重定向URI中填入http://localhost:3000/api/auth/callback/google。

Facebook

  1. 前往Facebook Developers，建立一個新的應用程式。
  2. 設定OAuth重定向URI為http://localhost:3000/api/auth/callback/facebook。

Microsoft

  1. 前往Azure Portal，建立一個新的應用程式註冊。
  2. 在重定向URI中填入http://localhost:3000/api/auth/callback/microsoft。

Apple

  1. 前往Apple Developer，建立一個新的應用程式。
  2. 設定服務ID並配置重定向URI為http://localhost:3000/api/auth/callback/apple。

5. 建立登入按鈕

在你的應用程式中，建立登入按鈕來觸發OAuth流程。

import { signIn } from "next-auth/client";

function SignIn() {
  return (
    <div>
      <button onClick={() => signIn("google")}>使用Google登入</button>
      <button onClick={() => signIn("facebook")}>使用Facebook登入</button>
      <button onClick={() => signIn("microsoft")}>使用Microsoft登入</button>
      <button onClick={() => signIn("apple")}>使用Apple登入</button>
    </div>
  );
}

export default SignIn;

6. 測試應用程式

啟動你的Next.js應用程式，並嘗試使用不同的帳號登入。確保所有流程都能順利進行，且授權成功後能夠正確顯示使用者資訊並生成JWT。

7. 驗證JWT

在你的API路由中，你可以驗證JWT以確保請求是由授權使用者發出的。

import jwt from "jsonwebtoken";

export default async (req, res) => {
  const token = req.headers.authorization.split(" ")[1];
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    res.status(200).json({ message: "JWT驗證成功", decoded });
  } catch (error) {
    res.status(401).json({ message: "JWT驗證失敗" });
  }
};

常見問題解答

Q1: 為什麼我的授權登入失敗了？

A1: 請檢查你的客戶端ID和密鑰是否正確，並確認重定向URI設置是否一致。

Q2: 如何在生產環境中部署這個功能？

A2: 確保你在生產環境中設定了正確的環境變數，並在OAuth平台上更新重定向URI為你的生產URL。

Q3: 如何擴展這個功能支持更多的OAuth提供者？

A3: 你可以在next-auth設定中添加更多的提供者，只需要按照相同的步驟設定相關的客戶端ID和密鑰。

結論

透過這篇文章，你應該已經學會了如何在Next.js 14中實作Google, Microsoft, Facebook, Apple帳號的授權登入功能，並且整合JWT來管理使用者的認證狀態。這不僅提升了使用者體驗，也讓你的應用程式更具競爭力。希望這個教學對你有幫助，如果有任何問題，歡迎在下方留言討論。