APIs

Integrando com o login da plataforma

935 views 26/02/2018 31/07/2018 gian-pasqualini 1

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 :

  • A URL base da plataforma para a chamada de APIs
  • O token de acesso do usuário conectado que permite o consumo das APIs

Resumidamente, com a A URL base montam-se os requests para a plataforma e o token deve ser enviado no header “Authorization” do request.

Sobre o tutorial

Neste tutorial faremos um projeto FrontEnd que consome as APIs da plataforma obtendo os dados de usuários. O projeto será construído utilizando Angular + Bootstrap 4.

Pré condições

Para executar este tutorial você deverá ter:

  • NodeJs e NPM instalados
  • 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

Isso instalará o Angular cli, responsável por gerar o projeto base.

Digite:

ng create custom-app

Isso criará o projeto de fato

Entre na pasta do projeto digitando:

cd custom-app

Agora iremos instalar alguns componentes que utilizaremos no projeto:

Instale o componente platform-data:

npm install @seniorsistemas/senior-platform-data

Instale o bootstrap:

npm install --save bootstrap

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

O service que se comunicará com a plataforma, necessitará de um componente http para realizar as chamadas REST. Para importar o módulo httpClient à sua aplicação siga os passos abaixo.
Altere o arquivo src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//adicione esta linha
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 //E esta linha
 HttpClientModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

 

Crie um arquivo chamado

app.service.ts

na pasta src/app/

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
//componentes que obtém os dados de autenticação da plataforma
import { service, user } from '@seniorsistemas/platform-data';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AppService {
constructor(private http: HttpClient) { }

getDadosUsuario() : Observable < any > {
return Observable.forkJoin(
//busca a url base e o token para montagem do request.
Observable.fromPromise(service.getRestUrl()),
Observable.fromPromise(user.getAuthHeader()),
).flatMap((values: any) => {
const [bridgeUrl, authHeader] = values;
let headers = new HttpHeaders({
"Authorization": authHeader
});
return this.http.get < any > (`${bridgeUrl}usuarios/userManager/queries/obterMeusDados`,{headers}); ;
});
}
}

A function getDadosUsuario busca os dados da url base e o token através do componente platform-data e os utiliza para fazer a chamada do endpoint usuarios/userManager/queries/obterMeusDados, que retorna os dados do usuário logado.

O response será:

{ 
  "id": "ae87372a-f713-4d9a-ae59-e659a360cc70", 
  "nome": "john.doe", 
  "nomeCompleto": "John Doe", 
  "descricao": "", 
  "email": "john.doe@senior.com.br", 
  "localidade": "en-US", 
  "tenantDomain": "senior.com.br", 
  "tenantName": "senior", 
  "tenantLocale": "pt-BR" 
}

Com base na resposta, o sistema que está integrando deverá validar:

  • Se o campo “nome” (ex: john.doe) existe na base de dados dele
  • Se o campo “tenantDomain” ou “tenantName” batem com o usuário da base de dados efetuando o login

Medidas de segurança:

  • Sistema sendo integrado faça a requisição para URLs configuráveis, uma vez que para teste será usado um ambiente de homologação.
  • O sistema deve validar o tenant do usuário que está logando, para garantir que usuários de mesmo nome façam acesso cruzados em outros tenants.

Crie o arquivo src/app/user-data.ts:

export class UserData{
nome: string
nomeCompleto: string
descricao: string
email: string
tenantDomain: string
tenantName: string
tenantLocale: string
}

Altere o arquivo src/app/app.component.ts adicionando:

import { Component } from '@angular/core';
import { AppService } from "./app.service";
import { UserData } from "./user-data"

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[
AppService
]
})
export class AppComponent {
title = 'app';
userData = new UserData();
constructor(private appService: AppService){ }

getServiceUrl = function(){
this.appService.getDadosUsuario().subscribe(data => {
console.log(data)
this.userData = data;
});
}
}

Altere também o arquivo src/app/app.component.html

<div class="container" style="text-align: center;">
<div class="col-md-12">
<h1>Aplicação integrada à senior X Platform</h1>
</div>
<div class="row form-group">
<div class="col-10">
<h2>Clique aqui para obter os dados do usuário logado</h2>
</div>
<div class="col-2"><button class="btn-primary">Obter dados</button></div>
</div>
<div class="row">
<div class="col-6 text-left">Nome:</div>
<div class="col-6 text-left">{{userData.nome}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Nome Completo:</div>
<div class="col-6 text-left">{{userData.nomeCompleto}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Descricao:</div>
<div class="col-6 text-left">{{userData.descricao}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Email:</div>
<div class="col-6 text-left">{{userData.email}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Domínio do tenant:</div>
<div class="col-6 text-left">{{userData.tenantDomain}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Nome do tenant:</div>
<div class="col-6 text-left">{{userData.tenantName}}</div>
</div>
<div class="row">
<div class="col-6 text-left">Locale do tenant:</div>
<div class="col-6 text-left">{{userData.tenantLocale}}</div>
</div>
</div>

Implantando o projeto

Uma vez criada a aplicação faça o deploy da mesma em seu serviço de preferência, lembrando que, o frontend deve estar servido sob https.
Siga os passos do tutorial de implantação de frontend customizado para realizar a implantação do projeto.

Implantando o front-end customizado

Pronto, concluída a configuração do módulo basta acessar sua nova aplicação integrada através do menu.

Os fontes deste tutorial podem ser encontrados no github

Este artigo foi útil para você?