How to authorize with easy auth in Teams

Question

I've created an Azure web app (https://github.com/microsoft/sample-app-aoai-chatGPT) with Easy Auth for authorization, and it functions perfectly within the web app itself. However, my goal is to integrate this sample app also into Microsoft Teams as a personal app. Is there a way to enable the authorization flow within the Teams environment? The challenge I'm facing is that when I create a Teams app and upload it, I consistently encounter a blank screen accompanied by the error message "Refused to display 'login.microsoftonline...' in a frame because it sets 'X-Frame-Options' to 'deny'." I'm uncertain about how to implement this authorization method as a popup within Teams.

Answer 1

The error message you're encountering is related to the 'X-Frame-Options' which is a security feature that prevents your web page from being loaded in an iframe. Please ensure that your web app is iFramable and is included in the valid domains of the app manifest.

Also set the Content-Security-Policy header to 'frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com'.

For Internet Explorer 11 compatibility, set X-Content-Security-Policy. Alternatively, set the X-Frame-Options header to 'ALLOW-FROM https://teams.microsoft.com/'.