Next.js

nextjs-auth является примером интеграции casdoor в проект next-js. Мы проведем вас через следующие шаги.

Шаг 1: Развертывание Casdoor

Во-первых, Casdoor должен быть развернут.

Вы можете обратиться к официальной документации Casdoor для Установки сервера. Пожалуйста, разверните ваш экземпляр Casdoor в продакшн-режиме.

После успешного развертывания, убедитесь в следующем:

• Откройте ваш любимый браузер и посетите http://localhost:8000. Вы увидите страницу входа Casdoor.
• Протестируйте функционал входа, введя admin в качестве имени пользователя и 123 в качестве пароля.

После этого вы можете быстро реализовать страницу входа на основе Casdoor в своем приложении, следуя следующим шагам.

Шаг 2: Добавление промежуточного ПО (Middleware)

Промежуточное ПО позволяет вам запускать код до завершения запроса. Затем, исходя из входящего запроса, вы можете изменить ответ, переписав, перенаправив, изменив заголовки запроса или ответа, или непосредственно ответив.

Используйте файл middleware.ts (или .js) в корне вашего проекта для определения промежуточного ПО. Например, на том же уровне, что и pages или app, или внутри src, если это применимо.

Пример

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

Смотрите официальную документацию next.js middleware для получения дополнительной информации.

Шаг 3: Использование Casdoor SDK

1.Установка SDK

Сначала установите casdoor-js-sdk через NPM или Yarn:

npm install casdoor-js-sdk

Или:

yarn add casdoor-js-sdk

2.Инициализация SDK

Затем инициализируйте 6 строковых параметров в следующем порядке:

Имя	Требуется	Описание
serverUrl	Да	Casdoor Server URL, например http://localhost:8000
clientId	Да	Идентификатор клиента приложения
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",
};

осторожно

Замените значения конфигурации на свои собственные, особенно 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: Добавление функции аутентификации промежуточного ПО

Когда пользователи пытаются получить доступ к защищенному маршруту, функция аутентификации промежуточного ПО проверяет их личность. Если пользователь не аутентифицирован, его перенаправляют на страницу входа или отказывают в доступе.

Пример

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

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