我'm trying to get an Angular 4 app to correctly do an implicit authentication with Azure AD B2C. I'使用msal.js尝试使其工作 . 我已经检查了非常有限的official sample code，但是's of no real use as it'使用弹出窗口登录，我想进行重定向 .
我现在拥有的是我在我的应用程序中注入的以下身份验证服务，它应该负责所有身份验证 .
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令牌”确实会收到我可以使用的值，但是在有限的时间内 .
问题是当我尝试获取身份验证令牌时 . 第一次调用 acquireTokenSilent 会返回一个错误： Token renewal operation failed due to timeout: null .
然后，我得到一个弹出窗口，询问用户名和密码，一段时间后消失，我得到一个错误，说 User does not have an existing session and request prompt parameter has a value of 'None'. .
Edit:
所以，我想我明白了究竟发生了什么，并在一个示例应用程序上重现问题，你可以到这里：https://github.com/Gimly/NetCoreAngularAzureB2CMsal
如果从主页连接然后转到fetchData页面（具有天气预报的页面），您可以看到 acquireTokenSilent 正确兑换了身份验证令牌（打开浏览器控制台以获取所有日志） . 但是，如果直接在fetchData上刷新页面，您可以看到我描述的相同行为， acquireTokenSilent 失败并显示有关超时的错误 .
我最好的猜测是，出于某种原因，即使 getUser 返回正确的值，在我调用 getAuthenticationToken 之前msal还没有完全初始化，这就是它完全失败的原因 .
现在真正的问题......在尝试获取令牌之前，如何确保它已完全初始化？
2 回答
查看MSAL js的source code，您应该能够使用acquireTokenRedirect而不是acquireTokenPopup .
好的，所以我面临的问题是由两件事引起的：
1）msal.js中的一个错误导致初始化过程在构造函数调用结束时没有完全完成，我在完全初始化之前调用
acquireTokenSilent(). 这是在最新版本中修复的（截至编写时，仍在项目的开发分支中） . See this GitHub issue for more info .2）我没有修复重定向URI，这导致库将当前URL作为重定向URI，因为它不在允许的重定向URI列表中，所以会失败 .
解决了这两个问题后，我在我的问题中发布的代码正在按预期工作 .