# 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.

{% hint style="info" %}
**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.
{% endhint %}

* **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

{% code title="environment.ts" %}

```typescript
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'
  }]
};
```

{% endcode %}

{% code title="app.component.ts" %}

```typescript
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) {}
}
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/comece-por-aqui/4.-seguranca/openid-opcional.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.