Plantilla de proyecto de autenticación

There are multiple versions of a project (called project templates) to choose from when using either the new command with Ignite UI CLI, with Ignite UI for Angular Schematics or the Step by step mode using Ignite UI CLI or Ignite UI for Angular Schematics.

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

Everything related to user management is under the src/app/authentication folder. Notable exports include:

• AuthenticationModule in authentication.module.ts exports all components and services to the main app module.
• auth.guard.ts exports an AuthGuard you can apply to routes
• authentication-routing.module.ts sets up login-related routes
• UserService in services/user.service.ts keeps the current user state
• AuthenticationService in services/authentication.service.ts is used to communicate with the backend API
• ExternalAuthService in services/external-auth.service.ts handles providers for third-party logins

Required configuration

The project is setup for a single page app with REST API services, so the AuthenticationService is used to send requests to the following URLs:

• /login - login with username and password
• /register - register with user details
• /extlogin - passes along user info from external source

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

Note: For demonstration purposes the project has a services/fake-backend.service.ts that intercepts requests . The BackendProvider in authentication.module.ts should not be used in production. Both the provider and the file should be removed when development starts.

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

Your project's main module src/app/app.module.ts should be generated with the external authentication service injected and commented out initialization similar to:

// 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

Keep in mind, redirect URLs and allowed domain origins should be configured per provider to match the project. When creating the Google OAuth 2.0 client ID for development you can provide http://localhost:4200/redirect-google as the redirect URI. See redirect URLs for details.

Once you have your ID (for example 123456789.apps.googleusercontent.com) you can enable the Google provider for the project like so:

// 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

Where the app is hosted will determine the root URL, for example by default on the first app run that will be 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