--- theme: cyanosis highlight: atom-one-dark --- # 背景后面打算自己做一个独立产品，产品需要用到服务端渲染，而我比较擅长React，所以最近在学Next14。刚开始学的时候，因为自己英文不好，中文文档又特别少，踩了不少坑。后面买了冴羽大佬的[Next小册](https://s.juejin.cn/ds/iLprNe6G/)跟着学习，很快就上手了，小册质量很高，个人觉得很适合新手入门。学完之后肯定是要实战的，这样才能把知识转化为自己的东西。所以使用next-auth库实现Github、Google、Gitee平台授权登录和账号密码登录来练练手，实现的过程中，也遇到了一些坑，下面给大家分享一下。 # 题外话我前面有篇文章说tRPC和Next开发全栈应用很爽，那是我没用过Next的server action，在我写完这个登录demo后，才发现server action太香了，个人感觉tRPC在做前后端分离的后台管理项目还是挺有优势的，Next14中使用tRPC有些鸡肋了，因为server action已经足够好用了。到网上搜索了一下，国外也有人讨论这个问题，这个帖子有很多人评论，大家可以看看。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/505eb83baa1f4f018206857d040a7882~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1698&h=1376&s=333445&e=png&b=fefefe) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e977d6d25f8448ff81bcb9e44463a7cb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2390&h=1354&s=445051&e=png&b=fefefe) 原帖地址：[https://www.reddit.com/r/nextjs/comments/16foyg1/why_use_trpc_procedures_as_server_actions_in](https://www.reddit.com/r/nextjs/comments/16foyg1/why_use_trpc_procedures_as_server_actions_in/) 需要挂代理才能访问 # 创建Next项目使用下面命令创建项目，全部使用默认选项就行了。 ```sh npx create-next-app@latest ``` 创建成功后，使用`npm run dev`启动项目，访问[http://localhost:3000/](http://localhost:3000/)，能看到下面页面表示启动成功。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f80f9f17bbe4daa9ee2f15a6e276c7e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3454&h=1916&s=414061&e=png&b=000000) # 引入shadcn-ui ui框架使用最近很火的[shadcn-ui](https://ui.shadcn.com/docs) ```sh pnpm dlx shadcn-ui@latest init ``` ```sh ✔ Which style would you like to use? › New York ✔ Which color would you like to use as base color? › Stone ✔ Would you like to use CSS variables for colors? … no / yes ``` 引入Button组件测试一下 ```sh pnpm dlx shadcn-ui@latest add button ``` 改造app/page.tsx文件 ```tsx import { Button } from '@/components/ui/button'; export default function Home() { return (

); } ``` 如下图，显示出按钮 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf961b0ed4584f5fbcae329ea72fbef2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1002&h=478&s=16920&e=png&b=ffffff) 黑色的按钮不好看，shadch-ui支持在线自定义主题，访问[自定义主题页面](https://ui.shadcn.com/themes)，选择一个主题，然后复制代码。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f387224a9c6d49f582298a340e9e835c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3038&h=1380&s=321836&e=png&b=020817) 替换`app/global.css`中颜色变量，可以看到按钮颜色变了 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20331bc1a8114743a00d1092ef48ec63~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1168&h=912&s=122206&e=png&b=292d3e) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e873d3ad404456db2c087fef5b6c899~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=742&h=326&s=12264&e=png&b=ffffff) 在/app/component/ui目录下可以看到button组件，这就是shadcn库和别的ui库的区别，shadcn会把组件下载到本地，让使用者更方便的拓展。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9689ac68a9a649d5a2ebd53c77c9eb26~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=488&h=250&s=20743&e=png&b=292d3e) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d01498199ce45cea340969f96b81105~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=5052&h=3256&s=809429&e=png&b=292d3e) # 引入next-auth ## 安装依赖 ```sh pnpm add next-auth@5.0.0-beta.4 ``` ## 在src目录下创建auth.ts文件 ```ts // src/auth.ts import NextAuth from 'next-auth'; export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [], }); ``` ## 在`src/app`目录下创建`api/auth/[...nextauth]/route.ts`文件 ```ts // src/app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth"; export const { GET, POST } = handlers ``` # 实现github授权登录 ## 到github注册授权应用 ### 第一步 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f77130514c944790bc4cc5e071c76464~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1258&h=234&s=34642&e=png&b=f0f3f6) ### 第二步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e225f52593c4bf789ffd7473bc70fe6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=638&h=1840&s=124656&e=png&b=ffffff) ### 第三步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d9edd18736b4ee78fdccb7811ea1143~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=828&h=1572&s=135192&e=png&b=ffffff) ### 第四步 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/893ca95aa1b4414884767e8cc8b9866a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2452&h=478&s=99572&e=png&b=ffffff) ### 第五步 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa489673543d47efbbf20f11879eb651~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1450&h=1318&s=205475&e=png&b=ffffff) 因为需要本地调试回调地址先写成http://localhost:3000 和 http://localhost:3000/api/auth/callback/github ### 第六步 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d546920c29e4d14939336e5f5d8ce9e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1894&h=1108&s=171924&e=png&b=ffffff) ### 第七步 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d883b94716ad4832b2b5833091608f9a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1798&h=844&s=124616&e=png&b=fdfcfa) 记住clientId和clientSecret，马上要用。 ## 创建.env文件 ```.env AUTH_GITHUB_ID=刚才的clientId AUTH_GITHUB_SECRET=刚才的clientSecre AUTH_SECRET=用于散列令牌、签署 cookie 和生成加密密钥的随机字符串。 ``` `AUTH_SECRET`可以使用`npx auth secret`命令生成 ## 改造auth.ts文件，引入github provider ```ts // src/auth.ts import NextAuth from 'next-auth'; import Github from 'next-auth/providers/github'; export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [Github], }) ``` ## 使用form action登录github ```tsx // src/app/page.tsx import { signIn } from '@/auth'; import { Button } from '@/components/ui/button'; export default function Home() { return (

); } ``` 有些人可能使用form action的时候，会报这个错，这是因为react版本太低了，form不支持绑定函数，需要升级react版本到18.2.0，react-dom到最新版本。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/397222e1394a46f6a09c2e85aa53241a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2154&h=716&s=211463&e=png&b=2a2e3f) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b63313cd059a43c4980f6941cbedd04e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1154&h=1230&s=222192&e=png&b=282d3d) 安装完，可能还会报错，重启一下vscode就行了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3da27f9a548d48728d94d0a4e215fc30~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1210&h=584&s=82070&e=png&b=282c3c) 这里的`use server`别忘记了，不然也会报错。 ## 创建user页面 ```tsx // src/app/user/page.tsx import { auth } from '@/auth'; export default async function UserPage() { // 从session中获取登录信息 const session = await auth(); return (

