Update To Manifest Not Showing In Teams when running via F5

[grumpykiwi]

I made changes to the app name, dev name and version in the manifest file

When I run the project via F5 in the Teams web client my changes are not reflected in the dialog to add the app

Manifest attached

Manifest.txt

How do I force Teams to use the new manifest? Is VS actually creating a ZIP file somewhere that I can upload to Teams? If so, what is the location?

A couple of other questions;

1. I want to be able to deploy this to select IT people internally for testing and feedback. Are there instructions for doing that?
2. How do I get rid of the annoying message "This app is not from your organization's app catalog or the Teams store. Do not proceed to add the app unless you are testing it in development or trust the person who shared it with you." ?

Thanks

[JerryYangKai]

The main question, the manifest file in this project (location Properties/manifest.json) is just a snapshot version compare with the one in Dev portal (you could find your app in Dev portal https://dev.teams.microsoft.com/apps). When you run the project in F5, Teams will using the manifest in dev portal not the local one. You could trigger command Project -> TeamsFx -> Update Teams Manifest to upload local one to the Dev portal before F5. Another solution is the zip, yes, a zip file contains Properties/manifest.json, ./color.png and ./outline.png is enough.

Question 1. VS not support publish yet, maybe you could give IT people the zip file to test. If they encounter some permission problems when install this app, you could add the email address of IT in Owner of your app in Dev portal.

2. The second one maybe someone else could answer it. I will let them know it and reply in this thread later.

[JerryYangKai]

@MuyangAmigo Could you find some one to answer the second question?

[grumpykiwi]

Thanks Jerry. Updating manifest in the portal right now and generating a zip for the IT guys

[grumpykiwi]

Trying to update the API url to grumpykiwi.ngrok.io. Changed in 3 places:

IDENTIFIER_URI in appsettings.development.json Application ID URI / Single sign-on tab in dev portal Application ID URI / Azure Portal / Expose an API

When I run the application I get consent denied message when trying to authenticate the token

Am I missing a setting somewhere ?

Thanks

[JerryYangKai]

Additional work is TAB_APP_ENDPOINT in appsettings.development.json For dev portal, a quick way is download the manifest and change all the localhost endpoint to your ngrok endpoint. Azure portal / Authentication / redirect URIs

[grumpykiwi]

I changed the URL in all the places previously listed and the new TAB_APP_ENDPOINT as you noted. Still get the same error:

Consent failed for the scope User.Read Presence.Read.All Group.Read.All GroupMember.Read.All Directory.Read.All with error: FailedToOpenWindow\nErrorWithCode.ConsentFailed: Consent failed for the scope User.Read Presence.Read.All Group.Read.All GroupMember.Read.All Directory.Read.All with error: FailedToOpenWindow\n at Object.failureCallback (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:125:36)\n at m (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:16239)\n at u (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:15495)\n at Object.e.authenticate (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:17717)\n at eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:102:85)\n at Object.g [as initialize] (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:36899)\n at eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:101:66)\n at new Promise ()\n at TeamsUserCredential.eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:100:20)\n at Generator.next ()

If I change things back to localhost locally and at Azure & Dev portals it works again.

[JerryYangKai]

I am trying to repro your issue. What I am done is.

Prepare a project create by template running well in local like you.

Start ngrok in local: ngrok http -host-header=rewrite https://localhost:44357

Go to my AAD, change Redirct URI and application ID URI: https://aca79cb8f9d3.ngrok.io/auth-end.html api://aca79cb8f9d3.ngrok.io/e9a91c46-cd49-4c52-b60d-d1833c6daa93

In local project appSettings.development.json, change to: _"IDENTIFIER_URI": "api://aca79cb8f9d3.ngrok.io/e9a91c46-cd49-4c52-b60d-d1833c6daa93", "TAB_APPENDPOINT": "https://aca79cb8f9d3.ngrok.io",

