Veja como é fácil adicionar suporte a usuários no Angular com OpenId Connect usando o SSO IdentityServer4

Designs de alto impacto para influenciadores

Ah, OAuth2, todas aquelas siglas que deixam qualquer um zonzo. Temos OpenId Connect, SAML2, Bearer, JWT, e muito mais. Mas não se preocupe, a ideia é você, desenvolvedor cansado, entregar um sistema funcionando enquanto a segurança faz seu trabalho. Ou pelo menos é o que a documentação promete.

tl;dr - Resultado final

Se você chegar até o fim, o resultado final será esse:

Pré-requisitos

Prepare-se! Para essa demo funcionar, você vai precisar de:

  • Docker
  • JP Project 3.1 (um projeto essencial)
  • angular-cli 8.3.7
  • VS Code (o editor de código)
  • node.js

SSO

Vamos usar o SSO do JPProject. Baixe, descompacte e execute docker-run.bat.

Angular

O SSO do IdentityServer4 usa OpenId Connect. O objetivo é integrar uma aplicação Angular e conseguir um bom sistema de login.

Criar a aplicação

Abra o terminal e rode esses comandos:

No VS Code, instale a biblioteca:

npm install angular-oauth2-oidc

Login Integrado

Crie uma pasta chamada core em src\app e adicione o arquivo auth-config.ts.

No app.module.ts, configure com angular-oauth2-oidc.

No app.component.ts, adicione algumas linhas:

No app.component.html, modifique a linha 351.

Remova esta linha:

    <!-- aproximadamente, linha 560 -->
    <router-outlet></router-outlet>

Configurando o SSO

No auth-config.ts, estão as configurações necessárias. Acesse o SSO http://localhost:4300 e faça login.

Configure os clients:

CampoValor
ClientIdangular-demo
NameAngular Demo
DescriptionIntegrando em 10 minutos
Client Urihttp://localhost:4200
Logout Urihttp://localhost:4200
Logo Uri (Https)https://angular.io/assets/images/logos/angular/angular.svg

Selecione a opção SPA.

jp-client

Proteger rota

Para proteger rotas, adicione o arquivo auth-guard.ts:

Nosso guard verifica tokens.

Cadastrar novo Component

Adicione o arquivo protected.component.ts:

Agora adicione rotas no app.routing.module.ts:

{ path: "protected", component: ProtectedComponent, canActivate: [ AuthGuard ] }

Testar

Vamos ver se funciona:

npm start

Se tudo der certo, verá algo assim:

Conclusão

Espero que esse guia tenha explicado como SSO funciona. Entender OAuth2 é importante, mas às vezes não temos tempo quando há prazos a cumprir.

Saiba mais sobre esses conceitos aqui.

Download

Clippy Octocat

O código do projeto está disponível no meu GitHub.