0

我正在尝试使用angular-oauth2-oidc auth 配置在 angular8 中的 azure ad b2c 工作流程中将自定义变量作为“状态”传递，并且需要在我的公共登录页面中访问此值。

我必须处理多个登录页面/应用程序，这些页面/应用程序需要重定向到一个公共登录页面 index.html，并且需要访问自定义字符串来识别请求的应用程序。

例如：我有 2 个登录页面

     **- Login1.html**
     **- Login2.html**
     
     Both the login pages redirect to a common page **'http://localhost:4200/index.html'**.(This is the value I have set as redirect URL in the azure ad b2c application portal).
     
     My need is when the user logins from Login1.html then after the successful authentication from b2c the redirect URL should pass a custom string called 'log1'  and I need to get this value in the index.html page also.

当我尝试使用许多文章添加状态以及重定向 URL 时，由于重定向 URL 不匹配，它经常返回错误。

当我尝试将其添加到 authConfig 文件中时，它显示错误，因为“对象文字可能只指定已知属性，并且“状态”在“AuthConfig”类型中不存在

谁能帮我选择一个正确的解决方案。提前致谢。

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OAuthService, NullValidationHandler } from 'angular-oauth2-oidc';
import { authConfig, DiscoveryDocumentConfig } from './auth.config';

@Component({
  selector: 'app-root',
  template: `
  <h1 *ngIf="!claims">
  Hi!
  </h1>
  
  <h1 *ngIf="claims">
  Hi, {{claims.given_name}}!
  </h1>
  
  <h2 *ngIf="claims">Your Claims:</h2>
  
  <pre *ngIf="claims">
  {{claims | json}}
  </pre>
  <br />
  
  <div *ngIf="!claims">
  <button (click)="login()">Login</button>
  </div>
  
  <div *ngIf="claims">
    <button (click)="logout()">Logout</button>
    <button (click)="getMessage()">API Call</button>
    <div *ngIf="message">
      Response:
      {{message | json}}
    </div>
  </div>
  `,
  styles: []
})
export class AppComponent {
  constructor(private http: HttpClient, private oauthService: OAuthService) {
    this.configure();
    let loginval = this.oauthService.tryLoginImplicitFlow();
    let token = this.oauthService.getAccessToken();
    let state = this.oauthService.state;
  }

  message: string;

  public getMessage() {
    this.http.get("https://localhost:5001/values", { responseType: 'text' })
      .subscribe(r => {
        this.message = r
        console.log("message: ", this.message);
      });
  }

  public login() {
    this.oauthService.initLoginFlow();
  }

  public logout() {
    this.oauthService.logOut();
  }

  public get claims() {
    let claims = this.oauthService.getIdentityClaims();
    return claims;
  }

  private configure() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new NullValidationHandler();
    this.oauthService.loadDiscoveryDocument(DiscoveryDocumentConfig.url);
  }
}

auth.config.ts（示例）

import { AuthConfig } from 'angular-oauth2-oidc';

export const DiscoveryDocumentConfig = {
    url: "https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_susi"
}

export const authConfig: AuthConfig = {
    redirectUri: window.location.origin + '/index.html',
    responseType: 'token id_token',
    issuer: 'https://aboutazure.b2clogin.com/b88448e7-64f3-497b-a7aa-73ae0cc6e9ce/v2.0/',
    strictDiscoveryDocumentValidation: false,
    tokenEndpoint: 'https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi',
    loginUrl: 'https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi',
    clientId: '0c295dee-8904-4546-92b7-dc64dd14bf58',
    scope: 'openid profile https://aboutazure.onmicrosoft.com/foo-api/user_impersonation',
    skipIssuerCheck: true,
    clearHashAfterLogin: true,
    oidc: true,
}
4

0 回答 0