如何配置ngrok实现Teams Tab跨设备调试并解决SSO token获取异常

前置操作：固定ngrok访问域名 #

动态生成的ngrok域名会触发各配置节点的自动重写逻辑，首先启动ngrok时绑定固定域名，命令如下：
ngrok http <本地服务端口> --domain=<你的自定义ngrok域名>.ngrok.io
所有后续配置统一使用该固定域名，不要混用localhost或其他临时地址。

全链路配置对齐，解决地址不匹配问题 #

所有配置节点的域名、资源URI必须完全一致，逐一修改以下位置：

• Teams应用manifest.json：contentUrl、websiteUrl全部替换为ngrok域名对应的Tab访问地址，validDomains添加你的ngrok域名，SSO配置节点的resource值与后续AAD的应用ID URI完全保持一致
• Azure AD应用注册：应用ID URI设置为api://<ngrok固定域名>/<AAD应用客户端ID>，所有重定向URI（包括单页应用、Web平台的回调地址）全部替换为ngrok域名对应的地址，删除所有localhost相关的重定向配置
• 项目配置文件：local.env、default.userdata中所有涉及服务域名、SSO资源地址、AAD应用ID URI的参数全部手动写死为ngrok对应的配置值，禁用框架自带的本地地址自动替换逻辑，避免配置被自动重写覆盖

修复iframe与资源URL匹配校验问题 #

Teams对Tab iframe的源地址和SSO资源地址有严格的匹配规则：

• 若使用Teams Toolkit开发，需注释掉teamsapp.local.yml中provision阶段的localhost自动替换逻辑，避免每次调试启动时自动覆盖已修改的配置
• 前端调用getAuthToken等SSO接口时，传入的资源参数要和AAD中配置的应用ID URI逐字符完全匹配，不要省略协议、后缀路径或多加斜杠

异常排查校验步骤 #

• 直接在浏览器访问ngrok域名对应的Tab地址，确认服务可正常访问，跨域配置已经放开
• 重新打包manifest并上传到Teams开发环境，清除Teams客户端缓存后重新加载Tab
• 若仍提示URI不匹配，直接复制Azure AD应用注册页展示的实际应用ID URI，和manifest、项目配置文件中的值逐字符比对，排查拼写、符号差异

内容的提问来源于stack exchange，提问作者TanglingTreats