{session?.user ? (

{JSON.stringify(session.user)}

) : (

未登录

)}

) } ``` ## 注意本地调试需要开代理并且还是全局代理或增强模式才能正常使用，如果没有梯子改本地hosts也可以。 ```sh sudo vi /etc/hosts ``` 把下面两行文本添加到`/etc/hosts`文件后面 20.205.243.168 api.github.com 140.82.121.3 github.com 加了这个后，不开代理也能快速访问github。如果上面两个ip也能墙了，可以访问这个[地址](https://ping.chinaz.com/github.com)，寻找那些不超时的ip ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2dd82d9c7164825a82b0a45d1da978b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2690&h=1704&s=497759&e=png&b=fcfcfc) ## 效果展示 ![Kapture 2024-01-29 at 22.10.05.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bff81673c94f405193fd49615d914fa6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1728&h=921&s=9709171&e=gif&f=356&b=fefbff) # OAuth 2.0 授权流程看完上面代码，大家是不是觉得github授权登录怎么那么简单，其实github授权登录流程还是挺复杂的，只是auth库帮我们实现了一些接口而已。 github是基于oAuth2授权登录流程，下面给大家说一下oAuth2授权登录流程。 **OAuth 2.0 授权流程一般包括以下步骤：** 1. 用户访问应用：用户尝试登录或使用需要授权的应用。 2. 应用请求授权：应用将用户重定向到授权服务器，并附带以下信息：客户端 ID（识别应用）、重定向 URI（成功授权后返回的地址）、响应类型（通常为 "code"，表示使用授权码流程）、范围（应用要求的权限列表）。 3. 用户登录并认证：在授权服务器上，用户会被要求登录并确认应用请求的权限。 4. 用户授权应用：用户在授权服务器上同意授予应用权限。 5. 应用接收授权码：授权服务器将用户重定向回应用，同时在查询字符串中附带授权码。 6. 应用请求访问令牌：应用通过后台服务向授权服务器发送包含授权码的请求，以换取访问令牌。同时还需要提供客户端 ID 和客户端密钥。 7. 应用接收访问令牌：授权服务器验证请求后，如果一切符合要求，就会发送访问令牌回应用。 8. 应用使用访问令牌来访问保护资源：具有访问令牌的应用可以调用 API，访问用户数据或执行其他操作。 **下面以github授权为例，给大家看一下具体授权过程** 1. 当前用户点击github登录按钮时，会跳转到https://github.com/login/oauth/authorize 地址，并在query上携带下面参数 ```json { // 需要获取的信息，这里是用户信息和邮箱 scope: "read:user user:email", // 设置返回的数据是code response_type: "code", // 在github上申请的client_id client_id: "XXXXXXX", // 客户端生成的一种随机值（如一个随机字符串），通常在向授权服务器发出授权请求时发送。该值在转换前和转换后都需要保存，因为在后续的令牌交换过程中需要使用。主要用来防止授权码被截获并利用。 code_challenge: "XXXXXXX", // 这是对 `code_challenge` 进行转换的方法，可以是 "plain" 或 "S256" // "plain": 对应的 `code_challenge` 就是原始的随机字符串。 // "S256": 对应的 `code_challenge` 是原始随机字符串进行 SHA256 散列并进行 URL 安全的 Base64 编码后的结果。 code_challenge_method: "plain", // 授权完成后，重定向地址 redirect_uri: "http://localhost:3000/api/auth/callback/github" } ``` 2. 上一步授权成功后，会重定向上面配置的地址http://localhost:3000/api/auth/callback/github?code=8d4691082f7956265a78 ，并带上code。 3. http://localhost:3000/api/auth/callback/github 接口里拿到code，调用github的 https://github.com/login/oauth/access_token 接口获取token。 ```json // 客户端的 ID client_id："XXXXX" // 客户端的密钥 client_secret："XXXX", // 授权码 code："8d4691082f7956265a78", // 前面code_challenge没加密前的随机字符串 code_verifier: 'XXXXX' ``` 4. 上一步拿到token后，调用https://api.github.com/user 接口获取用户信息，把上一步获取到的token放到请求头里。基于上面流程，我用koa库实现了一下。 ```js const Koa = require('koa'); const Router = require('koa-router'); const axios = require('axios'); const crypto = require('crypto'); const app = new Koa(); const router = new Router(); // 你的 GitHub OAuth 应用配置 const CLIENT_ID = 'XXXX'; const CLIENT_SECRET = 'XXXX'; const redirect_uri = `http://localhost:3000/api/auth/callback/github`; function generateRandomString() { return crypto.randomBytes(64).toString('hex'); } function sha256(buffer) { return crypto.createHash('sha256').update(buffer).digest(); } function base64URLEncode(str) { return str.toString('base64') .replace(/\+/g, '-') .replace(/\//g, '_') .replace(/=/g, ''); } router.get('/login', ctx => { const code_verifier = generateRandomString(); const code_challenge = base64URLEncode(sha256(code_verifier)); ctx.cookies.set('code_verifier', code_verifier); const dataStr = (new Date()).valueOf(); var path = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=user&state=${dataStr}&redirect_uri=${redirect_uri}&code_challenge=${code_challenge}&code_challenge_method=S256`; ctx.redirect(path); }); router.get('/api/auth/callback/github', async ctx => { const code = ctx.query.code; const code_verifier = ctx.cookies.get('code_verifier'); const params = { client_id: CLIENT_ID, client_secret: CLIENT_SECRET, code: code, code_verifier: code_verifier }; let res = await axios.post('https://github.com/login/oauth/access_token', params); console.log(res ,'res'); const access_token = decodeURIComponent(res.data.split('&')[0].split('=')[1]); res = await axios({ url: 'https://api.github.com/user', headers: { Authorization: `Bearer ${access_token}` }, method: 'POST', }); ctx.body = res.data; }) app.use(router.routes()); app.listen(3000); ``` # Google登录 ## 创建google应用 ### 第一步访问[https://console.cloud.google.com/welcome](https://console.cloud.google.com/welcome) 地址，创建项目 ### 第二步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a06e630c7aa148d79fe42666e42066a9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3454&h=1158&s=235178&e=png&b=cbcbcb) ### 第三步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/970bb4b21f664a22af929434bff1eda0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3332&h=1406&s=233329&e=png&b=ffffff) ### 第四步 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c76d1f173cce4ae0ba78b3cf36cb470f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3404&h=1100&s=345792&e=png&b=fefefe) ### 第五步 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4ed18a03b2b44cb96d02b7c9e584235~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1194&h=1274&s=215112&e=png&b=fefefe) ### 第六步 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/327236a4908d4abd8909d03c90c7ed7c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3454&h=904&s=179988&e=png&b=fcfcfc) ### 第七步 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d6074dbf0874a438a46451fd48b58b5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1190&h=612&s=114807&e=png&b=fdfdfd) ### 第八步 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76d362b5baca48509a5e6f1a53c39295~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1406&h=1430&s=181107&e=png&b=fefefe) ### 第九步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1960b15043241b2a16a0a8878c155d1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1376&h=900&s=120981&e=png&b=f2f2f2) ### 第十步把自己的账号添加为测试人员 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c985ac95988941338ca63fc2baca5ba6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2642&h=1392&s=214649&e=png&b=fefefe) ## 在.env文件中添加环境变量 ``` GOOGLE_CLIENT_ID=上面CLIENT_ID GOOGLE_CLIENT_SECRET=上面CLIENT_SECRET ``` ## 改造auth.ts文件，添加google provider ```ts import NextAuth from 'next-auth'; import Github from 'next-auth/providers/github'; import Google from 'next-auth/providers/google'; export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [ Github, Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }) ], }) ``` ## 添加google登录按钮 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f413bacfe97740c2aa13daaf6d48aaa6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1222&h=466&s=77102&e=png&b=292d3e) ## 效果展示 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aaa3d6424c194393b242d915f9e09551~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1618&h=1380&s=128253&e=png&b=ffffff) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b96b203c16249dabb4ca2e92cec37fe~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1242&h=1250&s=113509&e=png&b=ffffff) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/590932302a8c4edab778ff2c36baeb76~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2514&h=140&s=45657&e=png&b=fdfdfd) ## 注意这个必须要开全局代理才能使用，配置hosts不行，我试了很多ip都不行，有知道可以用的ip，评论区可以告知一下。 # gitee授权登录 ## 创建gitee授权应用 ### 第一步 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f15928a5ed9412595014dc864aa2ecb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=484&h=1170&s=123355&e=png&b=374151) ### 第二步 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be666a4e0c4c4e5d90df7f8ac3d7defc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=706&h=1494&s=101931&e=png&b=fefefe) ### 第三步 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3e8a8a088b8464bad20af975aabc9d7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2080&h=392&s=47029&e=png&b=ffffff) ### 第四步 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c75f001013534eff9ecafaa2734b4000~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2140&h=1448&s=167825&e=png&b=ffffff) ### 第五步 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17d29f991b7b43ef89969cb5cae3c692~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1752&h=422&s=59312&e=png&b=fbfbfb) ## 配置.env ```env GITEE_CLIENT_ID=上面的CLIENT_ID GITEE_CLIENT_SECRET=上面的CLIENT_SECRET ``` ## 自定义gitee prvider auth是不支持gitee的，需要我们自定义provider，gitee授权登录使用的是标准的oAuth2协议，所以我们把github的provider复制出来改一下就行了。 ```ts // src/providers/gitee.ts /** * @module providers/gitee */ export default function Gitee( config: any ): any { const baseUrl = 'https://gitee.com'; const apiBaseUrl = 'https://gitee.com/api/v5'; return { id: "gitee", name: "Gitee", type: "oauth", authorization: { url: `${baseUrl}/oauth/authorize`, params: { scope: '' }, }, token: { url: `${baseUrl}/oauth/token`, params: { grant_type: 'authorization_code', } }, userinfo: { url: `${apiBaseUrl}/user`, async request({ tokens, provider }: any) { const profile = await fetch(provider.userinfo?.url as URL, { headers: { Authorization: `Bearer ${tokens.access_token}`, "User-Agent": "authjs", }, }).then(async (res) => await res.json()) if (!profile.email) { const res = await fetch(`${apiBaseUrl}/user/emails`, { headers: { Authorization: `Bearer ${tokens.access_token}`, "User-Agent": "authjs", }, }) if (res.ok) { const emails: any[] = await res.json() profile.email = (emails.find((e) => e.primary) ?? emails[0]).email } } return profile }, }, profile(profile: any) { return { id: profile.id.toString(), name: profile.name ?? profile.login, email: profile.email, image: profile.avatar_url, } }, options: config, } } ``` ## 改造auth.ts文件，引入gitee provider ```ts import NextAuth from 'next-auth'; import Github from 'next-auth/providers/github'; import Google from 'next-auth/providers/google'; import Gitee from './providers/gitee'; export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [ Github, Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, }), Gitee({ clientId: process.env.GITEE_CLIENT_ID, clientSecret: process.env.GITEE_CLIENT_SECRET, }), ], }) ``` ## 添加gitee登录按钮 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a3a30a7ffa24eb3b6d2dfdb51018eb8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1196&h=484&s=78640&e=png&b=282c3c) ## 效果演示点击gitee登录，可以正常获取gitee用户信息 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c06b560a0cb7481caa2e1d316e7c8c12~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1712&h=76&s=24842&e=png&b=f5f5f5) ## 注意 gitee因为是国内的，不要开代理也可以正常使用。 # 引入prisma，把用户登录信息持久化到数据库上面我们实现了授权登录，但是哪些用户登录了，我们并不知道，所以需要把用户信息持久话到数据库中。数据库我这边使用mysql，数据库操作库使用prisma。 ## 安装mysql 我本地使用Docker Desktop启动mysql服务。具体教程可以看下我以前的[文章](https://juejin.cn/post/7236736926639554615#heading-7)。 ## 安装prisma [prisma](https://www.prisma.io/)也是最近比较热门的一个orm库，主要数据库迁移比较简单，使用也比较简单。当然你也可以使用其他orm库，auth.js主流orm库都支持。 ### 安装依赖 ```sh pnpm add prisma -D pnpm add @auth/prisma-adapter ``` ### 生成prisma配置 ```sh npx prisma init --datasource-provider mysql ``` ### 修改.env文件，设置数据库连接 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804005b0792040df81256dcb62a7832d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1348&h=176&s=31861&e=png&b=262a3a) ### 设置auth需要的模型把下面模型配置复制到`prisma/schema.prisma`文件中 ```prisma generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = env("DATABASE_URL") } model Account { id String @id @default(cuid()) userId String type String provider String providerAccountId String refresh_token String? @db.Text access_token String? @db.Text expires_at Int? token_type String? scope String? id_token String? @db.Text session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(cuid()) sessionToken String @unique userId String expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model User { id String @id @default(cuid()) name String? email String? @unique emailVerified DateTime? image String? accounts Account[] sessions Session[] } model VerificationToken { identifier String token String @unique expires DateTime @@unique([identifier, token]) } ``` ### 把模型生成到数据库中 ```sh npx prisma migrate dev --name init ``` ### 生成prisma客户端 ```sh npx prisma generate ``` ### 改造auth.ts文件，引入适配器 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e51f47521a543b2b6a9bd8e3fe93571~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1426&h=1276&s=268882&e=png&b=292d3e) ```ts // src/auth.ts import { PrismaAdapter } from '@auth/prisma-adapter'; import { PrismaClient } from '@prisma/client'; import NextAuth from 'next-auth'; import Github from 'next-auth/providers/github'; import Google from 'next-auth/providers/google'; import Gitee from './providers/gitee'; const prisma = new PrismaClient(); export const { handlers, auth, signIn, signOut } = NextAuth({ adapter: PrismaAdapter(prisma), providers: [ Github, Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, }), Gitee({ clientId: process.env.GITEE_CLIENT_ID, clientSecret: process.env.GITEE_CLIENT_SECRET, }), ], }) ``` 这里如果引入`@prisma/client`报错，重新执行一下`npx prisma generate`，执行完如果还报错，重启一下vscode。 ### 测试一下使用google授权登录一下，使用`npx prisma studio`命令启动一个数据库客户端，可以在线查看数据库表数据，也可以使用数据库连接工具查看。因为刚才登录了一下，已经有了一条数据。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e42f7eaf686b4d5f8b8c0edc757f9418~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2774&h=388&s=83191&e=png&b=ffffff) 这里注意一下，如果没有退出登录，直接在用gitee登录一下，即使两个邮箱不一样，也不会生成两个用户，而是给当前用户添加一个账号。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f7ff35d8a4f4b559e9a3daa3c73895e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2882&h=260&s=80679&e=png&b=ffffff) 我没退出登录又登录了一次gitee，就变成这样了，下面我们实现一下退出登录功能。 # 实现退出登录改造/user/page.tsx，添加退出登录功能 ```tsx // src/app/user/page.tsx import { auth, signOut } from '@/auth'; import { Button } from '@/components/ui/button'; export default async function UserPage() { // 从session中获取登录信息 const session = await auth(); return (

{session?.user ? ( <>

{JSON.stringify(session.user)}

) : (

未登录

)}

) } ``` 登录完github，然后退出登录，登录gitee，这时候就会生成两条用户数据了。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e496b5ceed545d780b55d3fb9b1ecc2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2744&h=480&s=118286&e=png&b=ffffff) # 自定义session数据 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0fac86f6bde40cdbfe0db0d8038af98~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1972&h=168&s=38172&e=png&b=fefefe) 可以看到从session中取出来的用户信息没有id，但是前端很多地方可能需要用到用户id，这就需要自定义session返回数据了。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ae46e927d6347899fc162f43e1c85b8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1000&h=870&s=127657&e=png&b=292d3e) 改造auth.ts文件，先设置生成session策略为jwt，然后再callbacks中添加jwt和session方法，在session方法中可以自定义session里的内容。这里有个坑，网上很多教程是这样写的。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7b25095b1944520892ade24881c010f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=888&h=330&s=50470&e=png&b=272b3b) 我试了一下，user一直是空，根本没法用，可以从token的sub字段中取到useId。再次登录一下，发现id正常返回了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7b28701fe0c48fa892c2779b3b9f864~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2376&h=214&s=48248&e=png&b=fefefe) # 处理登录异常情况授权登录如果有报错，系统会默认重定向到`/api/auth/signin`内置页面，我们想重定向自己的页面，可以在auth.ts中配置。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16a2aeb2bb8a4d10902df90eb21135c5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1428&h=580&s=99638&e=png&b=292d3e) 我现在使用google授权登录，因为邮箱和github是同一个，而用户邮箱不能重复，所以会报错，报错后会重定向到首页，并带上错误码。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4c9bf58e6ea4b30a6fa41ccf409f00c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=766&h=98&s=18953&e=png&b=f3f7fc) 服务端组件中可以直接从`searchParams`取url上的参数，错误码对应的错误详细信息可以到[官网查看](https://authjs.dev/reference/core/errors#oauthaccountnotlinked) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d518f1c6e2f440bbc02383c0264c6ed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1768&h=990&s=191583&e=png&b=292d3e) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/450e7f02560347db8e973912b7fc0f4d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3376&h=1054&s=89676&e=png&b=ffffff) # 实现邮箱密码登录 ## 登录页面 shadcn-ui有form组件，不过需要配合zod和react-hook-form一起使用。 ### 安装form和input组件 ```sh npx shadcn-ui@latest add form input ``` ### 安装react-hook-form和zod ```sh pnpm add react-hook-form zod ``` ### 代码实现在app文件夹下创建auth文件夹，后面登录相关的页面都放在这个文件夹下。在auth文件夹下创建`login/page.tsx`文件，再把下面代码复制进去，下面代码是shadcn提供的实例代码。 ```tsx "use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" const formSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), }) export default function LoginPage() { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { username: "", }, }) // 2. Define a submit handler. function onSubmit(values: z.infer) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values) } return (

) } ``` 访问http://localhost:3000/auth/login ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca0c98332e994cb4be6191e16f6bf8f1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1514&h=1332&s=61215&e=png&b=ffffff) ### 改造页面前几天看到一个炫酷的登录页面，我在码上掘金上实现了一下，大家可以看看效果。 [jcode](https://code.juejin.cn/pen/7329701161052602405) 把这个引入到项目中，并封装成组件 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5556e43bfe1d48cf9486de2ce86cecdb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=440&h=462&s=36519&e=png&b=282c3d) ```tsx // src/components/colorful-card/index.tsx import React from 'react'; import './index.css'; export default function ColorfulCard({ children }: { children: React.ReactElement }) { return (

