Next.js

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

步骤1：部署Casdoor

首先，应部署Casdoor。

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

成功部署后，请确保以下内容：

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

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

步骤2：添加中间件

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

使用项目根目录中的middleware.ts（或.js）文件来定义中间件。 例如，与pages或app同级，或者在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个字符串类型的参数：

名称	必需	描述
serverUrl	是	Casdoor服务器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实例替换配置值，特别是clientId，clientSecret和serverUrl。

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));
}