Forms embedded in SharePoint doesn't display in custom Teams app

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:

1. 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.

2. Frontend Code:

• Update the frontend to only use microsoftTeams.authentication.getAuthToken() for authentication.
• Remove direct calls to the AcquireOBOToken API from the frontend.

3. 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 https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/authentication and token acquisition.