Update To Manifest Not Showing In Teams when running via F5 about teams-toolkit HOT 20 CLOSED

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.

from teams-toolkit.

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

from teams-toolkit.

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

from teams-toolkit.

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

from teams-toolkit.

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

from teams-toolkit.

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.

from teams-toolkit.

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_APP_ENDPOINT": "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.

from teams-toolkit.

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.

from teams-toolkit.

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

from teams-toolkit.

from teams-toolkit.

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

Like this.

from teams-toolkit.

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();

from teams-toolkit.

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?

from teams-toolkit.

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.

from teams-toolkit.

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.

from teams-toolkit.

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.

from teams-toolkit.

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.

from teams-toolkit.

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.

from teams-toolkit.

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

from teams-toolkit.

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

from teams-toolkit.