身份驗證是網路應用程式的一個重要方面，它可以確保只有授權使用者才能訪問特定資源或執行特定操作。本文將探討如何使用 Auth0（一個功能強大的身份驗證和授權平臺）為 Next.js 應用程式新增身份驗證功能。
Auth0 是一個多功能、靈活的平臺，可為您的應用程式提供身份驗證和授權服務。無論您是在構建網路應用程式、移動應用程式還是其他任何應用程式，都可以在任何地方整合 auth0。它支援各種身份驗證方法，包括傳統的電子郵件和密碼登入、社交登入和多因素身份驗證。Auth0 身份驗證平臺還可根據不同的專案需求和要求定製登入服務。
設定 Auth0 賬戶
讓我們從建立 Auth0 賬戶開始我們的示例。為此，請訪問 Auth0 網站並建立一個新的免費賬戶。首先訪問 Auth0 網站。點選註冊按鈕，註冊一個新賬戶。
登入後，導航至 Auth0 控制面板。以下是 Auth0 控制面板的外觀：
建立新 Auth0 應用程式
在 Auth0 控制面板中，點選 “Create Application”。這將允許我們建立一個新的 Auth0 應用程式。
現在選擇 Regular Web Applications 作為應用程式型別。NextJS 屬於常規網路應用型別，因為它使用傳統的重定向。最後，點選 “Create”。
為應用程式配置 Auth0 設定
導航至 “Settings” 選項卡，記下 client ID 和 Client Secret ，以便日後在專案中使用。在Auth0中建立的每個應用程式都會分配一個字母數字客戶端 ID，該 ID 僅為您的應用程式獨有，將用於通過 SDK 呼叫Auth0 API。您還將獲得一個唯一的域 URL，用於訪問 Auth0 服務。
太好了！我們完成了 Auth0 賬戶的設定。是時候將它整合到我們的下一個專案中了。
將 Auth0 與 Next.js 整合
首先，我們將建立一個新的 Next.js 專案，以便進一步將 Auth0 整合到我們的應用程式中。要建立 Next 應用程式，請使用以下命令：
設定 Next.js 專案
在深入瞭解 Auth0 整合之前，讓我們先建立一個 Next.js 專案。
Step 1. 建立新的 Next.js 應用程式 要建立新的 next.js 專案，請確保已安裝 Node.js，然後執行以下命令：
npx create-next-app mynextjs cd mynextjs
注：為演示本文，我將使用 Typescript 作為預設語言，專案結構如下：
現在我們已經建立了下一個專案，讓我們把 Auth0 整合到其中。
Step 2. 安裝必要的依賴項 要在 Next.js 應用程式中整合 Auth0，我們需要安裝 Auth0 的依賴項（SDK）。在專案目錄下執行以下命令安裝 SDK：
npm install @auth0/nextjs-auth0 next-auth
Step 3. 在 Next.js 專案中設定 Auth0 SDK 在 Next.js 專案中設定 Auth0 SDK 前往 /pages/ ，開啟 _app.tsx 檔案並新增以下代
// pages/_app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { UserProvider } from "@auth0/nextjs-auth0/client";
export default function App({ Component, pageProps }: AppProps) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}
Step 4. 配置 Auth0 SDK 下一步是在本地環境檔案中配置和新增一些細節，如 AUTH0_SECRET, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_BASE_URL, 和 AUTH0_ISSUER_BASE_URL 。首先，在根目錄下新建一個 .env.local 檔案，並新增以下內容：
AUTH0_SECRET=jdsbfjsdbjfbdsgfnmdsfbgfndsbfgmnbsdfgdfbggjh AUTH0_BASE_URL=http://localhost:3000 AUTH0_ISSUER_BASE_URL='https://yourdomainfromauth0.us.auth0.com' AUTH0_CLIENT_ID=add_your_client_id AUTH0_CLIENT_SECRET=add_your_client_secret
AUTH0_SECRET：這是應用程式在發出請求時用於向 Auth0 驗證身份的機密資訊。你可以在命令列中使用openssl rand -hex 32建立一個。AUTH0_BASE_URL：這是應用程式的基礎 URL。如果在 localhost 上執行專案，則為http://localhost:3000。AUTH0_ISSUER_BASE_URL：這是 Auth0 授權伺服器的發行方 URL。你可以在域設定中找到它。AUTH0_CLIENT_ID：這是 Auth0 應用程式的客戶端 ID。AUTH0_CLIENT_SECRET：Auth0 應用程式的客戶機密文。
在 Next.js 中實施身份驗證
在 Next.js 中整合 Auth0 後，讓我們建立登入和登出元件並處理使用者身份驗證狀態。
建立登入和登出元件
讓我們開始為使用身份驗證的應用程式構建使用者介面。前往 /pages/index.tsx 並新增以下程式碼：
// pages/index.tsx
import React from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
function index() {
const { user, error, isLoading } = useUser();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
if (user) {
return (
<div className="max-w-md mx-auto bg-white rounded-md overflow-hidden shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4">
Welcome, <span className="text-blue-700">{user.name}</span>!
</h2>
<p className="text-gray-600 mb-4">
You have successfully logged in using the Auth0 authentication system.
</p>
<a
className="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"
href="/api/auth/logout"
>
Logout
</a>
</div>
);
}
return (
<div className="flex flex-col gap-10 items-center p-10">
<h1 className="text-3xl font-bold">Auth0 authentication in Next.js</h1>
<a
href="/api/auth/login"
className="bg-blue-400 text-white p-4 w-20 h-14 text-center rounded-md"
>
Login
</a>
</div>
);
}
export default index;
在上面的程式碼中，我們為應用程式建立了主介面。為了獲取使用者資料，我們使用條件語句呈現登入和登出元件。如果使用者已通過身份驗證，則會顯示使用者詳細資訊，如使用者 name、資訊和 Logout 按鈕。如果沒有，使用者將看到 Login 按鈕，以便在下一個流程中進行身份驗證。最後，我們使用 Tailwind CSS 來新增樣式。
處理使用者驗證狀態
所提供的 index.tsx 檔案已經使用 useUser 鉤子處理了使用者驗證狀態。
處理身份驗證回撥
實施完成後，讓我們新增一些回撥來處理身份驗證流程。但在處理回撥或編寫任何程式碼之前，我們有必要了解我們到底要做什麼，以及身份驗證流程是如何流動的。
瞭解 Auth0 回撥的身份驗證流程
使用 Auth0 進行身份驗證涉及多個步驟，包括重定向到 Auth0 進行登入、身份驗證回撥以及處理身份驗證狀態。以下是簡要概述：
- 登入請求：當使用者啟動登入過程時，他們會被重定向到 Auth0 通用登入頁面，在那裡輸入他們的憑據。
- 驗證回撥：認證成功後，Auth0 會將使用者重定向到應用程式指定的回撥 URL（本例中為 /api/auth/callback）。回撥 URL 在 Auth0 面板中配置。
- 令牌交換：Next.js 應用程式中的回撥路由負責將從 Auth0 收到的授權程式碼與訪問令牌和身份令牌進行交換。
- 使用者身份驗證狀態：訪問令牌隨後將用於在伺服器上對使用者進行身份驗證，使用者的身份驗證狀態將通過會話來維護。
本圖展示了使用者與整合了 Auth0 的 Next.js 應用程式互動時的無縫身份驗證流程。瞭解這一流程對於更清晰地掌握 Auth0 身份驗證過程至關重要。
在 Next.js 中實現回撥路由
要實現回撥路由，請轉到 pages/api/auth/ ，建立一個名為 [auth0].ts 的檔案，並新增以下程式碼：
// pages/api/auth/[auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";
export default handleAuth();
上述檔案中包含 SDK 的 handleAuth 方法，該方法將負責所有用於處理身份驗證回撥的路由。新增上述程式碼後，SDK 將自動從 Node.js 程序環境中讀取和配置這些值。現在，應用程式已經完成，可以執行了。
執行伺服器
要預覽最終輸出，請在終端執行以下命令啟動開發伺服器：
npm run dev
在瀏覽器中訪問 http://localhost:3000，檢視您的 Next.js 應用程式。
登入前
Auth0 驗證
登入後
新增授權（可選）
讓我們為基於角色的訪問控制配置 Auth0，並根據使用者角色限制對某些路由的訪問。這一步是可選的，但如果你正在構建一個有多個成員的應用程式，你可以執行這一步。
為基於角色的訪問控制配置 Auth0
此步驟包括在 Auth0 面板中設定角色和許可權。
第 1 步：導航至 Auth0 控制面板：https://manage.auth0.com/，並使用憑據登入。
第 2 步：新增新使用者
- 點選左側選單中的 “User Management”。
- 選擇 “Users” > “+ Create User” 按鈕填寫新使用者所需資訊，如電子郵件和密碼。
- 最後，點選 “Create” 按鈕儲存新使用者。
第 3 步：建立角色
- 在 Auth0 控制面板中，進入 “User Management”，點選 “Roles” > “+ Create Role”。為角色命名，如管理員等，然後儲存。
按照上述步驟，我們可以建立多個具有不同角色和許可權的使用者。
根據使用者角色限制訪問某些路由
要限制對特定頁面的訪問，可在 @auth0/nextjs-auth0 的高階元件中使用 withPageAuthRequired 函式。只需修改 [auth0].ts 檔案如下，即可輕鬆實現這一功能：
// pages/api/auth/[auth0].ts
import { handleAuth, withPageAuthRequired } from "@auth0/nextjs-auth0";
export default handleAuth({
async callback(request, response) {
try {
await withPageAuthRequired({ roles: ['admin'] })(request, response);
} catch (err) {
res.status(err.status || 500).end(err.message);
}
},
});
通過新增上述程式碼，擁有適當許可權的使用者可以不受限制地訪問特定路由，而其他使用者則會受到限制。
小結
在本文中，我們瞭解瞭如何使用 Auth0 對 Next.js 應用程式進行身份驗證。我們看到了將 Auth0 服務整合到應用程式中的逐步實現過程，以及如何在 Next 應用程式中處理路由回撥。通過利用 Auth0 身份驗證系統的強大功能，您可以為使用者提供無縫體驗。
評論留言