使用OAuthPromptSettings时如何在MS Teams机器人Sign in按钮上方添加图片

实现思路 #

默认OAuthPromptSettings生成的登录卡片仅包含基础登录按钮，要新增上方图片，需要自定义承载OAuth登录触发逻辑的卡片，而非直接使用默认生成的卡片结构。Teams环境对自适应卡片兼容性最优，推荐用自适应卡片实现需求。

具体实现步骤 #

• 第一步：构造包含图片+登录按钮的自适应卡片结构
  示例卡片JSON如下，可调整图片尺寸、地址、按钮文本匹配业务需求：

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "Image",
      "url": "你的图片存储地址，需要为公网可访问的HTTPS地址",
      "size": "Large",
      "horizontalAlignment": "Center"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Sign in",
      "data": {
        "msteams": {
          "type": "signin",
          "value": "你的OAuth授权跳转地址"
        }
      }
    }
  ]
}

• 第二步：替换默认OAuthPrompt的提示卡片
  不需要修改原有OAuthPrompt的验证逻辑，仅需要在触发OAuth流程的步骤中，主动发送上述自定义卡片，替代默认OAuthPromptSettings生成的卡片即可，原有token验证、授权回调逻辑完全可以复用。
  如果用Bot Framework C# SDK，可以按以下逻辑调用：

// 构造自定义卡片
var card = AdaptiveCard.FromJson(自定义卡片JSON).Card;
var attachment = new Attachment { ContentType = AdaptiveCard.ContentType, Content = card };
var activity = MessageFactory.Attachment(attachment);
// 发送自定义卡片
await turnContext.SendActivityAsync(activity, cancellationToken);
// 后续继续走原有OAuthPrompt的验证逻辑即可
var oauthPromptSettings = new OAuthPromptSettings
{
    ConnectionName = "你的OAuth连接名称",
    Title = "Sign in",
    Text = string.Empty, // 这里留空即可，提示内容已经在自定义卡片里展示
    Timeout = 300000
};
var oauthPrompt = new OAuthPrompt(nameof(OAuthPrompt), oauthPromptSettings);
await oauthPrompt.BeginDialogAsync(dialogContext, cancellationToken);

• 第三步：Teams环境适配注意事项
  • 图片地址必须是HTTPS协议，且不能有访问权限限制，否则Teams会无法加载图片
  • 登录按钮的type必须指定为signin才能触发Teams原生的OAuth授权弹窗，避免跨域问题
  • 原有OAuth的连接配置、回调地址不需要做任何修改

备选方案：扩展OAuthPrompt默认卡片 #

如果不想修改现有触发逻辑，可以继承OAuthPrompt类，重写OnPromptAsync方法，在默认生成的卡片body最前面插入图片元素后再发送，逻辑和上述方案一致，仅实现入口不同。

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