适用于 Chrome 扩展的 Azure AD 应用重定向 URI

我正在使用适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js)版本1.3.2在我的基于 React JS 的 chrome 扩展中。我需要支持两个登录场景，以便获得在应用程序的其余部分中使用的不记名令牌：

1. promptLogin()处理用户第一次在我的扩展中进行身份验证。
2. getTokenAsync()为已在我的扩展中进行身份验证的用户静默获取不记名令牌。这种方法返回一个我不使用的 id 令牌，应该吗？相反，在帖子底部的源代码中，您会看到我调用promptLogin()在此之后获取不记名令牌。

这两个方法都在 main 中调用login()基于用户是否经过身份验证的方法。从 MSAL.js 文档看来redirectUri是可选的，我的两个场景的身份验证在没有此属性的本地主机上的开发环境中按预期工作。

这个性质redirectUri当用户通过 Chrome 或新的 Microsoft Edge 与扩展程序交互时，在生产中似乎需要这样做。我不确定是什么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;
    }        
}

我的两个场景的逻辑基于用户是否经过身份验证。

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();
        });
    });
}

chromium 扩展的协议是chrome-extension://，所以我相信你的重定向 uri 应该是：chrome-extension://ihmmiapcpnfpphpdinbmjfglladedjoa/popup.html

编辑：除了使用上述重定向 URI 格式外，您还需要确保以下内容：

1. 重定向 URI 将添加到 Azure 门户中应用程序的重定向 URI（在“移动和桌面应用程序”下）。
2. 用于重定向 URI 的页面包含在web_accessible_resources您的扩展程序的部分manifest.json.