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

我在基于React JS的chrome扩展中使用的是

1.3.2

。为了在我的应用程序的其余部分中使用承载令牌，我需要支持两种登录场景：

promplogin（）

处理用户首次在我的扩展中进行身份验证

getTokenAsync（）

为已经在my extension中进行身份验证的用户以静默方式获取承载令牌。这种方法返回一个我不使用的id令牌，是吗？相反，在本文底部的源代码中，您将看到我在这之后调用

promplogin（）

来获取承载令牌

如果用户是否经过身份验证，则这两种方法都会在主

login（）

方法中调用。从MSAL.js文档中可以看出，

redirectUri

是可选的，我的两个场景的身份验证在没有此属性的localhost上的开发环境中工作正常

当用户通过Chrome或新的Microsoft Edge与扩展交互时，生产中似乎需要此属性。我不确定在这种情况下，重定向URI是什么，或者我是否需要重定向URI。我相信它的格式应该是

https://ihmmiapcpnfpphpdinbmjfglladedjoa.chromiumapp.org/

我期望的流程是当用户第一次单击“登录”时，my

PrompLogin（）

处理他们的请求

我用我的帐户登录

然后得到这个错误

以下是我的应用注册和Azure AD中的重定向URI。“支持的帐户类型为：任何组织目录中的帐户（任何Azure AD目录-多租户）”。我还检查了“访问令牌”和“ID令牌”中的“要启用隐式授权流，请选择您希望由授权端点颁发的令牌：”

这是我的MSAL配置

this.msalConfig={
认证：{
clientId:process.env.REACT\u APP\u MICROSOFT\u GRAPH\u CLIENT\u ID，
重定向URI:“https://ihmmiapcpnfpphpdinbmjfglladedjoa.chromiumapp.org/popup.html"
},
};
this.msalInstance=新的Msal.UserAgentApplication（this.msalConfig）；
此文件的作用域=[
“directory.accessUser.all”，
“directory.readwrite.all”，
“user.readwrite.all”
];

主登录方法

async login（）{
if（this.msalInstance.getAccount（））{
警报（“已验证”）；
const token=wait this.getTokenAsync（）；
返回令牌；
}否则{
警报（“未验证，请登录”）；
等着吧；
const token=wait this.getTokenAsync（）；
返回令牌；
}        
}

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

getTokenAsync（）{
返回新承诺（（解决、拒绝）=>{
让令牌请求={
scopes:this.scopes
};
this.msalInstance.acquireTokenSilent（tokenRequest）
。然后（响应=>{
解析（response.accessToken）；
})
.catch（错误=>{
console.error（`E:${err}`）；
if（err.name==“InteractionRequiredAuthError”）{
返回此.msalInstance.acquireTokenPopup（tokenRequest）
。然后（响应=>{
解析（response.accessToken）；
})
.catch（错误=>{
console.error（`E:${err}`）；
拒绝（）；
});
}
});
});
}
促发素（）{
返回新承诺（（解决、拒绝）=>{
让loginRequest={
scopes:this.scopes
};          
this.msalInstance.loginPopup（loginRequest）
。然后（响应=>{
log（`res:${JSON.stringify（response）}`）；
解决（）；
})
.catch（错误=>{
警报（`E:${err}`）；
console.error（`E:${err}`）；
拒绝（）；
});
});
}

chrome扩展的协议是

chrome扩展：//

，因此我认为您的重定向uri应该是：

chrome-extension://ihmmiapcpnfpphpdinbmjfglladedjoa/popup.html

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

重定向URI添加到Azure门户中应用程序的重定向URI中（在“移动和桌面应用程序”下）

用于重定向URI的页面包含在扩展的

manifest.json

部分中

---

我只需使用Chrome Identity API即可实现这一点，如下所示：

var redirectUrl = chrome.identity.getRedirectURL()

/*global chrome*/
chrome.identity.launchWebAuthFlow(
  {
    url: 'https://login.microsoftonline.com/<tenant id or just 'common'>/oauth2/v2.0/authorize?' +
      'response_type=token' +
      '&response_mode=fragment' +
      `&client_id=Azure AD Application Client ID` +
      `&redirect_uri=${redirectUrl}` +
      '&scope=openid https://management.azure.com/user_impersonation profile',
    interactive: true
  },
  function (responseWithToken) {
      // the access token needs to be extracted from the response.
  }
);

var redirectUrl=chrome.identity.getRedirectURL（）
/*全球铬*/
chrome.identity.launchWebAuthFlow(
{
网址：'https://login.microsoftonline.com//oauth2/v2.0/authorize?' +
“响应类型=令牌”+
“&response_mode=fragment”+
`&客户端\u id=Azure AD应用程序客户端id`+
`&redirect_uri=${redirectUrl}`+
'&scope=openidhttps://management.azure.com/user_impersonation 档案'，
互动：真的
},
函数（responseWithToken）{
//需要从响应中提取访问令牌。
}
);

---

此外，您需要在manifest.js中为权限添加标识，这在这里有很好的文档记录：

我收到一个

ERR\u BLOCKED\u BY\u CLIENT

错误，而不是说“IHMMIApppnfpphpdinbmjfgladedjoa被阻止了对服务器的请求被扩展阻止了。请尝试禁用您的扩展。”，我有一个类似的设置，并有困难让它工作。你弄明白了吗？