MSAL / B2C錯誤：獲取有效的ID令牌后，“安全連接失敗”

Question

簡短的摘要：

我有一個使用MSAL-angular.js庫向.NET CORE API應用程序進行身份驗證的Angular 7.0前端客戶端。 兩者都使用B2C托管在Azure上。

下面的調用在URL中返回有效的ID令牌，但隨后出現以下錯誤（每個瀏覽器的微小區別）：

A. Chrome：

該站點無法提供安全連接，本地主機發送了無效響應。 ERR_SSL_PROTOCOL_ERROR

B.Firefox

安全連接失敗

與localhost：4200的連接期間發生錯誤。 SSL收到的記錄超過了最大允許長度。 錯誤代碼：SSL_ERROR_RX_RECORD_TOO_LONG

IE瀏覽器

無法安全連接到此頁面，這可能是因為該網站使用了過時或不安全的TLS安全設置。

詳細步驟：

1. 客戶端在MyAuth.service.ts中進行身份驗證

import { MsalService, BroadcastService } from '@azure/msal-angular';
// unrelated code...
export class MyAuthService{
constructor(private http: HttpClient, 
private authService : MsalService,  
private broadcastService: BroadcastService,
private httpService: HttpServiceHelper) { }

public loginMSAL() {
this.authService.loginPopup(["openid", "offline_access",
"https://myBusinessName.onmicrosoft.com/api-dev/user_impersonation"]).  
then(function (idToken: any) {
  console.log("token: "+idToken); //This never gets hit.
});
console.log("...exit loginMSAL()..."); //
}

2. 彈出窗口顯示使用此URL登錄用戶（“ 04d8c97b” ID是我的Azure B2C租戶ID ，mybusinessname.onmicrosoft.com）：

https://login.microsoftonline.com/04d8c97b-23df-4533-b5fe-197f0117556c/oauth2/v2.0/authorize
?response_type=id_token
&scope=offline_access
%20https%3A%2F%2Fmybusinessname.onmicrosoft.com
%2Fapi-dev
%2Fuser_impersonation
%20openid
%20profile
&client_id=0af5e22c-1233-470f-b2a8-e47038c69524 //This is my angular web client's ID on Azure.
&redirect_uri=https%3A%2F%2Flocalhost%3A4200%2F
&state=c5a0006a-80f0-4d25-9eeb-49ddd0bc292b
&nonce=2699ca31-52f3-455b-9906-137772f2f0a8
&client_info=1&x-client-SKU=MSAL.JS
&x-client-Ver=0.2.1
&client-request-id=d9eed293-c1bd-4f75-a824-dc0bfe956c17
&prompt=select_account
&response_mode=fragment
&sso_reload=true

2.a）登錄彈出窗口似乎工作正常。 它顯示了我以前登錄的帳戶名稱testUser1@mybusinessname.onmicrosoft.com。

2.b）輸入密碼正常，然后開始痛苦。

3. 彈出窗口給出上面的錯誤，但URL更改為以下內容，表示已獲得有效的ID令牌。 網址是：

https：// localhost：4200 /＃id_token = eyJ0e ...此處是長令牌...

＆狀態= 26deef89-94db-49ec-94a6-fbb6e7f93f13

＆session_state = ca5489a4-842a-48f2-9fa5-7b85a1582d55

4. 將令牌放入jwt.ms，看起來有效：

 {
      "typ": "JWT",
      "alg": "RS256",
      "kid": "nbCwW11w3XkB-xUaXwKRjLjMHGQ"
    }.{
      "aud": "0af5e22c-1233-470f-b2a8-e47038c69524",
      "iss": "https://login.microsoftonline.com/04d8c97b-25df-4533-b5fe-197f0117556c/v2.0", *//This is the ID for my Azure B2C Tenant, 'mybusinessname.onmicrosoft.com'*
      "iat": 1545600536,
      "nbf": 1545600536,
      "exp": 1545604436,
      "aio": "ATQAy/8JAAAARe1ST0VN1rzLio14LI4Y6B6VcY1nPurvB2G+FOWLjs/3QtkQdiHfRVnpgw6Ohm/2",
      "name": "TestUser1",
      "nonce": "ee43f038-bb35-438f-a9ca-2ca8b649dea4",
      "oid": "2755d0c4-19ab-495e-9441-4ae6fe87e17a",
      "preferred_username": "testUser1@mybusinessname.onmicrosoft.com",
      "sub": "WcB02vJDa7vzfgWbJTY8m604eYhGosphCmr569Wc7Yc",
      "tid": "04d8c97b-25df-4533-b5fe-197f0117556c",
      "uti": "mC5BVa6fukuEXIVB5jJYAA",
      "ver": "2.0"
    }.[Signature]

5. 不確定是否相關，但這是我的MSAL配置：

    @NgModule({
  imports: [
    CommonModule,
    MsalModule.forRoot({
      clientID: '0af5e22c-1233-470f-b2a8-e47038c69524', // Azure B2C ID for my angular web client, 'mybusinessname-web-dev'.
      authority: "https://login.microsoftonline.com/mybusinessname.onmicrosoft.com",
      redirectUri: "https://localhost:4200/", 
      cacheLocation : "sessionStorage",
      postLogoutRedirectUri: "https://localhost:4200/",
      navigateToLoginRequestUrl: false,
      unprotectedResources: ["https://localhost:4200/"],
      popUp: true,
      validateAuthority: false
    })

感謝任何可能的幫助！

Answer 1

令牌與此錯誤無關。 該問題可能是在托管服務上證明的。 使用網絡工具/提琴手，有助於了解哪個外部調用會返回TLS錯誤。 如果獲取令牌的調用返回了令牌，則將是B2C問題，否則將是托管服務的端點的問題。

您也可以在Chrome上遵循此TLS問題