NgxLoginrenova

Este pacote fornece um componente reutilizável de tela de login para aplicações Angular.

Configuração Necessária

Para utilizar o ngx-login-renova no seu projeto Angular, siga os passos abaixo:

1. Instalação

Faça a instalação do pacote via npm

  npm i ngx-login-renova

1.1. Atualize o angular.json

Adicione o seguinte bloco no arquivo angular.json dentro da seção de assets:

  "assets": [
    "src/assets",
    {
      "glob": "**/*",
      "input": "public"
    },
    //Obrigatório
    {
      "glob": "**/*",
      "input": "./node_modules/ngx-login-renova/assets",
      "output": "/assets"
    }
  ],

1.2. Atualize o style.scss

Inclua a importação dos estilos no arquivo style.scss principal da sua aplicação:

  @import '../node_modules/ngx-login-renova/assets/styles/index.scss';

1.3. Configure o app.config.ts em standalone

Caso sua aplicação seja standolene encontre o arquivo app.config.ts, importe e configure o cliente HTTP e outras dependências necessárias:

import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    //Obrigatório
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideHttpClient()
  ]
};

2. Utilizando o Componente no Seu Template

2.1. Em Componentes Standalone

No arquivo TS do seu componente, é necessário importar o componente ngx-login-renova como RenovaLoginComponent: Arquivo ts

  import { RenovaLoginComponent } from 'ngx-login-renova';
  import { Component } from '@angular/core';

  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    standalone: true,
    //Importação do componente
    imports: [RenovaLoginComponent]
  })
  export class LoginComponent {
    // Seu código aqui
  }

2.2. Em Módulos

É necessário importar o módulo RenovaLoginModule no módulo que for utilizar o login:

import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { RenovaLoginModule } from "ngx-login-renova";

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    //Importação do módulo
    RenovaLoginModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Configuração do Componente

Na sua página de login, adicione o componente de login com os parâmetros obrigatorios:

<ngx-login-renova
  [client_id]="'string'"
  [client_secret]="'string'"
  [api_url]="'string'"
  [end_point]="'/identity/token'"
  (onLoginSuccess)="onLoginSuccess($event)"
  ></ngx-login-renova>

4. Variáveis Disponíveis

client_id: ID do cliente para requisição.
client_secret: Chave secreta para requisição.
logo_url: URL para exibir a logo do projeto.
api_url: URL da API onde será feita a requisição para autenticação.
end_point: Endpoint da API para autenticação (padrão é /identity/token).
background_img: URL do vídeo de fundo (opcional).

5. Eventos Emitidos

onLoginSuccess: Evento emitido quando o login é bem-sucedido, nele irá conter um retorno do tipo httpResponse como no exemplo a seguir:

{
  "headers": {
      "normalizedNames": {},
      "lazyUpdate": null,
      "headers": {}
  },
  "status": 200,
  "statusText": "OK",
  "url": null,
  "ok": true,
  "type": 4,
  "body": {
      "access_token": "token",
      "expires_in": 36000,
      "refresh_expires_in": 1800,
      "refresh_token": "refresh_token",
      "token_type": "Bearer",
      "id_token": "id_token",
      "not-before-policy": 0,
      "session_state": "session_state",
      "scope": "openid profile email CBPM-Client-Scope"
  }
}

onLoginError: Evento emitido quando ocorre um erro no login, nele irá conter um retorno do tipo httpErrorResponse como no exemplo a seguir:

{
  "status": 401,  
  "message": "Http failure response for https://consultacbpmapi-dev.renova.app.br/identity/token: 401 OK",  
  "error": [  
      {  
          "Code": "AuthenticationError",  
          "Description": "Deserialization of types without a parameterless constructor, a singular parameterized constructor, or a parameterized constructor annotated with 'JsonConstructorAttribute' is not supported. Type 'Ocelot.Responses.ErrorResponse'. Path: $ | LineNumber: 0 | BytePositionInLine: 1.",  
          "Type": 401,  
          "NumericType": 401,  
          "Metadata": null  
      }  
  ],  
  "headers": {  
      "normalizedNames": {},  
      "lazyUpdate": null  
  },  
  "name": "HttpErrorResponse",  
  "ok": false,  
  "statusText": "OK",  
  "url": "https://consultacbpmapi-dev.renova.app.br/identity/token"  
}  

6. Estilização e Imagens

6.1. Estilização

Você pode adicionar suas próprias regras de estilo no arquivo style.scss ou em arquivos de estilo específicos do componente.

6.2. Imagens

Coloque suas imagens na pasta assets do seu projeto e referencie-as nos seus componentes ou arquivos de estilo.

Exemplo de uso de imagem em um componente:

<img src="assets/images/logo.png" alt="Logo">

Exemplo Completo Aqui está um exemplo completo de como configurar e utilizar o ngx-login-renova em um projeto Angular:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RenovaLoginModule } from 'ngx-login-renova';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RenovaLoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

// login.component.ts
import { Component } from '@angular/core';
import { RenovaLoginComponent } from 'ngx-login-renova';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  standalone: true,
  imports: [RenovaLoginComponent]
})
export class LoginComponent {
  onLoginSuccess(event: boolean) {
    console.log('Login successful:', event);
  }

  onLoginError(event: boolean) {
    console.log('Login error:', event);
  }
}

  // login.component.html
    <ngx-login-renova
      [client_id]="'your-client-id'"
      [client_secret]="'your-client-secret'"
      [logo_url]="'assets/images/logo.png'"
      [api_url]="'https://api.yourdomain.com'"
      [redirect_route]="'/dashboard'"
      [end_point]="'/identity/token'"
      [background_img]="'assets/video/background-video.mp4'"
      (onLoginSuccessEmit)="onLoginSuccess($event)"
      (onLoginErrorEmit)="onLoginError($event)"
    ></ngx-login-renova>