DharmaIdentityServer

Esse componente foi criado para integrar com o IdentityServer da Dotz.

Projeto gerado com o Angular CLI versão 7.0.4.

Como configurar o componente

Crie um projeto novo em angular:

ng new nome-projeto

instale o dharma identity server:

npm i dharma-identity-server

Crie as seguintes variáveis de ambiente em environment:

  token_name: 'APP_NAME_TOKEN',

  production: false,

  sso_authority: 'http://localhost:6001/accounts/v1',

  sso_client_id: '5OQVR4WBC11FPFDQV19PVIYS',

  sso_redirect_uri: 'http://localhost:4200/auth-callback',

  sso_post_logout_redirect_uri: 'http://localhost:4200/',

  sso_response_type: "id_token token",

  sso_scope: "openid profile accounts.api",

  sso_monitorSession: false,

  sso_checkSessionInterval: 30000,

  sso_revokeAccessTokenOnSignout: true,

  sso_clockSkew: 300,
  
  sso_loadUserInfo: false,

Em app.module iremos configurar o componente da seguinte forma:

Importe os módulos:

import { SecurityModule, SecurityConfig, UserManagerSettings, UserManager, AuthInterceptor } from 'dharma-identity-server';

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

Configure a classe UserManagerSettings:

const oauthSettings: UserManagerSettings = {
  authority: environment.sso_authority,
  client_id: environment.sso_client_id,
  redirect_uri: environment.sso_redirect_uri,
  post_logout_redirect_uri: environment.sso_post_logout_redirect_uri,
  response_type: environment.sso_response_type,
  scope: environment.sso_scope,
  monitorSession: environment.sso_monitorSession,
  checkSessionInterval: environment.sso_checkSessionInterval,
  revokeAccessTokenOnSignout: environment.sso_revokeAccessTokenOnSignout,
  clockSkew: environment.sso_clockSkew,
  loadUserInfo: environment.sso_loadUserInfo
};

configure a classe UserManager passando a classe UserManager:
const userManager = new UserManager(oauthSettings);

Configure a classe SecurityConfig:

const securityConfig: SecurityConfig = {
  tokenName: environment.token_name,
  routerAfterAuthCallBack: 'home',
  userManager: oauthSettings
}

Importe o módulo SecurityModule nos imports:

SecurityModule.forRoot(securityConfig)

Em providers adicione as linhas a seguir:

{ provide: UserManager, useValue: userManager },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

Nas rotas do angular adicione a rota do authCallback:

{
    path: 'auth-callback',
    component: AuthCallbackComponent
}

Com os passos acima o componente está configurado.

Como utilizar o componente

No angular para realizar o tratamento de rotas nós temos que implementar a interface CanActivate.

Crie um arquivo chamado auth-guard.service e configure conforme o código abaixo:

import { Injectable } from '@angular/core'

import { CanActivate, ActivatedRouteSnapshot } from '@angular/router'

import { Observable } from 'rxjs';

import { AuthService } from 'dharma-identity-server';

@Injectable()
export class AuthGuardService implements CanActivate {
    constructor(private authService: AuthService){} 

    canActivate(route: ActivatedRouteSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        if(!this.authService.isLoggedIn())
        {
            this.authService.startAuthentication();
            return false;
        }

        return true;
    }
}

Após criar o AuthGuardService, adicione o serviço em providers no app.module:

providers: [
    AuthGuardService
  ],

Crie um componente chamado home da seguinte forma:

ng g c home

Após criar o componente home faça a injeção de dependência de AuthService:

constructor(public authService: AuthService) { }

Em seguida, adicione o seguinte método no .ts:

   loggout(){
    this.authService.startLogout();
  }

No html do home componente adicione o seguinte html:

<p>
  home works!
</p>

<button (click)="loggout()">Loggout</button>

Adicione a rota home ao arquivo de rotas, deixando nosso arquivo de rotas da seguinte forma:

import { Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AuthGuardService } from './auth-guard.service';

import { AuthCallbackComponent } from 'dharma-identity-server';

export const rootRouterConfig: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'auth-callback',
        component: AuthCallbackComponent
    },
    {
        path: 'home',
        component: HomeComponent,
        canActivate : [AuthGuardService] //nossa classe que gerencia a autenticação nas rotas
    }
]

Configure essa classe de rota no app.module da seguinte forma:

import { RouterModule, PreloadAllModules } from '@angular/router';

import { rootRouterConfig } from './app-routing.module';

em imports:

RouterModule.forRoot(rootRouterConfig, {preloadingStrategy: PreloadAllModules, useHash: false})

Em app.component.html, adicione o routeroutlet:

<h2>app start</h2>
<router-outlet  ></router-outlet>

Com isso o sistema já tem o login e loggout integrado com a Accounts.