I have a Flask app hosted in Azure App Service, available for a single M365 tenant. Users log in with their own account, and the application shows Sharepoint data in a Plotly Express Gantt chart.
It works fine as a standalone app, I get the Sharepoint list and present the chart, but I would like to embed this in a Sharepoint page. Embedding itself is fine, the application loads, but Microsoft login fails from the iframe:
login.microsoftonline.com refused to connect
How can I break out from the frame, do the Microsoft login in a popup, and return to my app?
So far the best I could do is to open a popup, it logs in itself, but then the popup is not closed, but redirected to 'https://m365.cloud.microsoft/?auth=2', regardless what redirect url I put in the login url, and my application remains unauthenticated.
This is my current setup: I have a popup Javascript in my login.html:
<script> function openAuthPopup(uri) { var authWindow = uri, 'authPopup', 'width=600,height=600'); var authInterval = setInterval(function() { if (authWindow.closed) { clearInterval(authInterval); window.location.reload(); } }, 1000); } </script> and I log in with a button:
<button onclick="openAuthPopup('{{ auth_uri }}')">Login</button> This is my Flask part:
@app.route("/login") def login(): return render_template("login.html", version=__version__, **auth.log_in( scopes=SCOPE, # Have user consent to scopes during log-in redirect_uri=url_for("auth_response", _external=True), # Optional. If present, this absolute URL must match your app's redirect_uri registered in Microsoft Entra admin center prompt="select_account", # Optional. )) @app.route(REDIRECT_PATH) def auth_response(): result = auth.complete_log_in(request.args) if "error" in result: return render_template("auth_error.html", result=result) return redirect(url_for("index")) 
