Msal Interceptor 자동갱신되는 토큰 획득하기

Msal Interceptor를 사용하여서 토큰이 자동갱신되도록 구현한다.

Angular에서는 Msal Interceptor가 자동으로 엑세스 토큰을 획득하여 API에 대한 HTTP 요청에 연결하는 HTTP Interceptor를 제공한다.

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'leedonghyeon',
      redirectUri: 'http://localhost:4200'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
    }
  })
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}


@NgModule({
  declarations: [
    AppComponent,
    PublicPageComponent,
    RestrictedPageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule,
    HttpClientModule
  ],
  providers: [
  {
    provide: MSAL_INSTANCE,
    useFactory: MSALInstanceFactory
  },
    MsalService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }, {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 처음에는 로그인할때 응답받는 Response 내의 토큰을 임의로 로컬스토리지에 저장하고 사용하려고 했지만 새로 로그인할때만 갱신이 되기 때문에 나중에 다시 사용할 수가 없었다.
• 그래서 자동으로 갱신되는 토큰을 받아오는 방법을 새로 찾아야했다.
• 로컬스토리지에 저장되는 값에서, 이 거대한 키를 가진 친구의 value 중에 secret이 갱신된 토큰인것을 확인하고 거대한 키를 획득하는 방법을 찾았다.
  

하지만 자동으로 갱신되는 토큰을 획득하고 싶다면, 로컬스토리지에 저장된 토큰을 가져와 변수에 담는 방법이 있다. (옳은 방법인지는 모르겠음)

• 받아온 토큰을 다시 헤더에 추가하여 보내기 위해서 인증 인터셉터 서비스 파일을 하나 만들고 앱 모듈의 providers에 내가 만든 인터셉터를 추가한다.
• 토큰만 획득하고 싶다면 굳이 Interceptor 파일을 만들 필요는 없다.

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let i = 0;
    let _token = null;

    for (i = 0; i < localStorage.length; i++) {
      if (localStorage.key(i)?.indexOf('access') !== -1) {
        const _key = localStorage.key(i);
        _token = localStorage.getItem(_key!);
      }
    }

    const secret = JSON.parse(_token!)['secret'];
    console.log(secret, 'leetoken');

    const modifiedRequest = req.clone({ setHeaders: { Lee: `Bearer  ${secret}` } });

    return next.handle(modifiedRequest);
  }