Neste passo vamos realizar a configuração da classe MingleService que deverá ser instanciada no início da sua aplicação para que possamos tirar proveito de todas as funcionalidades da biblioteca Mingle em seu aplicativo. 

Consideramos este passo o mais importante, aqui é onde iremos configurar uma única instância da classe MingleService e ela funcionará por toda a sua aplicação. 

Utilizando o comando ng generate do Angular, criamos um serviço AppInitService e nele realizamos a seguinte implementação: 

Lembrando que o Angular foi utilizado para este tutorial, mas pode ser qualquer plataforma escrita com Typescript.

import { Injectable } from '@angular/core';
import { MingleService, Configuration } from '@totvs/mingle';
@Injectable()
export class AppInitService {
 
 constructor(private mingleService: MingleService) { }
 
 mingleConfiguration(): Promise<any> {
   return new Promise((resolve, reject) => {
     console.log("Mingle Service Configuration called");
     const config = new Configuration();
     config.modules.web = true;
     config.environment = 'DEV';
     config.modules.usage_metrics = true;
     config.modules.gateway = true;
     config.modules.push_notification = true;
     config.server = 'https://dev-mingle.totvs.com.br/api'
     config.app_identifier = 'identificadorDoAplicativo'
 
     this.mingleService.setConfiguration(config);
    
     this.mingleService.init();
     .then( init => {
       resolve('Mingle Service Init');
     }).catch(error => {
       console.log("error" , error);
      
       reject(error);
     });    
   });
 }}

Realize a importação da classe MingleService e a Configuration.

import { MingleService, Configuration } from '@totvs/mingle';

O primeiro passo é definir a constante config como “new Configuration();”

const config = new Configuration();

Aplicações web: config.modules.web = true; 

Aplicações mobile: config.modules.web = false;

Para utilizar as métricas automáticas do Mingle: config.modules.usage_metrics = true;

Para o servidor do Mingle realizar o sistema de gateway: 

config.modules.gateway = true;

Para definir qual servidor do Mingle:

Existem três servidores, sendo eles: 

Desenvolvimento = 'https://dev-mingle.totvs.com.br/api'

Homologação = 'https://hom-mingle.totvs.com.br/api'

Produção = 'https://mingle.totvs.com.br/api'

Como neste exemplo nós ainda estamos desenvolvendo: 

config.server = 'https://dev-mingle.totvs.com.br/api'

Após finalizar a configuração de acordo com as regras da sua aplicação, chame a função setConfiguration() da classe mingleService passando a sua configuração:

this.mingleService.setConfiguration(config);

Em seguida inicie o aplicativo utilizando o método init() da classe mingleService:

this.mingleService.init()
  .then( init => {
    resolve('Mingle Service Init');
})

Agora que você criou a classe que configura e inicia o uso da biblioteca Mingle, vamos dizer para o seu aplicativo utilizar a classe AppInitService quando for compilado e iniciado:

No app.module.ts -> Providers: 

 1- declare  AppInitService e MingleService

 2- Crie um provide para realizar o APP_INITIALIZER que será responsável por executar as configurações realizadas no passo 2.1

providers: [
 AppInitService,
 MingleService,
 { provide: APP_INITIALIZER, useFactory: initializeApp1, deps:[AppInitService], multi: true},
 {provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true}
]

Agora que você já conhece o mingleService e sua configuração inicial já está funcionando, vamos utilizar o Mingle para realizar a autenticação do usuário ao seu servidor.

Pré requisitos: 

• Usuário e senha de autenticação do usuário ao seu servidor
• ALIAS

Considere o arquivo: login.component.ts

Importe a classe MingleService:

import { MingleService } from '@totvs/mingle';

Na sua função de login, utilize o método mingleService.auth.login(usuário, senha, alias)

<style>
div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}
</style>