web-dev-qa-db-ja.com

Azure B2Cおよび保護されていないリソースでユーザーを認証するためにMSALライブラリを使用してMSALライブラリを使用するエラー

MSAL 1.3を使用して、.NETコアバックエンドAPIを持つMy Angular 8アプリでAzure B2Cユーザーを認証します。ユーザーがログインしていない場合は、すべてのWebAPIで保護されていないエンドポイントを呼び出して新しいユーザーを登録しようとしているときにエラーが発生します。呼び出しは、Serivceクラス（service.ts）で行われ、エラーが言われます

MSALロギング：THU、2020年1月18日18:21:19 GMT：2335B876-D867-4B1F-9D3F-D285CAA0EE04-1.3.0 - スコープのトークンを取得するときのエラーエラー: https://fabrikamb2c.onmicrosoft.com /helloapi/demo.read clientautherror：ユーザーログインが必要です。サイレントコールの場合、リクエストにはSIDまたはLOGIN_HINT MYCOMPONENT.COMPONENT.TSが含まれている必要があります.132 ClientAutherror：ユーザーログインが必要です。サイレントコールの場合、リクエストにはSIDまたはLOGIN_HINTのいずれかを含める必要があります。

到達しようとしているAPIは、unprotectedResourcesとMSALがトークンを静かに取得しようとしてはならないので、ユーザーがログインしているかどうかを確認してください。

My B2C設定は以下のようになります

_import { Configuration } from 'msal';
import { MsalAngularConfiguration } from '@Azure/msal-angular';

// this checks if the app is running on IE
export const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        resetPassword: "b2c_1_reset",
    },
    authorities: {
        signUpSignIn: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi"
        },
        resetPassword: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset"
        } 
    }
}


export const apiConfig: {b2cScopes: string[], webApi: string} = {
    b2cScopes: ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read'],
    webApi: 'https://fabrikamb2chello.azurewebsites.net/hello'
};


export const msalConfig: Configuration = {
    auth: {
        clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902",
        authority: b2cPolicies.authorities.signUpSignIn.authority,
        redirectUri: "http://localhost:6420/",
        postLogoutRedirectUri: "http://localhost:6420/",
        navigateToLoginRequestUrl: true,
        validateAuthority: false,
      },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: isIE, // Set this to "true" to save cache in cookies to address trusted zones limitations in IE
    },
}


export const loginRequest: {scopes: string[]} = {
    scopes: ['openid', 'profile'],
};

// Scopes you enter will be used for the access token request for your web API
export const tokenRequest: {scopes: string[]} = {
    scopes: apiConfig.b2cScopes // i.e. [https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read]
};


export const protectedResourceMap: [string, string[]][] = [
    [apiConfig.webApi, apiConfig.b2cScopes] // i.e. [https://fabrikamb2chello.azurewebsites.net/hello, ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read']]
];


export const msalAngularConfig: MsalAngularConfiguration = {
    popUp: !isIE,
    consentScopes: [
        ...loginRequest.scopes,
        ...tokenRequest.scopes,
    ],
    unprotectedResources: ["https://fabrikamb2chello.azurewebsites.net/api/register"], // API calls to these coordinates will NOT activate MSALGuard
    protectedResourceMap,     // API calls to these coordinates will activate MSALGuard
    extraQueryParameters: {}  
}
_

私のアプリモジュールは以下のようになります

_import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';

import { Configuration } from 'msal';
import {
  MsalModule,
  MsalInterceptor,
  MSAL_CONFIG,
  MSAL_CONFIG_ANGULAR,
  MsalService,
  MsalAngularConfiguration
} from '@Azure/msal-angular';

import { msalConfig, msalAngularConfig } from './app-config';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

function MSALConfigFactory(): Configuration {
  return msalConfig;
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return msalAngularConfig;
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatButtonModule,
    MatListModule,
    AppRoutingModule,
    MatCardModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_CONFIG,
      useFactory: MSALConfigFactory
    },
    {
      provide: MSAL_CONFIG_ANGULAR,
      useFactory: MSALAngularConfigFactory
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
_

何か案は？

angularangular8azure-ad-b2cmsal
5
rumi

保護されていないリソース配列に個々のルートを含むすべてのエンドポイントのリストが含まれている場合に機能します。

次のURLを追加するだけではありません

https://some-webapi.azurewebsites.net/api/Home/ _

しかし、以下は働きます

https://some-webapi.azurewebsites.net/api/Home/HelloGet _

https://some-webapi.azurewebsites.net/api/Home/HelloPost _

0
rumi