In local manifest, change all the localhost to ngrok. Then Project->TeamsFX-> Update Teams Manifest, Press F5

Every thing works well, maybe this is helpful for you. Or you can login to this website: https://myapplications.microsoft.com/ find your AAD application, click manage your application and revoke permission then try again.

[grumpykiwi]

Here is my ngrok.yml entry for reference:

tunnels: grumpykiwi: proto: http addr: 51515 subdomain: grumpykiwi host_header: rewrite

Project settings:

Launchsettings.json has been updated

appsettings.Development.json has been updated:

"IDENTIFIER_URI": "api://grumpykiwi.ngrok.io/4d902334-ba4f-4830-8525-c884b050ccf2",
"TAB_APP_ENDPOINT": "https://grumpykiwi.ngrok.io",

I did the project -> update manifest.

launchSettings.txt manifest.txt

I have a button to click that kicks off the process. When I click the button I get the in progress cursor and eventually the razor file times out.

I will do a revoke on permissions and try again in an hour or so.

[JerryYangKai]

In a quick look, valid domains in your manifest file needs including your ngrok endpoint.

[grumpykiwi]

What entry in the file should I add to?

[JerryYangKai]

"validDomains": [ "aca79cb8f9d3.ngrok.io" ],

Like this.

[grumpykiwi]

I did as suggested in your last comment, updated the manifest and ran it. No go. Back to the timeout error

So, I did as you did and created a brand new project, ran ngrok to get the random FQDN, updated everything and ran it. It ran fine

So, I then updated the FQDN everywhere to use a different ngrok sub domain grumpytest. Same timeout issue.

Email me at my username at hot mail dot com if you would like my ngrok auth token to test for yourself.

I did a lot of experimenting to get the ngrok command that worked. it was:

ngrok http -host-header=rewrite -subdomain grumpytest 52525

Port number is not the http port assigned to the project. I had issues with something stealing the assigned port which caused IIS Express to fail. I chose the above at random and updated the properties page accordingly.

Just an FYI. It is the GetUserProfilePhoto method where things go awry. Specifically this line:

var photoStream = await graphClient.Me.Photo.Content.Request().GetAsync();

[grumpykiwi]

Hi Jerry

Any update on this. Can you suggest anything else to try?

It kind of feels like the toolkit does not like using registered ngrok subdomains but is ok with the randomly generated ones. Which makes me wonder if the syntax I am using to start the ngrok tunnel with a registered subdomain is not quite right.

Maybe an earlier call in the code to retrieve the token is not actually working as expected. Perhaps returning an invalid object that is subsequently used by the call to GraphClient where the call never returns and eventually times out?

I will keep testing various scenarios and see what I can come up with.

Maybe there are some set instructions for publishing internally that I have not seen?

[JerryYangKai]

I’ve got no idea, what in my mind it is maybe the registered ngrok subdomains provide an endpoint we unexpected? So the endpoint we config in the manifest is different with the real endpoint ngrok provide. Just a guess in my thought. I just used the free plan ngrok, have not used registered ngrok subdomains before.

[grumpykiwi]

I am still looking at this as time permits. Unfortunately I have had to focus on production apps the last few days.

Working on a different test/dev setup on a different network to see if my ISP is causing issues or not. Will then upload as an Azure app and remote debug it to see how that goes.

Will report back my findings.

[grumpykiwi]

Ran a test again on a clean PC inside our corporate network.

Installed toolkit and created a new project. Updated appsettings.development.json, manifest.json (updated manifest in project menu) and updated Azure app config API endpoint.

Set a breakpoint at:

var photoStream = await graphClient.Me.Photo.Content.Request().GetAsync();

Hit F10 at breakpoint. Times out after 100 secs. Error from console attached

Console Error July 23.txt

ngrok console shows only 1 connection in total. A 307 during app startup on /tabs.

I captured the session with Fiddler and can provide if needed. Since it may contain sensitive data will not post here.

