3

Angular2 で MSAL ライブラリを使用して B2C Azure 認証を実行しようとしています。ログイン ページは完全に Azure ページにリダイレクトされ、ユーザーにユーザー名とパスワードの入力を求めます。サインイン ボタンをクリックして認証が成功すると、ページは自分自身をアプリケーションのランディング ページにリダイレクトし、「ユーザー」オブジェクトを AzureAD から取得したものに設定する必要があります。認証は成功しますが、ユーザー オブジェクトが設定されず、アプリケーションが失敗します。

app.component.ts

import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { AuthService } from 'app/services/auth.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [AuthService]
})
@Injectable()
export class AppComponent {
    public user:Msal.User;
    public userInfo: any = null;
    public apiCallFailed: boolean;
    public loginFailed: boolean;

    constructor(private authService: AuthService,
                private partnerService: PartnerService) {
                  authService.user$.subscribe((newUser: Msal.User) => {
                    console.log('change detected');
                     this.user = newUser;
                    });
    }

    public login() {
        this.loginFailed = false;
        this.authService.login()
      //
    }

auth.service.ts

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Rx';
import {Subject} from 'rxjs/Rx';
import '../../../node_modules/msal/out/msal';
/// <reference path="../../../node_modules/msal/out/msal.d.ts" />
import { WindowRef } from '../windowRef';

@Injectable()
export class AuthService {
  private applicationConfig: any = {
    clientID: '**************************',
    authority: "https://login.microsoftonline.com/tfp/*********",
    b2cScopes: ["some.scope"],
    webApi: 'http://localhost:3000/api/partners',
    redirect_uri: 'http://localhost:6420'
  };
  private app: any;      
  private user =new Subject<Msal.User>();
  user$ = this.user.asObservable();

  constructor(private winRef: WindowRef) {
    this.app = new Msal.UserAgentApplication(this.applicationConfig.clientID, this.applicationConfig.authority,
      (errorDesc, token, error, tokenType) => {
        console.log(this.winRef.nativeWindow.msal.getUser())
        this.user.next(this.winRef.nativeWindow.msal.getUser());
      }
    );
  }
  public login() {
    return this.app.loginRedirect(this.applicationConfig.b2cScopes)

  }

私は Angular2 がまったく初めてで、学習曲線の初期段階にあります。いくつか読んだ後、私はオブザーバブルが前進する方法であることがわかり（私は間違っている可能性があります）、サービスのユーザーオブジェクトを「オブザーバブル」にし、コンポーネントをサブスクライブして、サービスごとのユーザーオブジェクトの変更をキャプチャできるようにしましたそして、コンポーネントによってそれに基づいて行動しました。しかし、それは機能していません。

app.component.html

<button (click)="login()" type="button" *ngIf="!user">Login</button>
<button (click)="callAPI()" type="button" *ngIf="user">Call API</button>
<button (click)="logout()" type="button" *ngIf="user">Logout</button>

上記のコードのように、認証が成功した後でも、(ユーザーが設定されていないため) 「ログイン」ボタンのみが表示され、他のボタンは期待どおりに表示されません。私を正しい方向に導く助けがあれば大歓迎です。

4

0 に答える 0