跳到主内容

Next.js

nextjs-auth是一个如何在next-js项目中集成casdoor的示例。 我们将引导您完成以下步骤。

步骤1:部署Casdoor

首先,应部署Casdoor。

您可以参考Casdoor官方文档中的服务器安装。 请在生产模式下部署您的Casdoor实例。

成功部署后,请确保以下内容:

  • 打开您最喜欢的浏览器并访问**http\://localhost:8000**。 您将看到Casdoor的登录页面。
  • 通过输入admin作为用户名和123作为密码来测试登录功能。

之后,您可以使用以下步骤在您自己的应用中快速实现基于Casdoor的登录页面。

步骤2:添加中间件

中间件允许您在请求完成之前运行代码。 然后,根据传入的请求,您可以通过重写、重定向、修改请求或响应头,或直接响应来修改响应。

使用项目根目录中的middleware.ts(或.js)文件来定义中间件。 例如,与pagesapp同级,或者在src内(如果适用)。

示例

//定义中间件将在哪些路径上运行
const protectedRoutes = ["/profile"];

export default function middleware(req) {
if (protectedRoutes.includes(req.nextUrl.pathname)) {
//将传入的请求重定向到不同的URL
return NextResponse.redirect(new URL("/login", req.url));
}
}

查看next.js官方文档middleware以获取更多详细信息。

步骤3:使用Casdoor SDK

1.安装SDK

首先,通过NPM或Yarn安装casdoor-js-sdk

npm install casdoor-js-sdk

或者:

yarn add casdoor-js-sdk

2.初始化SDK

然后按照以下顺序初始化6个字符串类型的参数:

名称必需描述
serverUrlCasdoor服务器URL,例如http://localhost:8000
clientId应用客户端ID
clientSecret应用客户端密钥
organizationName应用组织
appName应用名称
redirectPath重定向URL

示例

const sdkConfig = {
serverUrl: "https://door.casdoor.com",
clientId: "294b09fbc17f95daf2fe",
clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
organizationName: "casbin",
appName: "app-vue-python-example",
redirectPath: "/callback",
};
注意事项

用您自己的Casdoor实例替换配置值,特别是clientIdclientSecretserverUrl

3.重定向到登录页面

当您需要对访问您的应用的用户进行身份验证时,您可以发送目标URL并重定向到Casdoor提供的登录页面。

请确保您已经在应用配置中提前添加了回调URL(例如**http\://localhost:8080/callback**)。

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.获取令牌和存储

在通过Casdoor验证后,它将带着令牌重定向回您的应用程序。

您可以选择使用cookie来存储令牌。

CasdoorSDK.exchangeForAccessToken()
.then((res) => {
if (res && res.access_token) {
//Get Token
return CasdoorSDK.getUserInfo(res.access_token);
}
})
.then((res) => {
// Storage Token
Cookies.set("casdoorUser", JSON.stringify(res));
});

您可以参考Casdoor官方文档了解如何使用Casdoor SDK

步骤4:添加中间件认证功能

当用户试图访问受保护的路由时,中间件认证功能会验证他们的身份。 如果用户未经认证,他们将被重定向到登录页面或被拒绝访问。

示例

//受保护的路由
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//认证功能
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
return NextResponse.redirect(new URL("/login", req.url));
}