{children}

) } ``` // src/components/colorful-card/index.css ```css .colorful { position: relative; } .colorful .box { border-radius: 8px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .colorful .box::before { content: ''; position: absolute; top: -50%; left: -50%; bottom: 50%; right: 50%; transform-origin: bottom right; background: linear-gradient(0deg, transparent, #6960EC, #6960EC); animation: animate 6s linear infinite; } .colorful .box::after { content: ''; position: absolute; top: -50%; left: -50%; bottom: 50%; right: 50%; background: linear-gradient(0deg, transparent, #6960EC, #6960EC); transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -3s; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .colorful .box-mask { position: absolute; z-index: 10; inset: 3px; border-radius: 8px; } .colorful .content { border-radius: 8px; position: relative; z-index: 11; margin: 3px; } ``` 因为这个适合在暗色主题，所以我们给主题切换成暗色，创建`theme-provider.tsx`，需要先安装`next-themes` ```sh pnpm add next-themes ``` ```tsx // src/components/providers/theme-provider.tsx "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import { type ThemeProviderProps } from "next-themes/dist/types" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } ``` 改造layout.tsx文件，设置主题为dark。 ```tsx import { ThemeProvider } from '@/components/providers/theme-provider'; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` 启动项目，控制台会有报错 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67994e18aa594a6aa22a531ad9437bb8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2556&h=516&s=418906&e=png&b=fceded) 给html添加这个属性就行了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14260762c10841c7ae4ce4949a9bd983~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1058&h=762&s=124615&e=png&b=282d3d) 改造auth/login/page.tsx代码，把上面写的`ColorfulCard`组件引入进去 ```tsx "use client" import { IconGiteefillround } from '@/assets/icons/gitee-fill-round' import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { Separator } from '@/components/ui/separator' import { GithubOutlined, GoogleOutlined } from '@ant-design/icons' import Link from 'next/link' import ColorfulCard from '@/components/colorful-card' const loginFormSchema = z.object({ email: z.string().email({ message: "无效的邮箱格式", }), password: z.string().min(1, { message: "不能为空", }), }) export type loginFormSchemaType = z.infer; export default function LoginPage() { const form = useForm({ resolver: zodResolver(loginFormSchema), defaultValues: { email: '', password: '', } }) async function onSubmit(values: loginFormSchemaType) { console.log(values); } return (

) } ``` 这里图标使用的是antd的，也可以使用我以前写的[插件](https://juejin.cn/post/7223586612928086076)使用iconfont里的图标。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d69deb31cae54464b4a489a72f49081c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3414&h=1628&s=165460&e=png&b=23242a) 颜色搭配不太好，修改一下按钮和input组件的颜色，可以修改global.css里的颜色变量，修改dark模式下的颜色变量。 ```css .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 244 79% 65%; --primary-foreground: 222.2 47.4% 100%; --secondary: 221.2 70.2% 50%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 0 0% 40%; --ring: 244 79% 65%; } ``` 这样看起来，好看了一些 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0cf031619ed48d9836b3303d094727f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3400&h=1638&s=166783&e=png&b=23242a) ## 登录功能因为login/page.tsx是客户端组件，不能直接定义server action，所以我们单独定义一个action.ts文件放在login文件夹下。 ### 实现三方授权登录 actiont.ts实现 ```ts // src/app/auth/login/action.ts 'use server'; import { signIn } from '@/auth'; export const loginWithGithub = async () => { await signIn('github', { redirectTo: '/user', }); }; export const loginWithGoogle = async () => { await signIn('google', { redirectTo: '/user', }); }; export const loginWithGitee = async () => { await signIn('gitee', { redirectTo: '/user', }); }; ``` 按钮点击事件调用server action方法 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7b447f11f054ed5836b7049e1f6f95f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1370&h=1284&s=211773&e=png&b=292d3e) ### 实现邮箱密码登录先给用户模型添加password字段 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58581f4ea00248758c962bbb10104535~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1066&h=668&s=89249&e=png&b=282d3d) 添加完成后，执行下面命令同步到数据库 ```sh npx prisma db push npx prisma generate ``` 在action.ts中添加自定义凭证登录 ```ts ... export const loginWithCredentials = async ( credentials: LoginFormSchemaType ): Promise => { try { await signIn('credentials', { ...credentials, redirectTo: '/user', }); } catch (error) { if (error instanceof AuthError) { return { error: '用户名或密码错误', }; } // 这里一定要抛出异常，不然成功登录后不会重定向 throw error; } }; ``` 如果登录失败，我们用shadcn的Toast组件把错误消息弹出来，安装toast组件 ```sh npx shadcn-ui@latest add toast ``` 把Toaster组件放到layout.tsx中 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc681a5fccb14f28a8fe0666abfa44c4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1916&h=1646&s=325972&e=png&b=282d3d) 在表单的`onSubmit`事件中调用l`oginWithCredentials`方法，并把当前输入的邮箱和密码传过来，如果error有值说明登录失败，把错误消息弹出来。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f0f6e51397a487882a213e46f22d8b5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1364&h=1316&s=212915&e=png&b=292d3e) 改造auth.ts文件，添加`Credentials`登录，并且实现登录校。如果返回null，表示登录失败。prisma实例后面会在多个地方使用，这里给prisma单独放到一个文件里然后导出。 ```ts // src/lib/prisma.ts import { PrismaClient } from '@prisma/client'; export const prisma = new PrismaClient(); ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/694728a1a342498f9ba514cf006e492f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1470&h=1724&s=243020&e=png&b=292d3e) 如果user中没有password属性，重启一下vscode就行了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8f96630ef9f4d5b98f9034f940b5a49~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1160&h=352&s=41416&e=png&b=262a3a) 手动添加一个用户 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5900408f9bd435fb35279c3c3a9bb59~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3274&h=298&s=78435&e=png&b=fefefe) 登录失败的情况 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84e90bee33cc46c0bea820d97d146f0e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3840&h=1670&s=223896&e=png&b=23242a) 登录成功的情况 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93b0865ca14041f39483f3fd47799832~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1042&h=144&s=27927&e=png&b=23242a) ## 实现注册功能 ### 注册页面实现和登录页面差不多，只是多了个字段。要注意的是，在客户端组件中跳转路由使用`useRouter`方法。 ```tsx // src/app/auth/register/page.tsx "use client" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { zodResolver } from "@hookform/resolvers/zod" import { ReloadIcon } from '@radix-ui/react-icons' import { useForm } from "react-hook-form" import * as z from "zod" import ColorfulCard from '@/components/colorful-card' import { useToast } from '@/components/ui/use-toast' import Link from 'next/link' import { useRouter } from 'next/navigation' import { useState } from 'react' import { register } from './action' const registerFormSchema = z.object({ username: z.string().min(1, { message: "不能为空", }), password: z.string().min(1, { message: "不能为空", }), email: z.string().email({ message: "无效的邮箱格式" }), }) export type RegisterFormSchemaType = z.infer; export default function RegisterPage() { const [loading, setLoading] = useState(false); const { toast } = useToast(); const router = useRouter(); const form = useForm({ resolver: zodResolver(registerFormSchema), defaultValues: { email: '', username: '', password: '', }, }) // 2. Define a submit handler. async function onSubmit(values: RegisterFormSchemaType) { setLoading(true); const result = await register(values); if (result?.error) { toast({ title: '注册失败', description: result.error, variant: 'destructive', }); } else { // 注册成功，跳到登录页面 router.push('/auth/login'); } setLoading(false); } return (

