No último artigo sobre IdentityServer4 construímos uma aplicação composta em duas etapas, o server foi desenvolvido em ASP.NET Core com IdentityServer4. O Client em Angular 6 com template do AdminUI e componente que implementa o OpenId Connect chamado angular-oauth2-oidc.

Neste artigo será abordado o próximo passo desse tutorial. Acessar conteúdo protegido. O usuário vai acessar conteúdo protegido pelo servidor.

Está vendo este artigo mas não acompanhou o anterior? Veja aqui: ASP.NET Core - Autenticação utilizando Angular OIDC, CoreUI e IdentityServer4.

Este artigo cobre todas as Roles do OAuth2. Para saber mais, leia o artigo sobre OAuth2.

Projeto

Neste artigo será adicionado um Resource Server ao projeto construído no artigo anterior. Veja aqui como foi: ASP.NET Core - Autenticação utilizando Angular OIDC, CoreUI e IdentityServer4

Pré-requisitos

SHOW ME THE CODE man!

Lines of code on a computer screen

Faça um clone do projeto e instale os pacotes node.

Abra a solution do projeto IdentityServer4AngularOIDC.sln. Quando carregar adicione um novo projeto ASP.NET Core Web Application na solution do tipo Api e dê o nome de ProtectedResources, conforme figuras abaixo
novo-projeto
asp.net core
api-project.

Adicione a referência do nuget IdentityServer4.AccessTokenValidation no projeto (Botão direito > Manage Nuget Packages > Browse).

Startup.cs

Altere o Startup.cs

O mais importante está na linha 33. É a configuração do Token e o caminho do IdentityServer4. O Scope dessa aplicação é apiFinanceiro. Portanto quando uma chamada Http for feita o Token deve conter permissões para o Scope apiFinanceiro.

CotacaoController

Adicione uma controller do tipo Api Controller - Empty chamada CotacaoController (Botão direito no projeto > Add > Controller). Decore a controller com o [Authorize] attribute.

E adicione o seguinte método

.

MoedasViewModel

Crie uma pasta Model na raiz do projeto. Adicione uma class chamada MoedasViewModel.cs

O resultado final estará assim

protectresourcesstructure

Projeto Server

Após a inclusão da nova api é necessário configurar o servidor OAuth2. Para isso abra o arquivo Config.cs do projeto Server.

Adicionado na linha 53 o acesso a api financeiro para Client javascript. . Foi criado um novo método que retorna um Resource Server chamado apiFinanceiro.

Abra o arquivo Startup.cs altere a configuração para

O IdentityServer4 é configurado com a api na linha 28.

Configurando o projeto

Por fim será necessário trocar a porta do projeto para 5001 e configurar para o visual studio executar os dois.

Porta 5001

No projeto ProtectedResources vá em Propriedades > Debug e altere a porta da App_Url para 5001

properties

Multiple startup

Vá nas propriedades da Solution e configure para iniciar os dois projetos.

properties-1
multiple-startup

Angular App

Abra o VSCode e carregue a folder AngularOIDC (File > Open Folder).

environment.ts

Utilizado para mapear a Url base da api. Adicione uma nova propriedade com a url da aplicação.

Cotacao

Este módulo será carregado em Lazy Load. Será responsável por exibir a cotação de moedas virtuais.

Todo o componente será criado por linha de comando. Abra terminal (CTRL + `) e digite.

Ao todo será criado cinco arquivos na pasta Views > Cotacao.

cotacao.component.html

Contém o layout do componente que será renderizado.

Layout de uma table com Bootstrap 4.

cotacao.component.ts

Esse componente contém as regras de busca das cotações.

cotacao.module.ts

É necessário fazer os imports das dependências e configurar a rota.

cotacao.service.ts

Responsável por incluir o Bearer Token e efetuar chamadas HTTP a api.

moedas.model.ts

Model que está sendo utilizado neste exemplo. Crie uma pasta chamada Shared dentro de app. Crie outra pasta chamada Model dentro da pasta Shared.
Adicione um arquivo chamado moedas.model.ts.

moedas

auth.config.ts

É necessário incluir na configuração o scope apiFinanceiro, para que este client solicite o acesso ao Server. Abra o arquivo auth.config.ts. Altere igual abaixo:

A alteração efetuada na linha 9.

Configurando a nova rota

Agora é necessário adicionar esse novo componente na aplicação. Para isso é necessário mexer no arquivo de rotas principal e adicionar um novo link no menu.

Configurando a rota

Abra o arquivo app.routing.ts vá até a linha 67 e adicione a rota cotacao para carregar o module como lazy loading.

Abra o arquivo _nav.ts e adicione uw novo item, na linha 11.

Rodando a aplicação

  • No Visual Studio rode projeto.
  • No VSCode abra o terminal (CTRL + `) e digite
npm start

Demo

Download

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

Referências