Forum Discussion
Forms embedded in SharePoint doesn't display in custom Teams app
I'm working with a customer that is using a custom Teams app instead of Viva Connections for their intranet in Teams. They embed Microsoft Forms in SharePoint News Posts to collect feedback from their users.
- The form is embedded as expected when page is rendered in SharePoint
- The form is embedded as expected when page is rendered in Viva Connections (Viva Petter in screenshot)
- The form cannot be embedded (error message says "Microsoft Forms | Can't access the Forms.") when page is rendered in the custom Teams app (Contoso in screenshot)
I see errors in the console log and network trace related to getting on-behalf-of tokens
- clientId: SharePoint Online Web Client Extensibility / SharePoint Online Client Extensibility Web Application Principal (different names in different tenants)
- resource: https://forms.office.com
{
"odata.error": {
"code": "-1, System.AggregateException",
"message": {
"lang": "en-US",
"value": "One or more errors occurred."
}
}
}
I've read similar cases
https://github.com/SharePoint/sp-dev-docs/issues/3923#issuecomment-514726341
https://github.com/SharePoint/sp-dev-docs/issues/4357#issuecomment-515131702
https://github.com/SharePoint/sp-dev-docs/issues/9099#issuecomment-1701406090
I have tried allowing more domains in the teams app manifest and I've tried deleting and recreating the client credentials for the SharePoint client extensibility app registration without effect.
The customer doesn't want to use the standard Viva Connections app because of the mobile app experience.
I've managed to recreate the issue in several tenants.
Is there a way to make this work in a custom Teams app and how?
5 Replies
Hi Petter Skodvin-Hvammen - Thanks for raising the query. The issue with embedding Microsoft Forms in SharePoint and displaying them in a custom Teams app is due to CORS restrictions when acquiring on-behalf-of tokens, leading to HTTP 500 errors. To resolve this, follow these steps:
- Backend Token Acquisition:
- Set up a backend server to handle token acquisition.
- Use the server to make the 'OnBehalfOf' token call for the Microsoft Forms API.
- Store client credentials securely on the server.
- Frontend Code:
- Update the frontend to only use
microsoftTeams.authentication.getAuthToken()for authentication. - Remove direct calls to the AcquireOBOToken API from the frontend.
- App Manifest:
- Ensure your Teams app manifest includes permissions for the Microsoft Forms API.
- Verify allowed domains in the manifest for accessing the Forms API. By handling token acquisition on the backend, you can avoid CORS issues and successfully embed Microsoft Forms in SharePoint and display them in Teams.
Example (Node.js Backend Token Acquisition):
const msal = require('@azure/msal-node'); const config = { auth: { clientId: 'YOUR_CLIENT_ID', authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID', clientSecret: 'YOUR_CLIENT_SECRET' } }; const cca = new msal.ConfidentialClientApplication(config); async function acquireTokenOnBehalfOf() { const authResult = await cca.acquireTokenOnBehalfOf({ scopes: ['https://forms.office.com/.default'], oboAssertion: 'ACCESS_TOKEN_OF_THE_USER' }); return authResult.accessToken; }Refer to the Microsoft Teams platform documentation for more details on handling authentication and token acquisition.
Dinesh-MSFT Thank you for your explanation and research, but requiring server side components for embedding SharePoint in Teams is not a good solution. This stopped working some time this winter, and I assume it's caused by security hardening in Teams.
SharePoint is the man in the middle here and should be allowed to request obo tokens when embedded in Teams.
All parties involved here are Microsoft first party apps; Teams, SharePoint and Forms. There's no third party code involved in this custom Viva Connections setup, just the teams app manifest/json.
Is it correct that it's SharePoint that enforces the CORS restrictions on the OBO API endpoint?
Hi Petter Skodvin-Hvammen,
As discussed internally, embedding Microsoft Forms in a custom Teams app is not a standard practice and may lead to authentication issues due to the different handling of third-party apps in Teams. To confirm this, we suggest testing the same SharePoint page within the SharePoint tab app in Teams, which is a standard feature, to see if the form is displayed correctly.
