Next.js

nextjs-auth є прикладом інтеграції casdoor у проект next-js. Ми проведемо вас через наступні кроки.

Крок 1: Розгортання Casdoor

Спочатку Casdoor потрібно розгорнути.

Ви можете звернутися до офіційної документації Casdoor для Встановлення сервера. Будь ласка, розгорніть ваш екземпляр Casdoor у режимі виробництва.

Після успішного розгортання, переконайтеся в наступному:

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

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

Крок 2: Додати проміжне програмне забезпечення

Проміжне програмне забезпечення дозволяє вам виконувати код перед завершенням запиту. Тоді, на основі вхідного запиту, ви можете змінити відповідь шляхом переписування, перенаправлення, зміни заголовків запиту або відповіді, або безпосередньо відповісти.

Використовуйте файл 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	Так	URL-адреса сервера Casdoor, наприклад 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",
};

обережно

Замініть значення конфігурації на власні вашого екземпляру 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: Додати функцію аутентифікації проміжного програмного забезпечення

коли користувачі намагаються отримати доступ до захищеного маршруту, функція аутентифікації проміжного програмного забезпечення перевіряє їхню особу. Якщо користувач не аутентифікований, його перенаправляють на сторінку входу або відмовляють у доступі.

Приклад

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