我正在尝试开发一个VueJS单页应用程序,可让您登录到AAD,以便我可以获取访问令牌来调用各种API(例如Graph)。
一旦用户已登录,您必须获取一个令牌,有两种方法可以做到这一点:静默方式(如果此方法失败,则使用重定向体验)。
但是,我无法通过这两种方法获取令牌:
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();
}
}
一旦我加载了SPA,就会被重定向到AAD登录页面。然后我会收到以下警告提示:- 使用静默方式时出错:ClientAuthError: no_account_in_silent_request:请传递一个帐户对象,否则不支持静默流程。 - 使用重定向时出错:BrowserAuthError: interaction_in_progress:互动正在进行中。在调用交互式API之前,请确保已完成此交互。 - (重定向)Graph token未定义
即使我已经登录,为什么`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
存在一些差异。
在这里,我们被告知只需向acquireTokenSilent
方法传递一组范围即可。然而,在这里,我们被告知除了作用域之外还要同时传递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)
}
}
}
handleRedirectPromise
,但我不确定。 - chivano