适用于Chrome浏览器的Azure AD应用重定向URI。

Question

我用的是 微软JavaScript认证库(MSAL.js) 版本 1.3.2 在我的基于React JS的chrome扩展中。我有两个登录场景，我需要支持，以获得在我的应用程序的其余部分使用的不记名标记。

1. promptLogin() 处理用户第一次在我的扩展中进行认证的情况。
2. getTokenAsync() 处理为已经在我的扩展中认证过的用户默默地获取一个承载令牌。这种方法返回的id令牌，我并没有使用，难道我应该使用？相反，在我文章底部的源代码中，你会看到我调用了 promptLogin() 紧接着获取承载令牌。

这两个方法都是在主程序的 login() 方法，基于用户是否经过认证。从MSAL.js文档中可以看出，似乎 redirectUri 是可选的，在没有这个属性的情况下，我的两个方案的身份验证在localhost的开发环境中可以正常工作。

这个属性 redirectUri 在生产中，当用户通过Chrome或新的Microsoft Edge与扩展程序进行交互时，似乎需要使用该功能。我不确定 redirectUri 在这种情况下，或者说我是否需要一个。我相信它的格式应该是 https://ihmmiapcpnfpphpdinbmjfglladedjoa.chromiumapp.org/.

我期望的流程是当用户第一次点击 "LOG IN "时，我的。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();
        });
    });
}

Answer 1

铬元素扩展的协议是 chrome-extension://，所以我相信你的重定向URI应该是。chrome-extension://ihmmiapcpnfpphpdinbmjfglladedjoa/popup.html

编辑：除了使用上述重定向URI格式，你还需要确保以下几点。

1. 重定向URI被添加到你的应用程序的重定向URI在Azure门户网站（在 "移动和桌面应用程序 "下）。
2. 用于重定向 URI 的页面包含在 "移动和桌面应用程序 "中。web_accessible_resources 您的分机的 manifest.json.