Modelo de projeto de autenticação

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.

Ao criar Ignite UI for Angular projeto com Angular Schematics ou Ignite UI CLI, você pode selecionar um modelo com uma implementação básica de um módulo de autenticação do lado do cliente que requer o mínimo de configuração adicional possível para iniciar aplicativos com gerenciamento de usuários.

Create Authentication Project

Você pode selecionar um projeto de autenticação ao passar pela experiência passo a passo após a seleção 'Ignite UI for Angular' tipo de projeto:

Ou através do novo comando:

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

Se você estiver usando a coleção Esquemas, execute:

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

Description

Este modelo se baseia no padrão de navegação lateral e adiciona uma página de perfil e uma seção de login à barra de navegação do aplicativo que exibirá um botão de login ou um avatar do usuário conectado:

A barra de login também integra caixas de diálogo para entrar ou sair:

O projeto também oferece suporte a vários provedores de autenticação 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

Espera-se que todos os pontos de extremidade retornem um JSON Wen Token (JWT) ou um estado de erro com mensagem.

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 acontece com qualquer modelo de autenticação, o uso do JWT-s requer considerações de segurança. Particularmente, os tokens recebidos da API REST são armazenados no cliente. Para recarregamentos contínuos de aplicativos durante o desenvolvimento, os dados do usuário são armazenados no armazenamento local do navegador, que é potencialmente vulnerável a ataques XSS.

Nota: Desative o armazenamento local antes da produção. Considere manter tokens na memória somente se os requisitos do aplicativo permitirem ou seguirem uma rota alternativa para protegê-los. O uso de cookies (considere a proteção CSRF) é uma alternativa, também dividindo a assinatura do token ou uma "impressão digital" adicional em um cookie protegido.

Como de costume, sempre avalie os aspectos de segurança e ajuste de acordo, a estrutura do projeto fornecida é apenas um ponto de partida.

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 habilitar o login do usuário com um provedor de terceiros específico, tudo o que é necessário é descomentar a linha específica e substituir o '' pelo ID do cliente do seu aplicativo. Se você precisar obter um, por exemplo, para fazer login na Conta do Google, siga o guia específico do provedor em:

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

Isso ativará automaticamente o respectivo botão na caixa de diálogo de login:

Você pode fazer o mesmo com a Microsoft seguindo este guia:

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

E para o Facebook:

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

À medida que você habilita os provedores, todos os botões se tornam ativos:

Provider details

Aqui estão os provedores padrão com os quais o modelo de projeto vem:

Provedor	Usa	URL de redirecionamento
Pesquise no Google	OpenID Connect*	`<app root>/redirect-google`
Microsoft	OpenID Connect*	`<app root>/redirect-microsoft`
Linkedin	Conexão com o 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.

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

** Funcionalidade do Facebook Connect implementada usando o Facebook JS SDK