Teams 开发

@microsoft/teams-js

开发

Teams App实际是嵌在Teams里的iframe。和正常的web app开发类似，只是需要处理Teams的一些特定问题：

1. 登录：teams登录必须使用teams SDK弹出popup，在popup完成登录后将数据传给页面。同时，teams自带当前teams用户信息，如果teams里的email地址和我们的后端用户地址一致，通过该信息就可以和后端置换jwt token，完成无痕登录。处理逻辑在[TeamsLogin.jsx] 和 [Login.jsx]

2. 用户登录后在sessionStorage里设置 teams=true. 可以根据这个判断是否运行在teams中。未登录前判断是否在teams中是采用URL中是否有from=teams.

3. Teams内的页面都是以tab形式存在，需要在manifest.json中定义各tab页面。我们自己的menu和top bar需要隐藏。隐藏的逻辑在 [AuthenticatedLayout.jsx]

4. Teams需要web app采用https. 在本地开发时，已配置mkcert生成开发环境的证书。只需要在vite.config.js中使用HTTPS即可：

在/etc/hosts中配置

127.0.0.1 kuban.localhost

启动 https://kuban.localhost即可

配置Teams

注册Azure App

参考

https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-register-aad

其中确认Azure AD URL格式（替换appId为Azure AD API的Application Id)

https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/ProtectAnAPI/appId/${appId}

设置Application ID URL可能需要认证Domain:

https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/add-custom-domain

尤其注意需要设置Expose an API。否则调用SDK时可能发生resourceDisabled错误

生成Teams Manifest

使用https://dev.teams.microsoft.com/配置后下载manifest

1. 基础信息

2. 在Teams APP里添加Tabs

URL后添加from=teams，调起tab时code根据这个判断是否在teams里面。

3. 配置Single Sign On

4. 确认Domains

5. 下载Manifest:

注意

更改有时不会立刻更新。下载前一定要检查以下3个地方的域名一致：

下载后打开manifest.json再检查一遍。

1. 上传Manifest到Teams App安装后即可

Trouble Shooting

• 调用 getAutToken 返回 resourceDisabled错误

确认Azure AD APP设置了Expose an API里面的scope和authorization