Integrar com Angular

Adicione autenticação OIDC ao seu app Angular em minutos usando angular-oauth2-oidc.

Esta integração usa o fluxo Authorization Code + PKCE sem client secret — adequado para SPAs onde o código-fonte é público. Registre o cliente em sentinel-admin → OAuth2 Clients → New Client.

Instalar angular-oauth2-oidc

Adicione o angular-oauth2-oidc ao seu projeto Angular via npm.

Terminal

npm install angular-oauth2-oidc

Importar o módulo

Para projetos baseados em NgModule, importe OAuthModule.forRoot() no AppModule. Em projetos standalone, use provideOAuthClient() no bootstrap.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OAuthModule } from 'angular-oauth2-oidc';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OAuthModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Projetos standalone: substitua por provideOAuthClient() em bootstrapApplication() no main.ts.

Configurar o AuthConfig

Crie o objeto de configuração com os dados do cliente registrado no sentinel-admin. O PKCE é habilitado automaticamente com responseType: "code".

src/app/auth.config.ts

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://auth.sentinel-identity.com',
  clientId: '<SEU_CLIENT_ID>',
  redirectUri: 'http://localhost:4200',
  scope: 'openid profile email',
  responseType: 'code',
  useSilentRefresh: false,
  showDebugInformation: false,
};

Substitua <SEU_CLIENT_ID> pelo ID do cliente gerado em sentinel-admin → OAuth2 Clients → New Client (tipo: public).

Inicializar no AppComponent

Injete o OAuthService no AppComponent, aplique a configuração e carregue o Discovery Document para que a biblioteca encontre automaticamente os endpoints do Sentinel.

src/app/app.component.ts

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authConfig);
    this.oauthService
      .loadDiscoveryDocumentAndTryLogin()
      .then(() => {
        if (!this.oauthService.hasValidAccessToken()) {
          this.oauthService.initCodeFlow();
        }
      });
  }
}

loadDiscoveryDocumentAndTryLogin() busca o /.well-known/openid-configuration do Sentinel e processa o retorno do callback automaticamente.

Implementar o AuthGuard

Crie um guard que verifica se o usuário possui um access token válido. Caso contrário, redireciona para o fluxo de login.

src/app/auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private oauthService: OAuthService,
    private router: Router,
  ) {}

  canActivate(): boolean {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    }
    this.oauthService.initCodeFlow();
    return false;
  }
}

Proteger rotas e acessar o token

Proteja as rotas com canActivate: [AuthGuard] e acesse o access token sempre que precisar de chamadas autenticadas para APIs.

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

// Em qualquer serviço, obtenha o token para chamadas à API:
// const token = this.oauthService.getAccessToken();
// headers: { Authorization: `Bearer ${token}` }

Use oauthService.getIdToken() para obter claims do usuário (nome, e-mail) sem uma chamada extra ao servidor.

Outros quickstarts

React (SPA)Next.js Express.js Spring Boot .NET / ASP.NET