Nuxt

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

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 de 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 siguiendo los siguientes pasos.

Paso 2: Añadir Middleware

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

Crea archivos .js o .ts en el directorio middleware en la raíz de tu proyecto para definir Middleware. Y los nombres de los archivos se identifican como los nombres del middleware. Por ejemplo, en nuxt-auth, creamos un archivo llamado myMiddleware.js en el directorio middleware, que puede ser referenciado como myMiddleware en otros lugares como nuxt.config.js.

Ejemplo

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

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

Para que el middleware funcione, debes añadir router en nuxt.config.js, así:

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

Consulta la documentación oficial de nuxt 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 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 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

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}