Plantilla de proyecto de autenticación

Existen múltiples versiones de un proyecto (llamadas plantillas de proyecto) para elegir cuando se utiliza elnew comando con Ignite UI CLI, con Ignite UI for Angular Esquemas o el modo paso a paso usando Ignite UI CLI o Ignite UI for Angular Esquemas.

Al crear Ignite UI for Angular proyecto 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 poner en marcha las aplicaciones con la 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 está en la carpetasrc/app/authentication. Entre las exportaciones destacadas se encuentran:

• AuthenticationModuleenauthentication.module.ts exporta todos los componentes y servicios al módulo principal de la aplicación.
• auth.guard.tsexporta yAuthGuard puedes aplicar a rutas
• authentication-routing.module.tsConfigura rutas relacionadas con el inicio de sesión
• UserServiceenservices/user.service.ts mantiene el estado actual del usuario
• AuthenticationServiceinservices/authentication.service.ts se utiliza para comunicarse con la API backend
• ExternalAuthServiceInservices/external-auth.service.ts gestiona 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 de API REST, por lo queAuthenticationService se utiliza para enviar solicitudes a las siguientes URLs:

• /login- iniciar sesión con nombre de usuario y contraseña
• /register- registrarse con los datos de usuario
• /extlogin- transmite información de usuario desde fuentes externas

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

Nota: Para fines demostrativos, el proyecto cuenta con unservices/fake-backend.service.ts que intercepta peticiones . ElBackendProvider enauthentication.module.ts debería no se usan en producción. Tanto el proveedor como el archivo deberían 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ódulosrc/app/app.module.ts principal de tu proyecto debe generarse con la inicialización del servicio de autenticación externo inyectada y comentada, 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

Ten en cuenta que las URLs de redirección y los orígenes de dominio permitidos deben configurarse por proveedor para que coincidan con el proyecto. Al crear el ID de cliente Google OAuth 2.0 para desarrollo, puedes proporcionarlohttp://localhost:4200/redirect-google como URI de redirección. Consulta las URLs de redirección para más detalles.

Una vez que tengas tu ID (por ejemplo123456789.apps.googleusercontent.com), puedes habilitar el proveedor de Google para el proyecto de la siguiente 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 app determinará la URL raíz, por ejemplo, por defecto en la primera ejecución de la app que 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