Modelo de projeto de autenticação

Existem múltiplas versões de um projeto (chamadas de templates de projeto) para escolher ao usar onew 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á nasrc/app/authentication pasta. Exportações notáveis incluem:

• AuthenticationModuleemauthentication.module.ts exporta todos os componentes e serviços para o módulo principal do aplicativo.
• auth.guard.tsexporta eAuthGuard você pode aplicar para rotas
• authentication-routing.module.tsConfigura rotas relacionadas ao login
• UserServiceemservices/user.service.ts mantém o estado atual do usuário
• AuthenticationServiceinservices/authentication.service.ts é usado para se comunicar com a API do backend
• ExternalAuthServiceemservices/external-auth.service.ts lida com provedores para logins de terceiros

Required configuration

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

• /login- login com nome de usuário e senha
• /register- registre-se com dados de usuário
• /extlogin- repassa informações do usuário de fontes externas

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 umservices/fake-backend.service.ts que intercepta solicitações. ABackendProvider entradaauthentication.module.ts​ ​não deve ser usada na produção. Tanto o provedor quanto o arquivo devem ser removidos quando o desenvolvimento começar.

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.

Add a third-party (social) provider

O módulosrc/app/app.module.ts principal do seu projeto deve ser gerado com o serviço de autenticação externo injetado e com 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:

• Obter credenciais

• Versão mais detalhada

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

Depois de ter seu ID (por exemplo123456789.apps.googleusercontent.com), você pode habilitar o provedor do Google para o projeto assim:

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

Onde o app está hospedado determinará a URL raiz, por exemplo, por padrão na primeira execução do app 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