标签: angular-oauth2-oidc

我正在关注 angular-oauth2-oidc 文档中的隐式工作流示例。

在我的 Angular 应用程序中一切正常，我可以登录（在此期间我被重定向到身份服务器），获取我的令牌并使用此令牌访问我的 Web Api。

但是，我注意到“given_name”声明为空，因此登录页面上不显示用户名。具体来说，示例代码中的以下方法似乎返回 null：

public get name() {
    let claims = this.oauthService.getIdentityClaims();
    if (!claims) return null;
    return claims.given_name;
}

我认为这可能是权限问题，但我的范围设置为：

scope: 'openid profile email api1',

知道我需要更改什么才能获得此“given_name”声明吗？

我在我的 Angular 8 项目中使用 8.0.4 的发布版本，并具有授权代码流程：

这是我的代码

    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService
      .loadDiscoveryDocument()
      .then(() => this.oauthService.tryLogin()) ---> [1]
      .then(() => {
        if (this.oauthService.hasValidAccessToken()) {
          return Promise.resolve();
        }else{
          this.oauthService.initCodeFlow() ---> [2]
        }
      });
  }

最初，当用户未登录时，[2] 处的代码会将用户重定向到登录页面。

一旦用户提供用户名/密码并单击登录，身份提供程序就会重定向回查询字符串中包含“代码”的应用程序，也就是说，当我期望 [1] 处的代码使用代码登录用户时（通过将其兑换为令牌）。

相反，tryLogin() 方法不起作用，并且用户再次在无限循环中重定向到授权端点。

请帮助我理解这里出了什么问题。

另外，此示例： https: //github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/ 适用于版本 8 吗？

目前，我正在开发Angular2应用，并希望使用B2C租户进行身份验证。它不起作用，因为出现错误：

发现文档中的发行人无效：

设置和配置与https://github.com/manfredsteyer/angular-oauth2-oidc中所述完全相同。

在给定的示例中，使用以下功能：

private configureWithNewConfigApi() {
  this.oauthService.configure(authConfig);
  this.oauthService.tokenValidationHandler = new JwksValidationHandler();
  this.oauthService.loadDiscoveryDocumentAndTryLogin();
}

不幸的是，loadDiscoveryDocumentAndTryLogin对我不起作用，因为对于Azure B2C，我需要添加具有附加参数（策略）的另一个URI。所以我尝试了“旧”功能loadDiscoveryDocument

新的代码如下所示：

private configureWithNewConfigApi() {
  this.oauthService.configure(authConfig);
  this.oauthService.tokenValidationHandler = new JwksValidationHandler();
  //this.oauthService.loadDiscoveryDocumentAndTryLogin();

  const result = this.oauthService.loadDiscoveryDocument(
    'https://login.microsoftonline.com/myportalb2c.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_signin_signup')
    .then(() => {
      console.log('b2c discovery loaded');
      this.oauthService.tryLogin({});
    }).catch(() => {
      console.error('b2c discovery load error');
    });
  }

这是函数的第一部分：

