Desenvolvimento

Obtendo dados do usuário autenticado

1027 views 19/11/2018 01/07/2020 fredy-schlag 1

Nesta seção vamos apresentar como criar o serviço Angular para chamar a API do serviço de usuário para obter os dados do usuário autenticado, para mais detalhes consulte a documentação da API.

Criando a classe que representa o usuário autenticado

Criar arquivo classes.ts em src/app/.

Copiar o código abaixo no arquivo classes.ts. A classe DadosUsuario irá representar o usuário autenticado:

export class DadosUsuario {
  username: string;
  fullName: string;
  description: string;
  email: string;
  tenantDomain: string;
  tenantName: string;
  tenantLocale: string;
}

Note que a classe DadosUsuario tem os mesmos atributos da resposta do getUser.

Criando o serviço Angular que utiliza a SDK do serviço de usuários

Depois de criar a classe DadosUsuario, criar um serviço para chamar users.getUser. Crie o arquivo /src/app/app.service.ts com o conteúdo abaixo:

import { Injectable } from "@angular/core";
import { SeniorApi } from "@seniorsistemas/senior-core/dist";
import { DadosUsuario } from "./classes";

@Injectable()
export class UsuariosService {

getDadosUsuario(): Promise<void | DadosUsuario> {
let username = "<TENANT>";
let password = "<SENHA>";

let seniorApi = new SeniorApi();
// //Realiza o login
return seniorApi.authentication.login(username, password).then(function (jsonLogin) {
var jsonToken = JSON.parse(jsonLogin.body.jsonToken);
seniorApi.accessToken = jsonToken.access_token;

return seniorApi.users.getUser(username).then(res => {
return <DadosUsuario> JSON.parse(JSON.stringify(res.body));
}).catch(err => console.error(err));
}).catch(function (error) {
console.error("Erro na tentativa de efetuar login: ", error);
});
}
}

Alterar os valores username e password com o usuário que deseja obter informações.

O serviço acima irá realizar uma chamada na senior-core para autenticar o usuário informado, após autenticação ser realizada com sucesso, irá realizar outra chamada no senior-core para obter informações do usuário e popular as informações na classe DadosUsuario.

Chamando a função getDadosUsuario no AppComponent

Altere o arquivo /src/app/app.component.ts conforme o conteúdo abaixo:

import { Component } from "@angular/core";
import { UsuariosService } from './app.service';
import { DadosUsuario } from './classes';

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [],
providers: [UsuariosService],
})
export class AppComponent {
title = "tutorial-aplicacao-plataforma";

dadosUsuario: void | DadosUsuario;

constructor(private usuarios: UsuariosService) { }

ngOnInit() {
this.getDadosUsuario();
}

//Busca os dados do usuário autenticado
getDadosUsuario() {
this.usuarios.getDadosUsuario().then(data => this.dadosUsuario = data);
}
}

Note que na inicialização do componente, o método getDadosUsuario() é chamado, o qual alimenta os dados do usuário para ser exibido no HTML posteriormente.

Alterando o HTML para exibir os dados do usuário autenticado

Altere o arquivo /src/app/component.html conforme o conteúdo abaixo:

<div class="container">
    <div class="col-md-12 text-center">
      <h1>Tutorial de aplicação integrada à plataforma</h1>
    </div>
  
    <div class="col-8 offset-2">
      <div class="card">
        <div class="card-header">
          <div class="float-left">
            <h4>Dados do usuário autenticado</h4>
          </div>
          <div class="float-right">
            <!-- <button (click)="getDadosUsuario()" class="btn btn-primary">Atualizar dados</button> -->
            <button (click)="getDadosUsuario()" class="btn btn-primary">Atualizar dados</button>
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <table class="table table-sm col-8 offset-2">
              <tbody>
                <tr>
                  <td>Nome</td>
                  <td>{{dadosUsuario.username}}</td>
                </tr>
                <tr>
                  <td>Nome Completo</td>
                  <td>{{dadosUsuario.fullName}}</td>
                </tr>
                <tr>
                  <td>Email</td>
                  <td>{{dadosUsuario.email}}</td>
                </tr>                          
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

Execute o projeto localmente e acesse https://localhost.senior.com.br:4200/. A página exibida ficará conforme a imagem a abaixo, com as informações do usuário autenticado.

Este artigo foi útil para você?