问题描述
我正在尝试开发一个VueJS单页应用程序，该应用程序将您登录到AAD，以便我可以获取访问令牌以调用各种API（例如图）。
用户登录后，您必须获取令牌，并且有两种方法可以这样做：静默（如果失败，则使用重定向体验）。
export default class AuthService {
constructor() {
console.log('[AuthService.constructor] started constructor');
this.app = new Msal.PublicclientApplication(msalConfig);
this.signInType = 'loginRedirect';
}
init = async () => {
console.log('[AuthService.init] started init');
await this.app.handleRedirectPromise().catch(error => {
console.log(error);
});
try {
let signedInUser = this.app.getAllAccounts()[0];
// if no accounts,perform signin
if (signedInUser === undefined) {
alert(this.app.getAllAccounts().length == 0)
await this.signIn();
signedInUser = this.app.getAllAccounts()[0];
console.log("user has been forced to sign in")
}
console.log("Signed in user is: ",signedInUser);
// Acquire Graph token
try {
var graphToken = await this.app.acquiretokenSilent(authScopes.graphApi);
console.log("(Silent) Graph token is ",graphToken);
alert(graphToken);
} catch (error) {
alert("Error when using silent: " + error)
try {
var graphToken = await this.app.acquiretokenRedirect(authScopes.graphApi);
} catch (error) {
alert ("Error when using redirect is: " + error)
}
alert("(Redirect) Graph token is " + graphToken);
}
} catch (error) {
console.log('[AuthService.init] handleRedirectPromise error',error);
}
}
signIn = async () => {
console.log('[AuthService.signIn] signInType:',this.signInType);
this.app.loginRedirect("user.read","https://xxx.azurewebsites.net/user_impersonation");
}
signOut = () => {
this.app.logout();
}
}
然后我得到以下警报提示：
使用静默时发生错误：ClientAuthError：no_account_in_silent_request：请传递一个帐户对象，如果没有帐户信息，则不支持静默流
使用重定向时的错误是：browserAuthError：interaction_in_progress：正在进行交互。在调用交互式API之前，请确保此交互已完成。
即使我已登录，为什么acquiretokenSilent仍未登录？
browserAuthError: interaction_in_progress是什么意思？我在网上进行了搜索，发现的唯一结果是因为有人使用了过时的msal-browser版本。就我而言，我使用的是最新的（v2.0.1）。
更新1：
const silentRequest = {
account: signedInUser,scopes: authScopes.graphApi.scopes1
}
var graphToken = await this.app.acquiretokenSilent(silentRequest);
好像我以错误的格式传递了作用域（即应该传递一个数组，但实际上不是一个数组！）
但是，Microsoft文档中如何使用acquiretokenSilent
在here上，我们被告知只将一组范围传递给acquiretokenSilent方法。但是，over here被告知也要在范围旁边传递accountInfo。
让我们看看我现在是否可以acquiretokenRedirect上班...
更新2：
经过反复的尝试，我终于让acquiretokenRedirect工作了。
import * as Msal from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: "XYZ",authority: "ABC",},cache: {
cacheLocation: 'localStorage',storeAuthStateInCookie: true
}
};
export default class AuthenticationService {
constructor() {
this.app = new Msal.PublicclientApplication(msalConfig)
}
init = async () => {
try {
let tokenResponse = await this.app.handleRedirectPromise();
let accountObj;
if (tokenResponse) {
accountObj = tokenResponse.account;
} else {
accountObj = this.app.getAllAccounts()[0];
}
if (accountObj && tokenResponse) {
console.log("[AuthService.init] Got valid accountObj and tokenResponse")
} else if (accountObj) {
console.log("[AuthService.init] User has logged in,but no tokens.");
try {
tokenResponse = await this.app.acquiretokenSilent({
account: this.app.getAllAccounts()[0],scopes: ["user.read"]
})
} catch(err) {
await this.app.acquiretokenRedirect({scopes: ["user.read"]});
}
} else {
console.log("[AuthService.init] No accountObject or tokenResponse present. User must Now login.");
await this.app.loginRedirect({scopes: ["user.read"]})
}
} catch (error) {
console.error("[AuthService.init] Failed to handleRedirectPromise()",error)
}
}
}
解决方法
经过一些反复试验，但最终acquireTokenRedirect成功地工作了，以下摘录可能对其他人有帮助：
import * as Msal from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: "XYZ",authority: "ABC",},cache: {
cacheLocation: 'localStorage',storeAuthStateInCookie: true
}
};
export default class AuthenticationService {
constructor() {
this.app = new Msal.PublicClientApplication(msalConfig)
}
init = async () => {
try {
let tokenResponse = await this.app.handleRedirectPromise();
let accountObj;
if (tokenResponse) {
accountObj = tokenResponse.account;
} else {
accountObj = this.app.getAllAccounts()[0];
}
if (accountObj && tokenResponse) {
console.log("[AuthService.init] Got valid accountObj and tokenResponse")
} else if (accountObj) {
console.log("[AuthService.init] User has logged in,but no tokens.");
try {
tokenResponse = await this.app.acquireTokenSilent({
account: this.app.getAllAccounts()[0],scopes: ["user.read"]
})
} catch(err) {
await this.app.acquireTokenRedirect({scopes: ["user.read"]});
}
} else {
console.log("[AuthService.init] No accountObject or tokenResponse present. User must now login.");
await this.app.loginRedirect({scopes: ["user.read"]})
}
} catch (error) {
console.error("[AuthService.init] Failed to handleRedirectPromise()",error)
}
}
}
在Azure AD中检查您的应用程序注册。
MSAL v2要求迁移RedirectURI。