It kind of feels like the call to graph client does not even get out of the PC itself.

Will keep fiddling with it.

[grumpykiwi]

Well I am not sure why but I got it to work.

I was researching getting rid of the annoying 307 temporary redirect in the ngrok output. My idea being a clean slate. After some research I found an article on stack that mentioned disabling the following line in startup.cs:

app.UseHttpsRedirection();

I did that and ran it again to see if it cleaned up that error. To my surprise, the app worked and retrieved my photo from the Graph API.

So, pure speculation here. Something in the above call causes ngrok to freak out when using a custom subdomain. Maybe causing an infinite loop fighting with the run time over forcing http to https. Not sure.

I put the above line of code back in and re-ran to check my sanity. Broke again instantly. Commented back out and it worked. Although I did receive the dreaded "unable to start IIS Express" type message using http port 50086 (project default) in VS. I changed it to 51515, updated ngrok and restarted, and it all started working again.

So my next quest is to get the app running in local debug mode using a non ngrok domain. I have a work test url which is pointed in external DNS to my public IP with AT&T. I can easily port forward port 443 thru the provided firewall and I have a valid SSL cert for the domain.

Is this even possible with IIS Express? It is definitely not with ngrok. It does not allow 3rd party FQDN's. I tried. I could do this sort of thing easily with .Net framework apps and IIS since there is no crazy routing going on in the background.

I will have a fiddle with this a bit later on and report back.

Infinitely frustrating, yet satisfying when something starts working, even accidentally.

[grumpykiwi]

Just a thought. It is possible I am instantiating ngrok incorrectly:

Here is the output from starting running ngrok start grumpytest with the following config in the yaml file:

Forwarding http://grumpytest.ngrok.io -> http://localhost:52525 Forwarding https://grumpytest.ngrok.io -> http://localhost:52525

tunnels: grumpytest: proto: http addr: 52525 subdomain: grumpytest host_header: rewrite

Perhaps ngrok forwarding incoming traffic on https to the VS on http, is causing the issue when using app.UseHttpsRedirection()?

I have found the ngrok documentation a bit vague on using named subdomains in the yaml file.

I think the ultimate goal would be for ngrok to forward all traffic to VS using the https endpoint, therefore hopefully being able to leave the redirection call as is. If all traffic is coming in from ngrok encrypted, the redirector should technically have nothing to do.

I will do some further testing on this and see if I can make it work.

[grumpykiwi]

Fixed it. Documenting all of this so maybe someone else doesn't have to smack themselves in the forehead over it repeatedly.

After much searching with my search engine of choice and not really finding a definitive answer I tried this:

ngrok http -host-header="localhost:44357" -subdomain=grumpykiwi https://localhost:44357

Unlike previous attempts I was able to avoid the dreaded 400 - bad gateway error or the complete off in to the ether scenario described previously. My user profile and photo displayed fine.

I added back in this line:

app.UseHttpsRedirection();

and tried again. Eureka.

I was suspicious all along it was something I was doing wrong with ngrok that was gumming up the works so to speak. Found it hard to believe that a configuration option provided as standard in the Teams Template would cause ngrok to freak out so bad.

I know more about ngrok now than I anticipated, but it is still FM to me. My yaml file entry for reference:

tunnels: proto: http addr: https://localhost:44357 subdomain: grumpykiwi host_header: localhost:44357 bind_tls: true

I hope someone stumbles across this and it helps in some way. Maybe something to add to the docs to help others?

Enjoy the rest of your weekend wherever you are.

Cheers

[JerryYangKai]

@grumpykiwi So excited to hear that it succeed finally. Ngrok maybe a common tool with Teams app currently (From Microsoft Document you could find the way to run bot in Teams is using ngrok). We are searching for a new way to reduce the use of ngrok in Teams app for some compliance reasons.

Also you have gaven us a great suggestion, to provide some solution with common tools to reduce unnecessary debugging work. Thanks a lot.