注册

( 用户名 )} /> ( 邮箱 )} /> ( 密码 )} />

) } ``` ### 实现注册方法需要安装bcrypt库，对密码进行加盐处理。 ```sh pnpm add bcrypt pnpm add @types/bcrypt -D ``` ```ts // src/app/auth/register/action.ts 'use server'; import { prisma } from '@/lib/prisma'; import bcrypt from 'bcrypt'; import { RegisterFormSchemaType } from './page'; export const register = async (data: RegisterFormSchemaType) => { const existUser = await prisma.user.findUnique({ where: { email: data.email, }, }); if (existUser) { return { error: '当前邮箱已存在！', }; } // 给密码加盐，密码明文存数据库不安全 const hashedPassword = await bcrypt.hash(data.password, 10); await prisma.user.create({ data: { name: data.username, password: hashedPassword, email: data.email, }, }); }; ``` 测试一下，可以看到密码已经加密了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7395bc33672b41a28515ed84fab93a82~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1694&h=1276&s=93290&e=png&b=25262b) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/885b0a261ebe4eaea400930f579962dc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3388&h=96&s=37634&e=png&b=ffffff) 改造登录校验方法，因为数据库中密码已经加密了，不能使用用户输入的密码直接对比。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a02bb915a5c54067831aa08e097c60d3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1224&h=294&s=37084&e=png&b=272b3b) 使用刚才注册的邮箱登录 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19c2f9bcbf9e4167b6acc2ef133bc525~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1334&h=156&s=33608&e=png&b=23242a) ## 实现邮箱验证为了验证用户注册时的邮箱是不是真实的邮箱，一般网站会在用户注册成功之后，给当前注册邮箱发送一条激活当前账号的邮件，邮件中有一个链接，用户点击链接可以激活邮箱。下面我们来实现一下这个功能。开始之前需要有一个邮箱服务器给用户发送邮箱，可以使用自己的邮箱当邮箱服务器，可以看下我[这篇文章](https://juejin.cn/post/7248219648054378554#heading-28)开启邮箱服务。 ### 安装nodemailer依赖 ```sh pnpm add nodemailer pnpm add @types/nodemailer -D ``` ### 配置邮箱环境变量在.env中添加邮箱配置 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/243d3442982640e7bedecac124e4472c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=744&h=294&s=42070&e=png&b=292d3e) MAIL_USER：表示邮箱账号 MAIL_PASS：表示上面开启服务时的密钥，不是登录密码。 ### 封装公共邮箱发送方法 ```tsx // src/lib/email.ts import * as nodemailer from 'nodemailer'; export interface MailInfo { // 目标邮箱 to: string; // 标题 subject: string; // 文本 text?: string; // 富文本，如果文本和富文本同时设置，富文本生效。 html?: string; } export const sendEmail = async (mailInfo: MailInfo) => { const transporter = nodemailer.createTransport({ host: process.env.MAIL_HOST, port: +(process.env.MAIL_PORT || 465), secure: true, auth: { user: process.env.MAIL_USER, pass: process.env.MAIL_PASS, }, }); // 定义transport对象并发送邮件 const info = await transporter.sendMail({ from: `next-auth-demo <${process.env.MAIL_USER}>`, ...mailInfo, }); return info; }; ``` ### 注册成功后，发送邮件随机token使用uuid生成的，所以需要安装uuid依赖 ```sh pnpm add uuid pnpm add @types/uuid -D ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/966102172b4746df83ff44268477ddff~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=728&h=58&s=15141&e=png&b=292d3e) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cf15096fb1b416f957aaef174f12a86~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1988&h=876&s=165491&e=png&b=292d3e) ### 添加一个注册成功后显示消息的页面注册成功后，因为需要等用户激活邮箱，所以不能直接跳转到登录页面，停留在当前页面也不太好，所以我们单独做一个页面。 ```tsx // src/app/auth/register/result/page.tsx import { IconQingzhu } from '@/assets/icons/qingzhu' import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from '@/components/ui/button' import Link from 'next/link' export default function RegisterResultPage() { return (

