Next.js 与 WordPress 的身份验证鉴权

东明兄 2022-12-13
0条评论 298 次浏览
东明兄 2022-12-130条评论 298 次浏览

默认情况下,Next.js 将使用来自 WordPress 站点的公开文章,无法拿到未发布的帖子和私有字段等私有内容。要访问未发布的帖子,需要做鉴权身份验证。

默认情况下,Next.js 将使用来自 WordPress 站点的公开文章,无法拿到未发布的帖子和私有字段等私有内容。要访问未发布的帖子,需要做鉴权身份验证。

首先需要安装 WPGraphQL JWT 插件,下载最新版的 release 即可,地址:https://github.com/wp-graphql/wp-graphql-jwt-authentication/releases

在 WordPress 后台 安装插件

打开 wordpress 站点根目录的 wp-config.php,搜索 AUTH_KEY 关键词,在下方加一行插件使用的 key

define('GRAPHQL_JWT_AUTH_SECRET_KEY',       '随机字符串');

这里的随机字符串越复杂越好,让它独一无二,可以直接访问 https://api.wordpress.org/secret-key/1.1/salt/ 获取到 WordPress 提供的随机密钥,任意取一个密钥值拿来用就好,刷新页面可以刷新密钥。

打开 GraphQL 编辑器,粘入下方查询语句,将 your_username 和 your_password 替换为具有 WordPress 管理权限账号的用户和密码:

mutation Login {
login(
input: {
clientMutationId: "uniqueId"
password: "your_password"
username: "your_username"
}
) {
refreshToken
}
}

点击查询,再返回的结果中复制出 refreshToken 。

打开 Next.js 项目根目录的 .env.local 文件,将复制的 refreshToken 粘贴给WORDPRESS_AUTH_REFRESH_TOKEN,WORDPRESS_PREVIEW_SECRET 填写任意字符串就好。

填写好后大概是这样的:

WORDPRESS_API_URL=https://x.com/test
WORDPRESS_AUTH_REFRESH_TOKEN=iOjE3MDI0MDI4MTAsImRhdGEiOnsidXNlciI6e
WORDPRESS_PREVIEW_SECRET=qwertyuiop

重启 Next.js 以更新环境变量,现在我们就可以去查询一些需要鉴权才能拿到的信息了。

参考:https://github.com/vercel/next.js/blob/canary/examples/cms-wordpress/README.md

本文通过 YUQUE WORDPRESS 同步自语雀

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注