Plantilla de proyecto de autenticación

Hay varias versiones de un proyecto (llamadas plantillas de proyecto) para elegir cuando se usa el new comando con Ignite UI CLI, con Ignite UI for Angular Schematics o el modo paso a paso usando Ignite UI CLI o Ignite UI for Angular Schematics.

Al crear Ignite UI for Angular con Angular Schematics o Ignite UI CLI, puede seleccionar una plantilla con una implementación básica de un módulo de autenticación del lado del cliente que requiera la menor configuración adicional posible para iniciar aplicaciones con administración de usuarios.

Create Authentication Project

Puede seleccionar un proyecto de autenticación al pasar por la experiencia paso a paso después de seleccionar el tipo de proyecto 'Ignite UI for Angular':

O mediante el nuevo comando:

ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth

Si está utilizando la colección Schematics, ejecute:

ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth

Description

Esta plantilla se basa en la navegación lateral predeterminada y agrega una página de perfil y una sección de inicio de sesión a la barra de navegación de la aplicación que mostrará un botón de inicio de sesión o un avatar del usuario que inició sesión:

La barra de inicio de sesión también integra cuadros de diálogo para iniciar sesión o registrarse:

El proyecto también admite varios proveedores de autenticación externos.

In code

Todo lo relacionado con la gestión de usuarios se encuentra en la carpeta src/app/authentication. Las exportaciones notables incluyen:

• AuthenticationModule en authentication.module.ts exporta todos los componentes y servicios al módulo de aplicación principal.
• auth.guard.ts exporta un AuthGuard que puedes aplicar a las rutas
• authentication-routing.module.ts configura rutas relacionadas con el inicio de sesión
• UserService en services/user.service.ts mantiene el estado actual del usuario
• AuthenticationService en services/authentication.service.ts se utiliza para comunicarse con la API de backend
• ExternalAuthService en services/external-auth.service.ts maneja proveedores para inicios de sesión de terceros

Required configuration

El proyecto está configurado para una aplicación de una sola página con servicios API REST, por lo que AuthenticationService se utiliza para enviar solicitudes a las siguientes URL:

• /login- iniciar sesión con nombre de usuario y contraseña
• /register- registrarse con detalles de usuario
• /extlogin: transmite información del usuario desde una fuente externa

Se espera que todos los puntos finales devuelvan un JSON Wen Token (JWT) o un estado de error con un mensaje.

Nota: Para fines de demostración, el proyecto tiene services/fake-backend.service.ts que intercepta las solicitudes. El BackendProvider en authentication.module.ts​ ​no debe usarse en producción. Tanto el proveedor como el archivo deben eliminarse cuando comience el desarrollo.

Como ocurre con cualquier modelo de autenticación, el uso de JWT-s requiere consideraciones de seguridad. En particular, los tokens recibidos de la API REST se almacenan en el cliente. Para recargar la aplicación sin problemas durante el desarrollo, los datos del usuario se almacenan en el almacenamiento local del navegador, que es potencialmente vulnerable a ataques XSS.

Nota: deshabilite el almacenamiento local antes de la producción. Considere mantener los tokens en la memoria solo si los requisitos de la aplicación lo permiten o tome una ruta alternativa para protegerlos. El uso de cookies (considere la protección CSRF) es una alternativa, y también dividir la firma del token o una 'huella digital' adicional en una cookie reforzada.

Como de costumbre, evalúe siempre los aspectos de seguridad y ajústelos en consecuencia; la estructura del proyecto proporcionada es simplemente un punto de partida.

Add a third-party (social) provider

El módulo principal de su proyecto src/app/app.module.ts debe generarse con el servicio de autenticación externo inyectado y comentado con una inicialización similar a:

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    // this.externalAuthService.addGoogle('<CLIENT_ID>');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

Para permitir el inicio de sesión del usuario con un proveedor externo específico, todo lo que se requiere es quitar el comentario de la línea específica y reemplazar `` con el ID de cliente de su aplicación. Si necesita obtener uno, por ejemplo para iniciar sesión en la cuenta de Google, siga la guía específica del proveedor en:

• Obtener credenciales

• Versión más detallada

Tenga en cuenta que las URL de redireccionamiento y los orígenes de dominio permitidos deben configurarse por proveedor para que coincidan con el proyecto. Al crear el ID de cliente de Google OAuth 2.0 para el desarrollo, puede proporcionar http://localhost:4200/redirect-google como URI de redireccionamiento. Consulte las URL de redireccionamiento para obtener más detalles.

Una vez que tenga su ID (por ejemplo, 123456789.apps.googleusercontent.com), puede habilitar el proveedor de Google para el proyecto de esta manera:

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    this.externalAuthService.addGoogle('123456789.apps.googleusercontent.com');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

Esto habilitará automáticamente el botón respectivo en el cuadro de diálogo de inicio de sesión:

Puedes hacer lo mismo con Microsoft siguiendo esta guía:

https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-register-an-app

Y para Facebook:

https://developers.facebook.com/docs/apps/#register

A medida que habilite proveedores, todos los botones se activarán:

Provider details

Estos son los proveedores predeterminados con los que viene la plantilla de proyecto:

Proveedor	Usos	Redireccionar URL
Google	Conexión OpenID*	<app root>/redirect-google
microsoft	Conexión OpenID*	<app root>/redirect-microsoft
Facebook	Conexion a Facebook**	<app root>/redirect-facebook

El lugar donde esté alojada la aplicación determinará la URL raíz; por ejemplo, de forma predeterminada en la primera ejecución de la aplicación será http://localhost:4200.

* Funcionalidad OpenID Connect implementada usando https://github.com/damienbod/angular-auth-oidc-client

** Funcionalidad de Facebook Connect implementada usando Facebook JS SDK