[javascript] 앵귤러와 OAuth 인증 개발

05 Dec 2023

javascript

앵귤러는 대표적인 자바스크립트 프레임워크 중 하나이며, OAuth는 인증 및 인가 프로토콜입니다. 이번 블로그 포스트에서는 앵귤러를 사용하여 OAuth 인증을 개발하는 방법에 대해 알아보겠습니다.

1. OAuth란?

OAuth는 사용자가 다른 웹 애플리케이션에 로그인할 때, 해당 애플리케이션의 데이터나 기능을 사용할 수 있도록 권한을 부여하는 프로토콜입니다. 이를 통해 사용자는 애플리케이션에서 직접적으로 로그인 정보를 제공하지 않고도, 안전하게 외부 애플리케이션을 사용할 수 있습니다.

2. 앵귤러에서의 OAuth 사용

앵귤러에서 OAuth를 사용하기 위해서는 먼저 OAuth2 인증 서버에 등록하고, 인증을 위한 클라이언트 ID 및 시크릿 키를 발급받아야 합니다. 이후에는 앵귤러 애플리케이션에서 OAuth 라이브러리를 사용하여 해당 인증 서버와 통신하고, 사용자 인증을 처리할 수 있습니다.

2.1. 앵귤러 프로젝트 설정

먼저 앵귤러 프로젝트를 생성하고, 필요한 종속성을 설치해야 합니다. 다음 명령을 실행하여 앵귤러 CLI를 통해 새로운 앵귤러 프로젝트를 생성합니다.

ng new my-oauth-app

그리고 필요한 종속성을 설치하기 위해 프로젝트 디렉토리로 이동한 후, 다음 명령을 실행합니다.

cd my-oauth-app
npm install --save angular-oauth2-oidc

2.2. 인증 서버와의 통신 설정

OAuth2 인증 서버와의 통신을 위해 OAuthService를 초기화하고, 필요한 설정을 추가해야 합니다. app.module.ts 파일을 열고 다음과 같이 코드를 작성합니다.

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OAuthModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private oauthService: OAuthService) {
    this.configureOAuth();
  }

  configureOAuth() {
    this.oauthService.configure({
      clientId: 'YOUR_CLIENT_ID',
      issuer: 'YOUR_ISSUER',
      redirectUri: window.location.origin,
      scope: 'openid profile email',
      responseType: 'code'
    });

    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}

위의 코드에서 clientId와 issuer 부분을 해당 인증 서버에서 발급받은 값으로 변경해야 합니다.

2.3. 인증 요청 및 처리

인증 요청과 처리를 위해 OAuthService를 사용할 수 있습니다. 예를 들어, 로그인 버튼을 클릭하면 다음과 같이 코드를 작성하여 인증 요청을 보낼 수 있습니다.

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

constructor(private oauthService: OAuthService) {}

login() {
  this.oauthService.initCodeFlow();
}

인증 요청 후, 인증 성공 또는 실패에 대한 처리를 위해 OAuthService에 이벤트 핸들러를 등록할 수도 있습니다.

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

constructor(private oauthService: OAuthService) {
  this.oauthService.events.subscribe((e) => {
    if (e.type === 'token_received') {
      // 인증 성공 시 처리 할 코드
    }
    else if (e.type === 'discovery_document_loaded') {
      // 인증 서버 정보 로드 완료 시 처리 할 코드
    }
    else if (e.type === 'discovery_document_load_error') {
      // 인증 서버 정보 로드 실패 시 처리 할 코드
    }
  });
}

위의 코드에서 각 이벤트에 따른 처리를 추가하여 인증에 대한 커스텀 로직을 구현할 수 있습니다.

3. 결론

앵귤러를 사용하여 OAuth 인증을 개발하는 방법에 대해 알아보았습니다. OAuth를 사용하면 외부 웹 애플리케이션이나 API를 안전하게 사용할 수 있으며, 앵귤러를 통해 간편하게 OAuth 인증을 처리할 수 있습니다. 추가적인 자세한 내용은 Angular OAuth2 OIDC 라이브러리의 문서를 참고하시기 바랍니다.