Modelo de projeto de autenticação

Há várias versões de um projeto (chamadas de modelos de projeto) para escolher ao usar o new comando com Ignite UI CLI, com Ignite UI for Angular Schematics ou o modo Passo a passo usando Ignite UI CLI ou 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

Tudo relacionado ao gerenciamento de usuários está na src/app/authentication pasta. As exportações notáveis incluem:

AuthenticationModule O In authentication.module.ts exporta todos os componentes e serviços para o módulo principal do aplicativo.
auth.guard.ts exporta e AuthGuard pode aplicar a rotas
authentication-routing.module.ts Configura rotas relacionadas ao login
UserService in services/user.service.ts mantém o estado atual do usuário
AuthenticationService in services/authentication.service.ts é usado para se comunicar com a API de back-end
ExternalAuthService em services/external-auth.service.ts lida com provedores para logons de terceiros

Required configuration

O projeto é configurado para um aplicativo de página única com serviços de API REST, portanto, o AuthenticationService é usado para enviar solicitações para as seguintes URLs:

/login- Faça login com nome de usuário e senha
/register- registre-se com detalhes de usuário
/extlogin- Transmite informações do usuário de fonte externa

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

Nota: Para fins de demonstração, o projeto possui um services/fake-backend.service.ts que intercepta solicitações . A BackendProvider entrada authentication.module.ts não deve ser usada na produção. O provedor e o arquivo devem ser removidos quando o desenvolvimento for iniciado.

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.

O módulo src/app/app.module.ts principal do seu projeto deve ser gerado com o serviço de autenticação externa injetado e uma inicialização comentada semelhante 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 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:

Lembre-se de que as URLs de redirecionamento e as origens de domínio permitidas devem ser configuradas por provedor para corresponder ao projeto. Ao criar o ID do cliente do Google OAuth 2.0 para desenvolvimento, você pode fornecer http://localhost:4200/redirect-google como o URI de redirecionamento. Consulte URLs de redirecionamento para obter detalhes.

Depois de ter seu ID (por exemplo 123456789.apps.googleusercontent.com), você pode habilitar o provedor do Google para o projeto da seguinte forma:

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

O local onde o aplicativo está hospedado determinará a URL raiz, por exemplo, por padrão, na primeira execução do aplicativo que será 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