public loadDiscoveryDocument(fullUrl: string = null): Promise<object> {

    return new Promise((resolve, reject) => {

        if (!fullUrl) {
            fullUrl = this.issuer || '';
            if (!fullUrl.endsWith('/')) {
                fullUrl += '/'; …

我在Identity Server 4 中使用angular-oauth2-oidc。

用户需要通过 OpenId Connect 隐式流登录。我的 ID 和访问令牌存储在 Web 浏览器 localStorage 中。

当用户打开多个浏览器选项卡，然后用户从其中一个选项卡注销时，我应该如何处理其余的选项卡？

我试图捕捉 session_terminate 事件，他们试图将用户注销。但是，它不会将用户重定向回登录页面。

this.oauthService.events.filter(e => e.type ==='session_terminated')
                  .subscribe(e => {this.oauthService.logout();})

有什么建议？谢谢

我遵循的是angular-oauth2-oidc库的入门指南，但是它存储的唯一内容是nonce值，access_token它不会出现在任何地方。

这是我的配置AuthConfig。

export const AUTHCONFIG: AuthConfig = {
    loginUrl: 'https://login.microsoftonline.com/xxxxxxxx/oauth2/authorize',
    redirectUri: window.location.origin + '/', //localhost:4200/
    clientId: 'the id of my angular app registered in azure',
    resource: 'the id of my web api in nodejs also registered',
    oidc: true,
    requireHttps: false // this is for testing in localhost
};

我app.component.ts有以下内容：

export class AppComponent {
     constructor(private oauthService: OAuthService) {this.loadConfig()}
     loadConfig(): void {
         this.ouathService.configure(AUTHCONFIG);
         this.ouathService.tokenValidationHandler
                          = new JwksValidationHandler();
         this.ouathService.token.setStorage(localStorage);
     }
}

在我的login.component.ts我有：

export …

我正在尝试将angular-oauth2-oidcSilent Refresh实现与 IdentityServer4 服务器中配置的隐式流结合使用。我有一个在ng new ng-and-ids4 --minimal具有此组件的应用程序中工作的概念证明：

import { Component } from '@angular/core';
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome!</h1>
    <p>
      <button (click)='login()'>login</button>
      <button (click)='logout()'>logout</button>
      <button (click)='refresh()'>refresh</button>
    </p>
    <h2>Your Claims:</h2><pre>{{claims | json}}</pre>
    <h2>Your access token:</h2><p><code>{{accessToken}}</code></p>`,
  styles: []
})
export class AppComponent {
  constructor(public oauthService: OAuthService) {
    this.oauthService.configure({
      issuer: 'http://localhost:5000',
      redirectUri: window.location.origin + '/',
      silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
      clientId: 'my-spa',
      scope: 'openid profile',
      silentRefreshTimeout: 5000, // For faster …

我正在使用 Angular-oauth2-oidc 在 Angular 10 应用程序中实现授权代码流。主要思想很简单，我只有一个带有按钮的应用程序组件。当用户单击它时，他必须被重定向到身份验证提供程序登录页面，并在成功登录后返回到应用程序。

身份验证由以下服务处理：

export class AuthenticationService {
  private authCodeFlowConfig: AuthConfig = {
    issuer: ...
  };

  constructor(public oauthService: OAuthService) {
    this.oauthService.configure(this.authCodeFlowConfig);

    if (location.href.indexOf('?code') > 0) {
      this.oauthService.loadDiscoveryDocumentAndLogin();
    }
  }

  async login(): Promise<void> {
    await this.oauthService.loadDiscoveryDocumentAndLogin();
  }
}

这可行，但我对构造函数中的 URL 检查有点困扰。但是，如果我不这样做，用户将被正确重定向到登录页面，并在成功登录后返回应用程序，但他会陷入代码流的中间。事实上，授权代码存在于 URL 中，但是 Angular-oauth2-oidc 没有处理它，这就是为什么如果存在“code”查询字符串，我必须再次调用构造函数中的登录方法。

我怀疑我做错了什么，因为我期望 angular-oauth2-oidc 会自动处理代码。

我在这里错过了什么吗？

我想在我的 Angular SPA 中使用带有 PKCE 的代码流，为了方便起见，我使用这个库：angular-oauth2-oidc

如果您单击该链接，它表示通过此配置您将使用带有 PKCE 的代码流：

let authConfig: AuthConfig = {
      issuer: 'https://myIssuerURL.com',
      redirectUri: 'https://myRedirectURI.com',
      clientId: environment.myclientId,
      scope: 'openid',
      responseType: 'code',
      showDebugInformation: true,
    };

当用户单击登录时，我使用此命令初始化流程：

this.oauthService.initCodeFlow();

这有效，我收到了访问权限和 ID 令牌，但如何确定我正在使用带有 PKCE 的代码流，而不仅仅是没有 PKCE 的正常代码流？代码质询和验证程序的创建和存储是否全部由库为我处理？有没有办法停止该过程并查看授权代码或代码质询？

这可能是一个奇怪的问题，但我只是想确定它正在使用 PKCE...

我正在使用 angular-oauth2-oidc 进行身份验证，但我不知道如何获取访问令牌。我正在使用具有此配置的 PKCE 代码流

  authConfig: AuthConfig = {
    issuer: 'https://test.com/oauth/token',
    // requireHttps: false,
    redirectUri:'http://localhost:4200/',
    strictDiscoveryDocumentValidation: false,
    tokenEndpoint: 'https://test.com/oauth/token',
    clientId: 'test',
    // dummyClientSecret: 'test',
    scope: 'openid',
    oidc: true,
    responseType: 'code',
    showDebugInformation: true,
    requestAccessToken: true
  };

流程是使用此代码启动的，登录后它会被重定向，但我无法获得任何令牌。

  getAutherizationCodeWithPKCE() {
    this.oauthService.configure(this.authConfig);
    this.oauthService.initCodeFlow();
    this.oauthService.loadDiscoveryDocumentAndTryLogin
}

我将angular-oauth2-oidc库与隐式流（带有 IdentityServer4 服务器）结合使用。我已经成功地从 docs设置了Silent Refresh 建议。

以下是我在包装服务中引导事物的方式：

private userSubject = new Subject<User>();

constructor(private config: ConfigService, private oAuthService: OAuthService)
{ }

// Called on app load:
configure(): void {
    const config: AuthConfig = {
      issuer: this.config.getIdentityUrl(),
      logoutUrl: this.config.getIdentityUrl() + '/connect/endsession',
      redirectUri: window.location.origin + '/',
      silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
      clientId: 'my_client_id',
      scope: 'openid profile my_api',
      sessionChecksEnabled: true,
    };

    this.oAuthService.configure(config);
    this.oAuthService.tokenValidationHandler = new JwksValidationHandler();

    this.oAuthService
      .loadDiscoveryDocumentAndLogin()
      .then((_) => this.loadUserProfile());

    this.oAuthService.setupAutomaticSilentRefresh();
}

private loadUserProfile() {
  this.oAuthService.loadUserProfile()
    .then((userProfile) => …