如何为 Microsoft 团队应用程序的 Microsoft 应用程序门户配置重定向 URI

Question

我创建了一个 SharePoint Webpart 并将其启动到 Microsoft Teams。

Webpart 需要向 Microsoft Graph 发送请求以进行身份​​验证。在开发过程中，我在 apps.dev.microsoft.com 中添加了一个重定向 URL，它指向我的本地计算机 (https://localhost:4321/temp/workbench.html)。身份验证工作正常。

当 Web 部件位于 Teams 中时，URL 是特定于频道/选项卡的，我似乎无法重现该 URL 以完成身份验证。

我已经尝试了 URL 的组合，希望它们足以用于身份验证。在这里您可以看到运行良好的开发 URL。

这是带有 URL 的 Webpart，但我找不到这些 Id 的含义的参考，以便重现该链接。 Microsoft 应用注册也不允许复制和粘贴此链接，因为它包含查询。

https://teams.microsoft.com/_#/tab::d7cdb44e-ed6e-4dwb-82db-b933adc8152d/General?threadId=15:512c0d9b1af125d68b5d310de6f76f@thread.skype&ctx=channel

手动点击此链接会将我带到位于团队中的 Web 部件，但它具有无法在应用注册门户中使用的查询字符串。我还尝试缩小该网址并粘贴缩短的链接 - 但无济于事。

如果有人可以指出我在正确的上下文中重新创建我在上面发布的链接的正确方向，或者知道它不起作用的原因，请告诉我。谢谢。 （用于演示目的的链接）。

预期结果 - 登录窗口关闭，用户通过身份验证。

实际结果 - 身份验证关联失败，因为重定向链接不匹配。

我的 Webpart 有一个按钮 - 它的第一个功能是使用以下代码对用户进行身份验证：

 public async login(){
  var that = this;
   await me.userAgentApplication.loginPopup(config.scopes).then(async function (idToken) {
    await me.userAgentApplication.acquireTokenPopup(config.scopes).then(async function (accessToken) {
       that.getWebUrl(accessToken);
      }, function (error) {
          console.log(error);
      });
    });
}

所以它使用 Microsoft-graph 来进行身份验证。我也将托管站点添加到 Redirect-Urls 列表中。这可以从共享点站点进行很好的身份验证-但是我该如何将该访问令牌发送给团队。

Answer 1

重定向 URI 应该指向 您的 站点，而不是客户端应用程序。换句话说，您应该将它们重定向到 您 托管的页面。调用该页面后，您将处理身份验证（将授权代码转换为访问令牌、存储刷新令牌、验证 state 属性等），然后将它们重定向到最终目的地。

如果您需要将最终目的地传递到您的页面（即保留到频道的链接），您应该对其进行编码并使用state 参数传递它。这个state 将原封不动地返回到重定向页面。然后，您的应用程序可以对其进行解码以确定最终目的地。