使用IDP（KeyCloak）的Angular Oauth代码流验证

Question

我正在尝试与Angular项目中的身份提供商（KeyCloak）集成。我正在为此目的使用“ Angular-Oauth2-oidc”库。

因此，我能够在单击按钮时从主页上将用户从主页重定向到IDP的登录页面，并在成功登录后将我重定向到原始页面。到目前为止还不错，但是我的问题是，在登录过程之后，不会将包括令牌在内的会话信息设置为我的浏览器的会话存储。如果我重复该过程（再次调用登录函数），则将其正确设置。

这是我到目前为止使用的代码；

auth.service.ts

  constructor(private oauthService: OAuthService) {}

  authConfig: AuthConfig = {
    issuer: environment.keycloak.issuerAddress,
    redirectUri: window.location.origin + '/home',
    clientId: environment.keycloak.clientId,
    scope: environment.keycloak.scope,
    responseType: environment.keycloak.responseType,
    disableAtHashCheck: environment.keycloak.disableAtHashCheck,
    showDebugInformation: environment.keycloak.showDebugInformation,
  }

  login(): Promise<any> {
    return new Promise<void>((resolveFn, rejectFn) => {
      this.initLogin().then(() => {
        resolveFn();
      }).catch(function(e){
        rejectFn(e);
      });
    });
  }

  private initLogin(): Promise<any> {
    return new Promise<void>((resolveFn, rejectFn) => {
      this.oauthService.configure(this.authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
      this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
        if (this.oauthService.hasValidAccessToken()) {
          this.oauthService.setupAutomaticSilentRefresh();
          resolveFn();
        }else {
          this.oauthService.initCodeFlow();
          resolveFn();
        }
      }).catch(function(e){
        rejectFn("Identity Provider is not reachable!");
      });
    });
  }

home.component.ts

 login(): void {
    this.authService.login().then(() => {
      //
    }).catch((e) =>{
      //
    });
 }

总而言之，我要做的就是；

• 当用户单击登录按钮时，配置Oauthservice并尝试登录。
• 如果已经有有效的访问令牌，则只需设置无声刷新并返回即可。
• 如果没有有效的访问令牌，请启动代码流并重定向到IDP的登录页面。
• 如果登录尝试失败，则例外，请告诉用户IDP不可用。

注意：如果我改为在构造函数中进行oauthservice配置，并且仅在用户想要登录时调用oauthservice.initcodeflow（）方法，则可以正常工作。我之所以没有在构造函数中配置它的原因是，我希望能够告诉用户当用户单击登录按钮时，IDP不可用。

Answer 1

I find it cleanest to

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
): Observable<boolean> {
    return this.authService.isDoneLoading$.pipe(
      filter(isDone => isDone),
      switchMap(_ => this.authService.isAuthenticated$),
      tap(isAuthenticated => isAuthenticated || this.authService.login(state.url)),
    );
}

它将等待授权逻辑为iSdoneloDADing $，以确保完成所有ASYNC授权boottrapping。然后，它检查用户是否已进行身份验证，如果没有，则将用户登录，但请记住参数中的目标页面登录（...）。当用户返回您的应用程序时，该url将提供给您。

在您的应用程序的登录顺序中（以下是我的示例）您可以读取此state，并使用它将用户发送到最初的意图页面。现在应该允许后卫，因为用户已登录。

这是登录顺序的相关部分：

    // Check for the strings 'undefined' and 'null' just to be sure. Our current
    // login(...) should never have this, but in case someone ever calls
    // initImplicitFlow(undefined | null) this could happen.
    if (this.oauthService.state && this.oauthService.state !== 'undefined' && this.oauthService.state !== 'null') {
      let stateUrl = this.oauthService.state;
      if (stateUrl.startsWith('/') === false) {
        stateUrl = decodeURIComponent(stateUrl);
      }
      console.log(`There was state of ${this.oauthService.state}, so we are sending you to: ${stateUrl}`);
      this.router.navigateByUrl(stateUrl);
    }