我試圖讓Angular 4應用程序正確使用Azure AD B2C進行隱式身份驗證。我使用msal.js來嘗試使其工作。我已經檢查了非常有限的official sample code,但它沒有實際用處,因爲它使用彈出窗口登錄,我想重新定向。登錄使用Azure AD B2C從Angular應用程序和msal.js重定向
我現在擁有的是我在我的應用程序中注入的以下身份驗證服務,應該負責所有身份驗證。
import { Injectable } from '@angular/core';
import * as Msal from 'msal';
@Injectable()
export class AuthenticationService {
private tenantConfig = {
tenant: "example.onmicrosoft.com",
clientID: 'redacted (guid of the client),
signUpSignInPolicy: "b2c_1_signup",
b2cScopes: ["https://example.onmicrosoft.com/demo/read", "openid"]
}
private authority = "https://login.microsoftonline.com/tfp/" + this.tenantConfig.tenant + "/" + this.tenantConfig.signUpSignInPolicy;
private clientApplication: Msal.UserAgentApplication;
constructor() {
this.clientApplication = new Msal.UserAgentApplication(this.tenantConfig.clientID, this.authority, this.authCallback);
}
public login(): void {
this.clientApplication.loginRedirect(this.tenantConfig.b2cScopes);
}
public logout(): void {
this.clientApplication.logout();
}
public isOnline(): boolean {
return this.clientApplication.getUser() != null;
}
public getUser(): Msal.User {
return this.clientApplication.getUser();
}
public getAuthenticationToken(): Promise<string> {
return this.clientApplication.acquireTokenSilent(this.tenantConfig.b2cScopes)
.then(token => {
console.log("Got silent access token: ", token);
return token;
}).catch(error => {
console.log("Could not silently retrieve token from storage.", error);
return this.clientApplication.acquireTokenPopup(this.tenantConfig.b2cScopes)
.then(token => {
console.log("Got popup access token: ", token);
return token;
}).catch(error => {
console.log("Could not retrieve token from popup.", error);
this.clientApplication.acquireTokenRedirect(this.tenantConfig.b2cScopes);
return Promise.resolve("");
});
});
}
private authCallback(errorDesc: any, token: any, error: any, tokenType: any) {
console.log(Callback')
if (token) {
console.log("Id token", token);
}
else {
console.log(error + ":" + errorDesc);
}
this.getAuthenticationToken();
}
}
但它不工作。我正確地獲得了ID令牌,並且它是有效的,所以「Id令牌」確實收到了我可以使用的值,但是時間有限。
問題是當我嘗試獲取身份驗證令牌時。第一個電話,到返回一個錯誤,說:Token renewal operation failed due to timeout: null
。
然後,我得到一個彈出窗口,要求輸入用戶名和密碼,過了一會消失,我收到一條錯誤消息,說User does not have an existing session and request prompt parameter has a value of 'None'.
。
編輯:
所以,我想我明白髮生了什麼究竟怎麼回事,重現上一個示例應用程序,你可以得到這裏的問題:https://github.com/Gimly/NetCoreAngularAzureB2CMsal
如果從網頁連接,然後轉到fetchData頁面(具有天氣預報的頁面),您可以看到驗證令牌被正確兌換(打開瀏覽器控制檯以獲取所有日誌)。但是,如果直接在fetchData上刷新頁面,則可以看到與我描述的行爲相同的行爲,其中因超時錯誤而失敗。
我最好的猜測是,由於某種原因,即使getUser
返回一個正確的值,在調用getAuthenticationToken
之前msal並未完全初始化,這是它完全失敗的原因。
現在真正的問題......我如何確保它在嘗試獲取令牌之前完全初始化?
我想知道會發生什麼[如果你嘗試localStorage](https://stackoverflow.com/questions/45201872/how-to-use-localstorage-with-msal-js)? – spottedmahn
@spottedmahn剛剛嘗試過,它的行爲是一樣的。 – Gimly
@spottedmahn我發現了更多關於這個問題的信息,你能檢查我的編輯嗎? – Gimly