使用 Auth0 的 Microsoft Teams 选项卡加载应用程序答案

【问题标题】：Microsoft Teams tab loading app with Auth0使用 Auth0 的 Microsoft Teams 选项卡加载应用程序
【发布时间】：2021-04-30 06:26:36
【问题描述】：

我得到了一个使用 Auth0 进行身份验证的 Angular SPA。我尝试将其添加为 Microsoft 团队的应用程序，并且通常的用户名和密码登录工作正常，但是使用 LinkedIn 和 Google 最终无法在实际应用程序中工作，而只能在团队的 Web 客户端版本中工作。

我是 O365 领域的新手，并且还为团队开发应用程序，所以我不确定从哪里开始。

我的清单如下所示：

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "id": "XXXXXXXXXXXXXXXX",
  "version": "1.0",
  "packageName": "helloTeams",
  "developer": {
    "name": "Contoso",
    "websiteUrl": "https://www.contoso.com",
    "privacyUrl": "",
    "termsOfUseUrl": "",
    "mpnId": "6006813"
  },
  "name": {
    "short": "Hello world",
    "full": "Hello world"
  },
  "description": {
    "short": "Testing!",
    "full": "Testing!"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#6b009e",
  "configurableTabs": [],
  "staticTabs": [
    {
      "entityId": "XXXXXXXXXXXXX",
      "name": "Contoso",
      "contentUrl": "https://app.contoso.com/",
      "scopes": [
        "personal"
      ]
    }
  ],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "app.contoso.com", "*.google.com", "*.linkedin.com"
  ],
  "showLoadingIndicator": false,
  "isFullScreen": false
}

我已经尝试过使用重定向和弹出窗口为 google 和linkedin 执行登录流程，它们都不能在 Teams 桌面应用程序（Windows）中工作。任何关于从哪里开始寻找的线索将不胜感激。

【问题讨论】：

我没有在 Teams 中进行过这样的 AuthO 身份验证，所以我只是将其丢弃以防万一，但我不确定“validDomains”中是否允许通配符域.
是的。这似乎是清单文件的问题。谢谢！
好的，很高兴你来对了。请为评论点赞，以便得到认可。
@DanielKassell 想知道您是否可以提供一些示例代码或说明如何在 Auth0 中进行设置？您可以在设置中提供任何链接吗？我正在尝试做同样的事情，但是当我在 Teams 中预览时，我只是得到一个空白屏幕。我确定我缺少配置，但只是不确定，因为我无法找到此类设置的任何文档。

标签： angular single-sign-on single-page-application microsoft-teams auth0

【解决方案1】：

清单文件中的问题。它不支持域名中的通配符。

下一个问题是 Teams 应用程序正在执行 iframe，而 Google 和 LinkedIn 不支持 iframe 登录。尝试执行弹出式流程，但随后它在默认浏览器而不是团队中打开弹出式窗口。

后续问题：是否有一种简单的方法可以在 Teams 中打开弹出窗口？否则感觉就像我需要为团队创建一个全新的登录流程。

【讨论】：

我建议将此作为一个单独的问题提出，但是是的，Teams 有点不同，因为它会在您触发身份验证流程时启动它的 OWN 弹出窗口。听起来很有趣，你想做“重定向”流程，它发生在在这个弹出窗口中。
团队仅支持 IFrame 页面。这是设计使然。对于身份验证，Teams 将启动一个弹出窗口并对用户进行身份验证，而无需重定向到浏览器。请查看docs 了解更多信息。