angular-oauth2-oidc(Angular)를 사용한 암시적 흐름 인증

패키지 설치

npm을 사용하여 angular-oauth2-oidc 패키지를 설치합니다.

npm i angular-oauth2-oidc --save 

NgModule(app.module) 설정

패키지 설치가 완료되면 app.module 파일에서 OAuthModule을 가져옵니다.

import { OAuthModule } from 'angular-oauth2-oidc';
[...]
@NgModule({
  imports: [  
   [...]    HttpModule,
    OAuthModule.forRoot()  
],  
........export classAppModule{}

암시적 흐름 구성 및 로그인 페이지

SPA에 가장 적합한 OAuth2/OIDC 플로우입니다. 사용자를 IdentityProvider의 로그인 페이지(Identity Server)로 보냅니다. 로그인 후 SPA는 토큰을 받습니다. 이것은 또한 단일 사인온 및 단일 사인오프를 허용합니다.
라이브러리를 구성하려면 시작 시 OAuthService가 요구하는 대로 일부 속성(AuthConfig)을 설정하면 됩니다. 즉, 라우팅이 시작되기 전에 호출되는 AppComponent의 생성자에서입니다.

import { AuthConfig } from'angular-oauth2-oidc';
export const authConfig: AuthConfig = {
// Url of the Identity Provider  
issuer: 'https://demo.identityserver.com/identity',
// Login Url of the Identity Provider  
loginurl: 'https://demo.identityserver.com/identity/connect/authorize',
// Login Url of the Identity Provider  
logouturl: 'https://demo.identityserver.com/identity/connect/endsession',
// URL of the SPA to redirect the user to after login  
redirectUri: window.location.origin + '/dashboard.html',
// The SPA's id. The SPA is registerd with this id at the auth-server  
clientId: 'billing_demo',
// set the scope for the permissions the client should request
// The first three are defined by OIDC. Also provide user sepecific
 scope: 'openid profile email billing_demo_api',
}

AuthConfig 속성이 설정되면 ID 서버의 검색 문서를 로드하도록 OAuthService를 구성하고 액세스 토큰이 유효하지 않은 경우 사용자에게 ID 서버의 로그인 페이지를 표시하기 위한 암시적 흐름을 트리거합니다.

import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';
@Component({
  selector: 'billing-app',
  templateUrl: './app.component.html'
})
exportclassAppComponent{
  constructor(private oauthService: OAuthService) {
    this.ConfigureImplicitFlowAuthentication();
  } 
               private ConfigureImplicitFlowAuthentication() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = 
new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocument().then(doc) => {
      this.oauthService.tryLogin().catch(err => {
        console.error(err);
      }).then(() => {
        if (!this.oauthService.hasValidAccessToken()) {
          this.oauthService.initImplicitFlow()
        }
      });
    });
  }
}

검색 끝점은 IdentityServer에 대한 메타데이터를 검색하는 데 사용할 수 있습니다. 발급자 이름, 키 자료, 지원되는 범위 등과 같은 정보를 반환합니다. 검색 끝점은 기본 주소와 관련된/.well-known/openid-configuration을 통해 사용할 수 있습니다.

https://demo.identityserver.com/.well-known/openid-configuration

토큰이 만료되기 전에 자동으로 새로 고침(자동 새로 고침)

토큰이 만료되기 전에 자동으로 토큰을 새로 고치려면 AppComponent에서 OAuthService를 구성한 후 다음 메서드를 호출하기만 하면 됩니다.

this.oauthService.setupAutomaticSilentRefresh();

기본적으로 이 이벤트는 토큰 수명의 75%가 끝난 후에 시작됩니다. timeoutFactor 속성을 0과 1 사이의 값으로 설정하여 이 요소를 조정할 수 있습니다. 예를 들어, 0.5는 수명의 절반이 끝난 후에 이벤트가 시작되고 0.33은 세 번째 시간이 지난 후에 이벤트가 트리거됨을 의미합니다.

Web API 호출 시 Bearer 액세스 토큰 전달

1. 새로운 HttpClient의 HttpHeaders 클래스를 이용하여 직접 전달

var headers = new HttpHeaders({"Authorization": "Bearer " + this.oauthService.getAccessToken()});

2. allowedUrls를 각 URL에 대한 접두사가 있는 배열로 설정합니다. 접두사에 소문자를 사용합니다.

OAuthModule.forRoot({
  resourceServer: {
    allowedUrls: ['https://billing_demo_api.com/api'],
    sendAccessToken: true
  }
}

로그아웃 구성

애플리케이션에서 로그아웃하려면 OAuthService의 logout() 메서드를 호출하기만 하면 됩니다. 세션을 종료하고 사용자를 클라이언트와 연결된 로그아웃 후 리디렉션 URL로 리디렉션합니다.

this.oauthService.logout();

액세스 토큰 및 ID 클레임

액세스 토큰 및 ID 클레임을 가져오려면 OAuthService의 getAccessToken() 및 getIdentityClaims() 메서드를 호출하기만 하면 됩니다.

this.oauthService.getIdentityClaims();
this.oauthService.getAccessToken()

AuthGuard 구현

일부 페이지의 무단 액세스를 제한하려면 사용자가 경로에 액세스할 수 있는 경우 true를 반환하고 액세스 토큰의 유효성을 기반으로 할 수 없는 경우 false를 반환하는 CanActivate를 추가로 구현하는 AuthGuard 클래스를 만듭니다.

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

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

  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    } this.router.navigate(['']);
  }
}

그런 다음 라우팅 구성에 Auth Guard를 다음과 같이 추가합니다.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'search', component: SearchComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'bill/:billId', component: BillingComponent,
    canActivate: [AuthGuard], children: [
      { path: '', redirectTo: 'ledger' }
    ]
  }];