A plataforma disponibiliza formas de integrar os dados de autenticação com aplicações de terceiros. Esta integração acontece através do compartilhamento de credenciais.
Com isso quando a plataforma abre uma tela de um sistema externo, através do menu, informações são enviadas para a tela aberta. Essas informações contém:
URL base da plataforma
Token de acesso do usuário conectado
Resumidamente, com a URL base montam-se os requests para a plataforma, sendo que em cada request deve ser enviado o token de acesso no HEADER “Authorization” (Bearer).
EM VÍDEO
SOBRE O TUTORIAL
Neste tutorial faremos um projeto FrontEnd que consome a API de usuários da plataforma, para obteção dos dados do usuário logado. O projeto será construído utilizando Angular 9 + Bootstrap 4.5.0.
PRÉ CONDIÇÕES
Para executar este tutorial você deverá ter:
NodeJs 10 ou superior instalado
NPM 6 ou superior instalado
Uma IDE de sua preferência
Uma conta na Amazon Cloud Services e algum conhecimento acerca dos serviços S3 e CloudFront
CRIANDO O PROJETO
Para criar o projeto digite:
npm install -g @angular/cli@v9-lts
Isso instalará o Angular cli, responsável por gerar o projeto base.
Digite:
ng new custom-app --routing false --style css
Isso criará o projeto de fato.
Entre na pasta do projeto digitando:
cd custom-app
Agora iremos instalar alguns componentes que utilizaremos no projeto:
No arquivo src/style.css importe o Bootstrap adicionando ao arquivo a seguinte linha de código:
@import "~bootstrap/dist/css/bootstrap.min.css";
CRIANDO O SERVICE QUE FARÁ A COMUNICAÇÃO COM A PLATAFORMA
Crie um serviço através do comando:
ng generate service app
Abra o arquivo gerado app.service.ts na pasta src/app/ e altere conforme abaixo:
import { Injectable } from '@angular/core';
import { service, user } from '@seniorsistemas/senior-platform-data';
import { SeniorApi, ENVIRONMENTS } from "@seniorsistemas/senior-core";
import { Observable, forkJoin, from } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { environment } from "../environments/environment";
@Injectable() export class AppService {
private seniorApi: SeniorApi;
constructor() {
this.seniorApi = new SeniorApi();
if(environment.production) {
this.seniorApi.environment = ENVIRONMENTS.PROD
} else {
this.seniorApi.environment = ENVIRONMENTS.DEV
}
}
getUser(): Observable {
return from(user.getToken())
.pipe(
concatMap(token => {
this.seniorApi.accessToken = token.access_token;
return from(this.seniorApi.users.getUser());
})
);
}
}
A function getUser busca os dados do usuário com a url base e o token, através do componente platform-data e os utiliza para fazer a chamada do endpoint /platform/user/getUser, que retorna os dados do usuário logado.
Português
English
