OpenID (Opcional)

O sistema de autenticação do tipo OpenID tem se tornado cada vez mais popular, principalmente devido a cada vez mais aplicações do tipo de micro serviço estarem ganhando o mercado.

Pensando nisso o Cat UI disponibiliza de forma opcional a integração com sistemas de autenticação OpenID como: Google, Microsoft, Facebook ou qualquer outro de sua preferência, desde que siga os padrões de autenticação OpenID.

Para implementar tal funcionalidade bastam apenas algumas configurações.

Importante: No arquivo environment.ts, existem parâmetros de configuração que deverão ser seguidos, segue abaixo um guia explicando a função de cada um.

• name: Informe um valor de seu gosto apenas para identificar a configuração e servir posteriormente como forma de setar qual sistema de autenticação será utilizado pelo sistema.

• customQueryParams: Cada sistema de autenticação possui uma forma de escrever e passar informações de secret, pensando nisso, foi criada uma opção onde é possível informar qualquer objeto com as informações que precisar passar para o sistema de autenticação.

• clientId: Informe aqui o ClientID gerado pelo seu sistema de autenticação que identifica sua aplicação nele.

• scope: Informe aqui quais dados seu token gerado terá acesso no claims.

• domain: Informe aqui o host do sistema de autenticação que deseja utilizar.

• strictDiscoveryDocumentValidation: De acordo com o sistema de autenticação utilizado será necessário informar true ou false para que a autenticação funcione.

• indexLoginName: Informe aqui qual atributo conterá o nome do usuário no token gerado para a exibição no sistema.

• indexPictureName (OPCIONAL): Permite informar em qual atributo encontra-se a foto do usuário logado dentro do token.

• endpointLogout (OPCIONAL): Permite customizar o endpoint onde o fluxo de login utilizará para fazer o logout da aplicação.

• endpointToken (OPCIONAL): Permite customizar o endpoint onde o fluxo de login utilizará para buscar o token da aplicação.

• endpointClaims (OPCIONAL): Permite customizar o endpoint onde o fluxo de login utilizará para buscar os dados sensíveis do usuário.

Uso

environment.ts

import { CatEnvironmentInterface } from '@catrx/ui/common';

export const environment: CatEnvironmentInterface = {
  production: false,
  oauthConfig: [{
    name: 'google',
    customQueryParams: {
      client_secret: 't1gbm...'
    },
    clientId: '67944...apps.googleusercontent.com',
    scope: 'openid profile email',
    domain: 'https://accounts.google.com',
    strictDiscoveryDocumentValidation: false,
    indexLoginName: 'name',
    indexPictureName: 'picture'
  }]
};

app.component.ts

import { Component } from '@angular/core';
import { AppNotification, CatAppService } from '@catrx/ui';
import { UserService } from './shared/services/user/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  appConfig = this.appService
    .build('Cat UI', {    
      autoAuth: false,
      openId: {
        service: 'google'
      },
      onAuth: (decodedToken) => this.userService.getMenu(decodedToken),
    })
    .setLogotype({
      default: '../assets/logotype.svg',
      negative: '../assets/logotype-negative.svg',
    })
    .pushNotifications({
      getNotifications: this.userService.getNotifications(),
      getPermissionToNotifyOnBrowser: true,
      intervalToGet: 5000,
      onDelete: (id) => this.userService.deleteNotification(id),
      onAllDelete: (ids) => this.userService.deleteNotifications(ids),
    })
    .enableDarkMode()
    .generate();

  constructor(
    private appService: CatAppService,
    private userService: UserService) {}
}