JWT

＃使用NextAuth的Next.js電子郵件身份驗證 在Next.js中管理身份驗證可以有很多不同的方法。 在我的網站上，我選擇使用基於電子郵件的身份驗證和JWT令牌，通過NextAuth.js來實現，下面是我是如何做到的。 首先，你需要一個外部數據庫。你可以使用本地數據庫或者雲端數據庫。我選擇了PostgreSQL，但你可以使用任何你想要的數據庫。 假設你已經建立了一個Next.js網站。 執行npm install next-auth pg安裝NextAuth和PostgreSQL庫。 然後在你的.env文件中添加以下內容： DATABASE_URL=<輸入postgresql://數據庫的URL> EMAIL_SERVER=smtp://user:[[email protected]](/cdn-cgi/l/email-protection):465 EMAIL_FROM=你的名字 <[[email protected]](/cdn-cgi/l/email-protection)> NEXTAUTH_URL=http://localhost:3000 SECRET=密鑰 確保你添加了一個密鑰。你可以使用https://generate-secret.vercel.app/32生成。 我使用https://mailtrap.io來測試郵件，這在你設置好一切時非常方便。 創建一個具有以下內容的pages/api/auth/[...nextauth].js文件： import NextAuth from 'next-auth' import Providers from 'next-auth/providers' export default NextAuth({ providers: [ Providers.Email({ server: process.env.EMAIL_SERVER, from: process.env.EMAIL_FROM, }), ], database: process.env.DATABASE_URL, secret: process.env.SECRET, session: { jwt: true, maxAge: 30 * 24 * 60 * 60, // 30 days }, jwt: { secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnX', //在這裡使用一個隨機密鑰令牌 encryption: true, }, debug: true, }) 現在根據你的數據存取層進行配置。如果你使用Prisma ORM，可以使用以下命令安裝@next-auth/prisma-adapter：...

學習 JWT 基礎知識及如何使用它 JSON Web Token 是一種用於創建應用程式的訪問令牌的標準。 它的運作方式是，伺服器生成一個令牌，用於驗證使用者身份，並將其發送給客戶端。 客戶端將在每個後續請求中將令牌發送回伺服器，因此伺服器知道該請求來自特定身份。 這種架構在現代 Web 應用程序中非常有效，在使用者驗證之後，我們會對 REST 或 GraphQL API 執行API請求。 誰在使用 JWT 呢？以 Google 為例，如果你使用 Google APIs，你會使用 JWT。 JWT 是被加密簽名的（但不會被加密，因此在將用戶數據存儲在 JWT 中時，使用 HTTPS 是必須的），所以當我們收到它時，我們可以確信它的可信度，沒有中間人可以截取並修改它，或者無效化它所保存的數據。 儘管如此，JWT 經常因過度使用而受到批評，尤其是在可以使用更少問題的解決方案時使用它們。 你需要對該主題形成自己的觀點。我並不主張某種技術優於其他，只是展示你在手邊擁有的所有機會和工具。 它們有什麼用途？主要用於 API 認證和服務器到服務器的授權。 JWT 令牌如何生成？ 使用 Node.js 你可以通過以下代碼生成令牌的第一部分: const header = { "alg": "HS256", "typ": "JWT" } const encodedHeader = Buffer.from(JSON.stringify(header)).toString('base64') 我們設定 HMAC SHA256 作為簽名算法（JWT 支持多種算法），然後我們從這個 JSON 編碼對象創建一個緩存，並且使用 base64 編碼它。 部分的結果是 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9。 接下來我們添加 payload，我們可以使用任意類型的數據自定義它。有一些預留的鍵，包括 iss 和 exp，它們標識令牌的發行者和過期時間。...

我使用 Axios 與一個設定了 JWT 權杖的 API 進行交互。 該 API 在 cookie 中返回該令牌，我很快發現我需要在 Axios 選項中設置 withCredentials: true: import axios from 'axios' axios.post(API\_SERVER + '/login', { email, password }, { withCredentials: true }) 否則，cookie 將不會被保存。 我還需要在我發出的每個其他請求中設置它，以將 JWT 權杖發送到服務器: axios.get(API\_SERVER + '/todos', { withCredentials: true }) 現在，對於少量請求，這是可行的，但對於許多請求，您可能希望使用一個通用的配置。 您可以使用 create() 方法來創建一個新的 Axios 實例，然後在您的請求中使用它: import axios from 'axios' const instance = axios.create({ withCredentials: true }) instance.get(API\_SERVER + '/todos') 通常還會添加一個 baseURL 屬性: import axios from 'axios' const instance = axios....