注册成功! 您的验证邮件已发送，请前往验证。

) } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a83c7f04299a4865b5af0b64483d9a92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1512&h=820&s=157858&e=png&b=282d3d) ### 添加激活页面用户点击激活链接，会跳转到系统中激活页面，在激活页面中拿到token，通过token拿到用户邮箱，通过用户邮箱拿到用户信息，然后把用户信息中emailVerified属性设置为当前时间，表示为已激活。 ```tsx // src/app/auth/activate/page.tsx 'use client' import { IconQingzhu } from '@/assets/icons/qingzhu' import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from '@/components/ui/button' import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons' import Link from 'next/link' import { useSearchParams } from 'next/navigation' import { useCallback, useEffect, useState } from 'react' import { activateUser } from './action' export default function ActivatePage() { const params = useSearchParams(); const token = params.get('token'); const [error, setError] = useState(''); const [success, setSucess] = useState(''); const activate = useCallback(() => { setError(''); setSucess(''); if (!token) { return; } activateUser(token).then((result) => { if (result?.error) { setError(result.error); } if (result?.success) { setSucess(result.success); } }); }, [token]) useEffect(() => { activate(); }, [activate]); if (!error && !success) { return (

激活中...

) } if (success) { return (

{success}

) } return (

{error}

) } ``` ```tsx // src/app/auth/activate/action.ts 'use server'; import { prisma } from '@/lib/prisma'; export const activateUser = async (token: string) => { const verificationToken = await prisma.verificationToken.findUnique({ where: { token, }, }); if (!verificationToken || verificationToken.expires < new Date()) { return { error: '当前连接已失效', }; } const user = await prisma.user.findUnique({ where: { email: verificationToken.identifier, }, }); if (!user) { return { error: '激活失败，请联系管理员', }; } await prisma.verificationToken.delete({ where: { token: verificationToken.token, }, }); await prisma.user.update({ where: { id: user.id, }, data: { emailVerified: new Date(), }, }); return { success: '激活成功', }; }; ``` ### 改造登录方法，用户没有激活不让登录 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52997ec60aab4e73bda23a6841792b51~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1258&h=1098&s=175855&e=png&b=282d3d) ### 效果展示注册 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d76911bf4824c5ba31f1cf368962b6d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1344&h=1258&s=89779&e=png&b=25262b) 注册完成后 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79888e4d083e4778b57614bf1e81d5a7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3454&h=354&s=51948&e=png&b=23242a) 没有激活直接登录 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e048412964c546cbb51aeb10d87902da~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2386&h=1794&s=164934&e=png&b=23242a) 收到的邮件 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9b03e83bdd14e17a508633d2c2df2be~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=798&h=352&s=52000&e=png&b=e5efe8) 激活成功 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/943f4b97a8ef4d7fa8168198ff4f7d85~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3164&h=250&s=29177&e=png&b=020817) 再次登录就可以登录成功了 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3884908f2e1240e5a312866e5d48301c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1476&h=184&s=39690&e=png&b=23242a) # 中间件 ## 需求分析上面我们实现了登录功能，现在想一下，如果用户没有登录的情况下，访问/user页面时系统给重定向到登录页面。这个需求最简单的实现方案是在user页面，判断是否登录，没有登录就给跳转到登录页面，但是以后有很多页面都需要登录才能访问，不是要写很多遍吗，所以这个需求我们使用中间件来实现。 ## 具体实现在src目录下创建`middleware.ts`文件，我开始看的有个教程说在项目根目录下创建，试了一下，根本不会执行，放到src目录下可以正常运行。 ```ts // src/middleware.ts import NextAuth from 'next-auth'; const {auth} = NextAuth({ providers: [], }); export default auth((req) => { const isLoggedIn = !!req.auth?.user; // 没有登录，并且访问的页面不是以auth开头的，则重定向到登录页 if (!isLoggedIn && !req.nextUrl.pathname.startsWith('/auth')) { return Response.redirect(new URL('/auth/login', req.nextUrl)); } else if (isLoggedIn && req.nextUrl.pathname.startsWith('/auth')) { // 已经登录并且访问的页面是以auth开头的，则重定向到用户页，不需要重新登录了 return Response.redirect(new URL('/user', req.nextUrl)); } }); // 排除掉一些接口和静态资源 export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], }; ``` 再加一个需求，当用户访问根页面时重定向到用户信息页面，这个可以在根目录下的`next.config.mjs`中配置重定向。 ```js /** @type {import('next').NextConfig} */ const nextConfig = { redirects: async () => { return [{ source: "/", destination: "/user", permanent: true, }]; }, }; export default nextConfig; ``` # 客户端组件中获取session 以前在Next Pages模式下客户端组件可以使用SessionProvider和useSession方法获取session，但是在app router模式下，不建议这样使用了，那我们就想在客户端组件中使用session怎么办，可以在服务器组件中获取session，然后把值当成属性传给客户端组件。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fc531e6c54440a3a7cf5e70eb596287~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2084&h=834&s=172200&e=png&b=090909) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f45a7d8e699f483aa4f464f57ab18b06~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2038&h=620&s=107451&e=png&b=090909) ## 服务器组件 ```tsx import { auth } from '@/auth'; import Client from './client'; export default async function TestPage() { const session = await auth(); return ( ) } ``` ## 客户端组件 ```tsx 'use client' export default function Client({ session }: { session: any }) { return (

