【发布时间】：2020-06-15 20:25:03
【问题描述】：
我在基于 React JS 构建的 chrome 扩展中使用 Microsoft Authentication Library for JavaScript (MSAL.js) 版本 1.3.2。我需要支持两种登录方案，以便在我的应用程序的其余部分中使用不记名令牌：
-
promptLogin()处理用户第一次在我的扩展中进行身份验证。 -
getTokenAsync()为已经在我的扩展中进行身份验证的用户静默获取不记名令牌。这种方法返回一个我不使用的 id 令牌，我应该吗？相反，在帖子底部的源代码中，您会看到我在此之后立即调用promptLogin()以获取不记名令牌。
这两个方法都在主 login() 方法中调用，具体取决于用户是否经过身份验证。从 MSAL.js 文档来看，redirectUri 似乎是可选的，并且我的两个场景的身份验证在没有此属性的本地主机上的开发环境中按预期工作。
当用户通过 Chrome 或新的 Microsoft Edge 与扩展程序交互时，在生产中似乎需要此属性 redirectUri。我不确定在这种情况下redirectUri 会是什么，或者我什至需要一个。我相信它应该被格式化为https://ihmmiapcpnfpphpdinbmjfglladedjoa.chromiumapp.org/。
我期望的流程是当用户第一次点击“登录”时，我的promptLogin() 处理他们的请求。
我使用我的帐户登录
然后得到这个错误
这是我在 Azure AD 中的应用注册和重定向 URI。 “支持的帐户类型是：任何组织目录中的帐户（任何 Azure AD 目录 - 多租户）”。我还检查了“访问令牌”和“ID 令牌”中的“要启用隐式授权流程，请选择您希望由授权端点颁发的令牌：”。
这是我的 MSAL 配置。
this.msalConfig = {
auth: {
clientId: process.env.REACT_APP_MICROSOFT_GRAPH_CLIENT_ID,
redirectUri: "https://ihmmiapcpnfpphpdinbmjfglladedjoa.chromiumapp.org/popup.html"
},
};
this.msalInstance = new Msal.UserAgentApplication(this.msalConfig);
this.scopes = [
"directory.accessasuser.all",
"directory.readwrite.all",
"user.readwrite.all"
];
主要的登录方式。
async login() {
if (this.msalInstance.getAccount()) {
alert('authenticated');
const token = await this.getTokenAsync();
return token;
} else {
alert('not authenticated please sign in');
await this.promptLogin();
const token = await this.getTokenAsync();
return token;
}
}
我的 2 个场景的逻辑基于用户是否经过身份验证。
getTokenAsync() {
return new Promise((resolve, reject) => {
let tokenRequest = {
scopes: this.scopes
};
this.msalInstance.acquireTokenSilent(tokenRequest)
.then(response => {
resolve(response.accessToken);
})
.catch(err => {
console.error(`E: ${err}`);
if (err.name === "InteractionRequiredAuthError") {
return this.msalInstance.acquireTokenPopup(tokenRequest)
.then(response => {
resolve(response.accessToken);
})
.catch(err => {
console.error(`E: ${err}`);
reject();
});
}
});
});
}
promptLogin() {
return new Promise((resolve, reject) => {
let loginRequest = {
scopes: this.scopes
};
this.msalInstance.loginPopup(loginRequest)
.then(response => {
console.log(`res: ${JSON.stringify(response)}`);
resolve();
})
.catch(err => {
alert(`E: ${err}`);
console.error(`E: ${err}`);
reject();
});
});
}
【问题讨论】：
-
嗨，格雷格，我有类似的设置，但很难让它工作。你发现了吗？
标签： javascript google-chrome-extension azure-active-directory msal msal.js