Teams Tab Configuration Page & Content URL Auth Prompt
Design a configurable Teams channel tab: the configuration page that captures settings and sets the content URL, plus secure SSO auth for the embedded content frame.
- Target user
- Frontend/full-stack developers building configurable Teams tabs
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are a Teams tab developer who ships configurable tabs that authenticate cleanly and survive Teams' iframe sandbox.
I will provide:
- What the tab displays (a dashboard, a runbook, a status board) and its per-channel settings
- My SPA framework and hosting
- My identity setup (Entra app, exposed API scope)
- Whether the tab needs to call a backend on behalf of the user
Your job:
1. **Configuration page** — implement the config page using the Teams JS SDK: call `pages.config.setValidityState`, build `pages.config.setConfig({ contentUrl, websiteUrl, suggestedDisplayName, entityId })` from the user's selections, and register the save handler. Explain when the gear (`canUpdateConfiguration`) reconfigures vs creates.
2. **Content URL design** — encode the channel-specific settings (entityId + context params) into the content URL so the tab renders the right view per channel without a server lookup, while keeping secrets out of the URL.
3. **Tab SSO** — implement `authentication.getAuthToken()` to obtain the Entra token silently, exchange it via OBO for downstream API access, and handle the consent popup fallback (`authentication.authenticate`) when silent fails. Validate the token audience server-side.
4. **Iframe & host constraints** — handle Teams' sandbox: CSP/`frame-ancestors` for `teams.microsoft.com`, theme awareness (`app.getContext()` -> theme + apply dark/contrast), and deep-link/entity handling so a `subEntityId` jumps to the right view.
5. **Manifest** — the `configurableTabs` (and `staticTabs` if relevant) entries, `validDomains`, and `webApplicationInfo` for SSO.
6. **Edge cases** — guest users, mobile tab rendering, token expiry mid-session, and config re-entry preserving prior settings.
7. **Verification** — confirm save enables only when valid, the right view loads per channel, and SSO works on desktop, web, and mobile.
Output as: (a) the config page code with `setConfig`, (b) the SSO/OBO flow with server-side token validation, (c) the manifest tab + `webApplicationInfo` + `validDomains`, (d) the CSP/`frame-ancestors` config, (e) the verification checklist.
Bias toward: silent SSO with a clean consent fallback, server-validated tokens, no secrets in content URLs.
Run this prompt with AI
Test it, get an AI-improved version, or compare models — live in the Prompt Workspace. No copy-paste.
Related prompts
-
Teams Bot SSO On-Behalf-Of Downstream Graph Token Exchange Prompt
Implement the On-Behalf-Of flow that exchanges a Teams SSO token for a downstream Microsoft Graph access token inside a bot, including consent fallback
-
Teams JS SDK Tab Context, Theme & Navigation Prompt
Wire a Teams tab to the Teams JavaScript SDK — initialize correctly, read user/channel context, react to light/dark/high-contrast theme changes, and drive in-app navigation and deep links.
-
Teams Search-Based Message Extension with Config Page Prompt
Build a search-based (query) message extension that lets users search a backend (KB, CMDB, runbooks) inline and insert a result card, with a configurable settings page per user.
-
Teams In-Meeting Side Panel Incident Copilot Prompt
Build an in-meeting Teams app (side panel + shared meeting stage) that acts as a live incident copilot — tracking timeline, action items, and current owner while a war-room call is in progress.
More Microsoft Teams prompts & error guides
Browse every Microsoft Teams prompt and troubleshooting guide in one place.
Reading prompts? Get all 500 in one free PDF
500 battle-tested, copy-paste AI prompts engineered by a senior systems engineer — every one with fill-in placeholders and safety/back-out notes. Drop your email and it's yours.
- 500 prompts: Linux · Kubernetes · Terraform · OpenStack · GitLab · Docker · Monitoring · Incident Response
- Instant PDF download — yours free, forever
- Plus one practical AI-workflow email a week (no spam)
Single opt-in · unsubscribe anytime · no spam.