javascript - 通过 UserManager 使用服务时，User 为 Null

Question

使用 Angular 7 和 OIDC-Client我创建了一个公开一些 UserManager 方法的 AuthService。

当我从 AuthService 调用 signInRedirectCallback 时，用户为 null。

如果我直接使用 UserManager 调用它，则用户不是 null。

更多详细信息如下:

const settings : UserManagerSettings = {
  authority: 'https://localhost:5005',
  client_id: 'spa',
  redirect_uri: 'https://localhost:5001/signin',
  post_logout_redirect_uri: 'https://localhost:5001/signout',
  response_mode: 'query',
  response_type: 'code',
  scope: 'openid profile email offline_access api',
  filterProtocolClaims: true,
  loadUserInfo: true
};

@Injectable({ 
  providedIn: 'root' 
})

export class AuthService {

  private manager = new UserManager(settings);
  private user: User = null;

  constructor() {

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

  }

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

  getClaims(): any {
    return this.user.profile;
  }

  signInRedirect(args?: any): Promise<void> {
    return this.manager.signinRedirect(args);
  }

  signInRedirectCallback(url?: string): Promise<void> {
    return this.manager.signinRedirectCallback(url).then(user => {
      this.user = user;
    });
  }

 // Other methods

}

我有一个 AuthenticateGuard，如下:

export class AuthenticatedGuard implements CanActivate {

  constructor(private authService: AuthService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : boolean {

    if (this.authService.isSignedIn())
      return true;

    this.authService.signInRedirect({ state: { url: state.url }});
    return false;

  }

} 

然后我的回调组件如下:

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../shared/services/auth.service'
import { UserManagerSettings, UserManager } from 'oidc-client';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'signin',
  templateUrl: './signin.component.html'
})

export class SignInComponent implements OnInit {
  private manager = new UserManager(settings);
  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit() {
    this.manager.signinRedirectCallback().then(function (user) {
       console.log(user);
    });
  }
}

当我使用 console.log(user) 时，回调组件上的 user 未定义。

为了完成这项工作，我需要在 SignInComponent(回调组件)上创建一个新的 UserManager，而不是使用 AuthService，例如:

const settings : UserManagerSettings = {
  authority: 'https://localhost:5005',
  client_id: 'spa',
  redirect_uri: 'https://localhost:5001/signin',
  post_logout_redirect_uri: 'https://localhost:5001/signout',
  response_mode: 'query',
  response_type: 'code',
  scope: 'openid profile email offline_access api',
  filterProtocolClaims: true,
  loadUserInfo: true
};

@Component({
  selector: 'signin',
  templateUrl: './signin.component.html'
})

export class SignInComponent implements OnInit {

  private manager = new UserManager(settings);

  constructor(private router: Router) { }

  ngOnInit() {

    this.manager.signinRedirectCallback().then(function (user) {
      console.log(user);
   });

  }

}

知道为什么会发生这种情况吗？我错过了什么？

谢谢

Answer 1

没什么可尝试的

将您的response_type更改为此

response_type: 'id_token token'

并删除用户中的 null

private user: User;

并删除这2个

response_mode

@Injectable({ 
  providedIn: 'root' 
})