如何用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. 安裝必要的套件

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

npm install @auth/core @auth/google @auth/facebook @auth/apple @auth/microsoft @auth/jwt

2. 設定Auth.js

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

import { Auth } from "@auth/core";
import Google from "@auth/core/providers/google";
import Facebook from "@auth/core/providers/facebook";
import Apple from "@auth/core/providers/apple";
import Microsoft from "@auth/core/providers/microsoft";
import JWT from "@auth/core/jwt";
import { NextApiHandler } from "next";

const authHandler: NextApiHandler = (req, res) =>
  Auth(req, res, {
    providers: [
      Google({
        clientId: process.env.GOOGLE_ID,
        clientSecret: process.env.GOOGLE_SECRET,
      }),
      Facebook({
        clientId: process.env.FACEBOOK_ID,
        clientSecret: process.env.FACEBOOK_SECRET,
      }),
      Apple({
        clientId: process.env.APPLE_ID,
        clientSecret: process.env.APPLE_SECRET,
      }),
      Microsoft({
        clientId: process.env.MICROSOFT_ID,
        clientSecret: process.env.MICROSOFT_SECRET,
      }),
    ],
    jwt: {
      secret: process.env.JWT_SECRET,
      encode: async ({ token }) => {
        const encodedToken = await JWT.encode({ token, secret: process.env.JWT_SECRET });
        return encodedToken;
      },
      decode: async ({ token }) => {
        const decodedToken = await JWT.decode({ token, secret: process.env.JWT_SECRET });
        return decodedToken;
      },
    },
    callbacks: {
      async jwt({ token, account }) {
        if (account) {
          token.accessToken = account.access_token;
        }
        return token;
      },
      async session({ session, token }) {
        session.accessToken = token.accessToken;
        return session;
      },
    },
  });

export default authHandler;

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 "@auth/core";

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 { NextApiHandler } from "next";
import jwt from "jsonwebtoken";

const verifyToken: NextApiHandler = (req, res) => {
  const token = req.headers.authorization?.split(" ")[1];

  if (!token) {
    return res.status(401).json({ message: "未授權" });
  }

  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驗證失敗" });
  }
};

export default verifyToken;

常見問題解答

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

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

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

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

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

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

結論

透過這篇文章，你應該已經學會了如何在Next.js 14中實作Google, Microsoft, Facebook, Apple帳號的授權登入功能，並且整合JWT來管理使用者的認證狀態。這不僅提升了使用者體驗，也讓你的應用程式更具

競爭力。希望這個教學對你有幫助，如果有任何問題，歡迎在下方留言討論。