调用signinRedirect时的OIDC客户端无限循环 [英] Oidc-client infinite loop when calling signinRedirect

问题描述

我在oidc-client-js中使用angular 8.我已连接到IdentityServer4(代码流+ PKCE).打开应用程序后(在主组件内部)，我想检查用户是否已通过身份验证.这就是为什么我调用signinRedirect()的原因.无需手动单击按钮，而只是在构造函数内部调用它(当我只单击按钮以调用signinRedirect()时，整个流程就起作用了).问题是我陷入了无限循环.Angular不断调用IdenityServer并刷新登录页面.到服务器的api调用(并因此重定向到登录页面)可以正常运行，但不会停止.请帮忙.

I'm using angular 8 with oidc-client-js. I'm connected to IdentityServer4 (Code Flow + PKCE). After I open the app (inside main component) I want to check if user is authenticated. That's why I call signinRedirect(). Instead of manually clicking the button I just call it inside the constructor (the whole flow worked when I was just clicking the button to call signinRedirect()). The issue is that I'm stuck inside infinite loop. Angular keeps calling IdenityServer and refreshing login page. The api call to the server (and redirect to login page as a result) works fine but it doesn't stop. Please help.

export class AuthService {
  private userManager: UserManager;
  private user: User;

  constructor(private client: HttpClient) {
    this.userManager = new UserManager(AuthSettings.settings);
    this.userManager.getUser().then(user => {
      this.user = user;
    });
  }

  checkCredentials() {
    if (!this.isUserLoggedIn()) {
      this.redirectToLogin();
    }
  }

  redirectToLogin() {
    return this.userManager.signinRedirect();
  }

  isUserLoggedIn(): boolean {
    return this.user != null && !this.user.expired;
  }
}

export class AppComponent {
  title = "app";

  constructor(private authService: AuthService) {
    this.authService.checkCredentials();
  }
}

用户输入角度应用程序.然后，我调用授权端点(signinRedirect，发送服务器在代码流中必需的内容)-如果用户登录，服务器将检查cookie.否则，服务器会将我重定向到登录页面.问题是，如果我单击一个调用(signinRedirect)的按钮，但在打开组件时执行该按钮时，情况不起作用.循环以日志结尾-显示登录名:用户未通过身份验证.循环始于请求开始HTTP/1.1 GET http://localhost:5555/.well-已知/openid配置.然后-请求启动HTTP/1.1 GET HTTP://本地主机:5555/连接/授权RESPONSE_TYPE =代码&安培; CLIENT_ID =NG&安培;状态= kYkvO3CO4SW3asopth-dmZW8SYkuyz79Npfn0K4MPAMCT&安培; REDIRECT_URI = HTTP％3A％2F％2Flocalhost％3A4200％2Fcallback&安培;范围=的OpenID％20API&安培; code_challenge = 2iGwqANCfZGshjmhDmmwm4Eh4Q8SowgPcImf1-CsDzs&安培; code_challenge_method = S256&安培;随机数= kYkvO3CO4SW3asopth-dmZW8SYkuyz79Npfn0K4MPAMCT .然后重复.

The user enter the angular app. Then I call authorize endpoint (signinRedirect, sending server things that are required in code flow) - server checks for the cookie if user is logged in. If not it redirects me to the login page. The issue is that scenario works if I click a button that calls (signinRedirect) but not when I execute it when a component is open. The loops ends with log - Showing login: User is not authenticated. The loop begins with Request starting HTTP/1.1 GET http://localhost:5555/.well-known/openid-configuration. Then - Request starting HTTP/1.1 GET http://localhost:5555/connect/authorize?response_type=code&client_id=ng&state=kYkvO3CO4SW3asopth-dmZW8SYkuyz79Npfn0K4MPAMCT&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fcallback&scope=openid%20API&code_challenge=2iGwqANCfZGshjmhDmmwm4Eh4Q8SowgPcImf1-CsDzs&code_challenge_method=S256&nonce=kYkvO3CO4SW3asopth-dmZW8SYkuyz79Npfn0K4MPAMCT. Then it repeats.

推荐答案

也许我来晚了.这是我的观察结果.

maybe I'm late to respond. Here are my observations.

您的auth服务构造函数中的以下代码是异步工作的，这是一个很好的原因，您不会让称为应用内组件"的时间检查凭据填充用户对象，还通过使构造函数成为反模式来解决此问题，您确实需要异步并在这里等待使用.

this below code in your auth service constructor works asynchronously, there is a very good reason you will not have the user object populated by the time check credentials called in-app component, also fixing this by making the constructor is an antipattern, you really need to have an async and await usage here.

 this.userManager.getUser().then(user => {
      this.user = user;
    });

这篇关于调用signinRedirect时的OIDC客户端无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！