"Localhost refused to connect" using Microsoft Graph Toolkit on a deployed Microsoft Teams custom personal app

0
votes

Error:

enter image description here

We’re using the Microsoft Graph Toolkit for login credentials in order to use the Microsoft Graph API : https://docs.microsoft.com/en-us/graph/toolkit/overview

With version 2.1.0:

enter image description here

And we did the Azure AD App Registration following this tutorial: https://docs.microsoft.com/en-us/graph/toolkit/get-started/add-aad-app-registration

enter image description here

So, what I think we need, is to change the localhost URI to point to the deployed Teams app. Something like: https://<teams-tenant>/<teams-app>/auth.html. But I can’t figure it out.

enter image description here

What am I missing?

Precisions/Edits:

  • When running Teams App locally using npm start, we can sign in user and get profile information. The MGT and Azure App are properly configured following Microsoft documentation (for local runs but not for deployments).

Steps to reproduce issue:

  1. Create Teams App using Microsoft Teams Toolkit Extension version 1.2.3 as "Personnal Tab" without SSO
  2. Configure Microsoft Graph Toolkit version 2.1.0 following these steps: https://docs.microsoft.com/en-us/graph/toolkit/get-started/build-a-microsoft-teams-tab#add-the-microsoft-graph-toolkit
  3. Make sure the Azure Active Directory App is created following this step: Add Microsoft Graph Toolkit following these steps: https://docs.microsoft.com/en-us/graph/toolkit/get-started/build-a-microsoft-teams-tab#add-the-microsoft-graph-toolkit
  4. Test and run locally (Add Microsoft Graph Toolkit following these steps: https://docs.microsoft.com/en-us/graph/toolkit/get-started/build-a-microsoft-teams-tab#add-the-microsoft-graph-toolkit) - This should work
  5. Upload appPackage.zip in Teams Admin Center (https://docs.microsoft.com/en-us/MicrosoftTeams/manage-apps?toc=%2Fmicrosoftteams%2Fplatform%2Ftoc.json&bc=%2Fmicrosoftteams%2Fplatform%2Fbreadcrumb%2Ftoc.json#customize-an-app)
  6. Install App in Teams and try to access it. As soon as it tries to load the app, we get the localhost error.
1
azure-active-directorymicrosoft-teamsmicrosoft-graph-toolkitteams-toolkit
Looks like this is a teams app, Are you following along here as well? You'll need to rout the auth with the teams provider here otherwise, some more info on your configuration would help. – Nic Vogt
Local host URL cannot be added as tab in teams. It must be public available URL. So, You can create public URL using Ngrok/Azure relay or else publish app to azure. – Subba Reddi Tummuru
@NicVogt Thank you for the pointers Nic. But we did follow the Microsoft documentation to setup MGT with a Microsoft Teams Tab. What I failed to mention (and I'll update the post) is that the configuration for the MGT and the Azure App are working. I'm able to sign in with a user when running npm start. It's when the app is deployed that I get the error. I need to change localhost to point to the Teams' public folder. And I can't find any Microsoft documentation on how to do that. – Jean-Pierre Toupin
@SubbaReddiTummuru Yes exactly!! Ngrok and Azure are out of the question, they are too expensive. When generating a Teams App with the Microsoft Teams Toolkit, it creates that "public" facing folder/URL (see screenshot with index.html and favicon.ico). Do you know how to use it? How to reference to it? – Jean-Pierre Toupin
If you are referring toolkit >2.0, index.html published as static website using azure storage account. So, you would require to use storage account specific URL. Here is the reference: marketplace.visualstudio.com/…, docs.microsoft.com/en-us/microsoftteams/platform/toolkit/… – Subba Reddi Tummuru

1 Answers

0
votes

I think this is what you are expecting to see: enter image description here

Okay, so basically if you want to test the app on Teams it should be running somewhere: You can run it locally by "npm start" or you deploy this on Azure or any app service.

You don't need to change Redirect URI of Azure AD registration until you are testing from local.

Please make sure you have your app using "npm start" and then try to access Teams tab. It should work.

Thanks