{session?.user && (

{JSON.stringify(session.user)}

)}

) } ``` # 项目部署 ## 解决build报错问题部署之前本地先运行一下`npm run build`，build一下试试，因为有些报错`npm run dev`能正常运行，build的时候会报错。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56db6834f5b94ad0a2c02ce5404394b5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2676&h=918&s=178990&e=png&b=292d3e) 比如现在这个报错，刚才我们在开发环境能正常运行，build报错了。报错的意思是`src/app/auth/activate/page.tsx`页面中使用`useSearchParams`必须要用`Suspense`包起来。把`src/app/auth/activate/page.tsx`文件里的内容拆到另外一个文件中，然后在page文件中把ActivateClient组件用Suspense包起来。 ```tsx import { Suspense } from 'react' import ActivateClient from './client' export default function ActivatePage() { return ( ) } ``` ## docker部署我这里部署使用了github action和docker compose方案，这套部署方案细节可以看下我以前写的一篇[文章](https://juejin.cn/post/7245613765693702201)。 docker部署官方给了一个[demo仓库](https://github.com/vercel/next.js/tree/canary/examples/with-docker)，把仓库中Dockerfile复制到本地，在build前添加一行生成prisma客户端，其他都不用改。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4823320d130c4addbd74ef281ada3a90~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=794&h=244&s=32840&e=png&b=292d3e) 然后修改`next.config.mjs`配置文件 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abc8be5b394f4478be8328e0096f6961~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=762&s=117275&e=png&b=282d3d) 在项目根目录下创建`.github/workflows/docker-publish.yml`文件 ```yml name: Docker # This workflow uses actions that are not certified by GitHub. # They are provided by a third-party and are governed by # separate terms of service, privacy policy, and support # documentation. on: push: branches: ['main'] # Publish semver tags as releases. tags: ['v*.*.*'] env: REGISTRY: ghcr.io IMAGE_NAME: ${{ github.repository }} jobs: build: runs-on: ubuntu-latest permissions: contents: read packages: write # This is used to complete the identity challenge # with sigstore/fulcio when running outside of PRs. id-token: write steps: - name: Checkout repository uses: actions/checkout@v3 # Workaround: https://github.com/docker/build-push-action/issues/461 - name: Setup Docker buildx uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf - name: Cache Docker layers uses: actions/cache@v2 with: path: /tmp/.buildx-cache key: ${{ runner.os }}-buildx-${{ github.sha }} restore-keys: | ${{ runner.os }}-buildx- # Login against a Docker registry except on PR # https://github.com/docker/login-action - name: Log into registry ${{ env.REGISTRY }} if: github.event_name != 'pull_request' uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c with: registry: ${{ env.REGISTRY }} username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} # Extract metadata (tags, labels) for Docker # https://github.com/docker/metadata-action - name: Extract Docker metadata id: meta uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38 with: images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} # Build and push Docker image with Buildx (don't push on PR) # https://github.com/d˜ocker/build-push-action - name: Build and push Docker image id: build-and-push uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc with: context: . push: ${{ github.event_name != 'pull_request' }} tags: ${{ steps.meta.outputs.tags }} labels: ${{ steps.meta.outputs.labels }} cache-from: type=local,src=/tmp/.buildx-cache cache-to: type=local,dest=/tmp/.buildx-cache-new - name: Move cache run: | rm -rf /tmp/.buildx-cache mv /tmp/.buildx-cache-new /tmp/.buildx-cache ``` 因为.env文件存放我们的密钥信息，所以把这个文件忽略掉，不要上传到仓库。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f60bc0874d9442e8813d983cdbaefcb0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=266&h=112&s=7229&e=png&b=292d3e) 在根目录添加.env.production文件，配置服务的域名，线上环境授权登录不能使用ip和端口号，必须使用域名。 ```env AUTH_URL=https://auth.fluxyadmin.cn ``` 服务器上使用docker-compose部署，docker-compose文件如下 ```yml version: '3.7' services: auth: image: ghcr.io/dbfu/next-auth-demo:main container_name: next restart: unless-stopped environment: DATABASE_URL: AUTH_GITHUB_ID: AUTH_GITHUB_SECRET: AUTH_SECRET: GOOGLE_CLIENT_ID: GOOGLE_CLIENT_SECRET: GITEE_CLIENT_ID: GITEE_CLIENT_SECRET: MAIL_HOST: MAIL_PORT: MAIL_USER: MAIL_PASS: networks: - app_subnet ports: - 5001:5001 extra_hosts: - "github.com:140.82.121.3" - "api.github.com:20.205.243.168" ``` 把本地的环境变量复制到docker-componse文件中。因为我的云服务器是腾讯云，国内云服务是不能访问github的，所以需要配置hosts。国内服务器没办法访问google，所以没办法使用google授权登录。除非给服务器开梯子，或者买国外服务器。 ## 更改授权登录地址前面我们授权地址配的是本地地址，服务发布成功后，把地址改成域名。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95cdf3ec9dc649feb50168b3ecad73dc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1538&h=842&s=144771&e=png&b=ffffff) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/278d06c9f89c401cbdc3a2d85a231dca~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2036&h=372&s=46544&e=png&b=ffffff) # 最后到此，从开发到部署整个流程结束了，大家可以使用下面地址去体验一下，不支持google登录。 demo体验地址：[https://auth.fluxyadmin.cn/auth/login](https://auth.fluxyadmin.cn/auth/login) 仓库地址：[https://github.com/dbfu/next-auth-demo](https://github.com/dbfu/next-auth-demo) 下篇准备分享一个next实战项目，敬请期待。