Next.js

nextjs-auth es un ejemplo de cómo integrar casdoor en un proyecto next-js. Te guiaremos a través de los siguientes pasos.

Paso 1: Desplegar Casdoor

Primero, Casdoor debe ser desplegado.

Puedes consultar la documentación oficial de Casdoor para la Instalación del Servidor. Por favor, despliega tu instancia de Casdoor en modo producción.

Después de un despliegue exitoso, asegúrate de lo siguiente:

• Abre tu navegador favorito y visita http://localhost:8000. Verás la página de inicio de sesión de Casdoor.
• Prueba la funcionalidad de inicio de sesión ingresando admin como nombre de usuario y 123 como contraseña.

Después de eso, puedes implementar rápidamente una página de inicio de sesión basada en Casdoor en tu propia aplicación utilizando los siguientes pasos.

Paso 2: Añadir Middleware

El Middleware te permite ejecutar código antes de que se complete una solicitud. Luego, basándote en la solicitud entrante, puedes modificar la respuesta reescribiendo, redirigiendo, modificando las cabeceras de la solicitud o respuesta, o respondiendo directamente.

Usa el archivo middleware.ts (o .js) en la raíz de tu proyecto para definir Middleware. Por ejemplo, al mismo nivel que pages o app, o dentro de src si es aplicable.

Ejemplo

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

Consulta la documentación oficial de next.js middleware para más detalles.

Paso 3: Usar Casdoor SDK

1.Instalar el SDK

Primero, instala casdoor-js-sdk vía NPM o Yarn:

npm install casdoor-js-sdk

O:

yarn add casdoor-js-sdk

2.Inicializar el SDK

Luego inicializa 6 parámetros de tipo cadena en el siguiente orden:

Nombre	Requerido	Descripción
serverUrl	Sí	URL del servidor de Casdoor, como http://localhost:8000
clientId	Sí	ID del cliente de la aplicación
clientSecret	Sí	Secreto del cliente de la aplicación
organizationName	Sí	Organización de la aplicación
appName	Sí	Nombre de la aplicación
redirectPath	Sí	URL redirigida

Ejemplo

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

precaución

Reemplaza los valores de configuración con los de tu propia instancia de Casdoor, especialmente el clientId, clientSecret y serverUrl.

3.Redirigir a la Página de Inicio de Sesión

Cuando necesites autenticar usuarios que acceden a tu aplicación, puedes enviar la URL objetivo y redirigir a la página de inicio de sesión proporcionada por Casdoor.

Asegúrate de haber añadido la URL de callback (por ejemplo, http://localhost:8080/callback) en la configuración de la aplicación de antemano.

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

4.Obtener Token y Almacenamiento

Después de que la verificación de Casdoor sea aprobada, redirigirá de vuelta a tu aplicación con token.

Puedes optar por usar cookie para almacenar el token.

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

Puedes consultar la documentación oficial de Casdoor para el Cómo usar Casdoor SDK.

Paso 4: Añadir Función de Autenticación de Middleware

cuando los usuarios intentan acceder a una ruta protegida, la función de Autenticación de Middleware verifica su identidad. Si el usuario no está autenticado, se le redirige a una página de inicio de sesión o se le niega el acceso.

Ejemplo

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