"Start local tunnel" task not work in Teams Toolkit V4

[XiaofuHuang]

This is a quick solution for anyone who meets the issue when debug a bot project. This applies for Teams Toolkit V4.x only.

Describe the bug When attempting to debug a bot project, the "Start local tunnel" task fails with the following error message: Your ngrok agent version \"2\" is no longer supported. Only the most recent version of the ngrok agent is supported without an account.

Steps to Reproduce

• Create a bot or message extension project.
• Press F5 to initiate debugging.
• The "Start local tunnel" task fails.

Solution Upgrade your Teams Toolkit extension to V5 or configure your local tunnel task with your ngrok account in Teams Toolkit V4 with the following steps:

1. Sign up an ngrok account in https://dashboard.ngrok.com/signup.
2. Copy your personal ngrok authtoken from https://dashboard.ngrok.com/get-started/your-authtoken.
3. Update your "start local tunnel" task in .vscode/tasks.json

       {
           "label": "Start local tunnel",
           "type": "teamsfx",
           "command": "debug-start-local-tunnel",
           "args": {
               "ngrokArgs": "http 3978 --log=stdout --log-format=logfmt --authtoken <your-auth-token>"
           },
           "isBackground": true,
           "problemMatcher": "$teamsfx-local-tunnel-watch"
       }

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[pschandekar09]

I have created team chat bot using .Net teamtoolbox, so I am not finding .vscode/tasks.json file as per above mentioned solution.

Also please let me know from which folder I have to execute this command "~/.fx/bin/ngrok/node_modules/ngrok/bin/ngrok authtoken ". Assuming that I have to use command prompt to execute this command.

[XiaofuHuang]

I have created team chat bot using .Net teamtoolbox, so I am not finding .vscode/tasks.json file as per above mentioned solution.

Also please let me know from which folder I have to execute this command "~/.fx/bin/ngrok/node_modules/ngrok/bin/ngrok authtoken ". Assuming that I have to use command prompt to execute this command.

For Teams Toolkit in Visual Studio, please note that the toolkit does not come with the ngrok binary included. You should already have installed ngrok on your system independently.

If you haven't installed ngrok globally, please go to the folder where you installed it manually. Alternatively, you can directly run the following commands.

Solution1: Start ngrok with authtoken every time ngrok http 5130 --authtoken <your-auth-token>

Solution2:

1. To authenticate ngrok, use either of the following commands:

   ngrok authtoken <your-auth-token>

   or

   ngrok config add-authtoken <your-auth-token>

2. After authentication, start the ngrok tunnel with the following command:

   ngrok http 5130

[pschandekar09]

Thanks XiaofuHuang for your reply.

I am still getting the same 401 unathorised error even though I followed the above your mentioned solutions -

[XiaofuHuang]

Hello @pschandekar09, can you clean your project and try again? For a dotnet project, you may need to clean all the state files in .fx/ folder.

[pschandekar09]

Hello @XiaofuHuang - I cleaned the project and rebuild it. Deleted all files from ./fx folde except project setting file and then right click on project ->team toolkit -> Prepare team dependencies and then Run the application. But still getting 401 unauthorized error. Thanks!

[XiaofuHuang]

@xiaolang124 could you provide some assistance with this?

[pschandekar09]

@XiaofuHuang What kind of assistance you are asking?

[XiaofuHuang]

@xiaolang124 is the go-to person when it comes to Teams Toolkit on Visual Studio. I'd say let's bring him on board to help us out and tackle this issue together.

[pschandekar09]

@XiaofuHuang - I am not sure about @xiaolang124 availability. If you know him plz ask him to help me on this issue.

[xiaolang124]

@pschandekar09 Hello, are you developing a workflow bot? You can try adding a breakpoint in botController.cs to check if it has the correct bot ID and bot password.

If it's still not correct, you can try preparing the Teams app, rebuilding the project, and then proceed with debugging.

[pschandekar09]

@xiaolang124 - here is the bot object, I think it is not populating correctly.

And this is the program.cs file code - using neudesic.aiforsalesteam.bot; using neudesic.aiforsalesteam.bot.Commands; using neudesic.aiforsalesteam.bot.CardActions; using Microsoft.Bot.Builder.Integration.AspNet.Core; using Microsoft.Bot.Connector.Authentication; using Microsoft.TeamsFx.Conversation; using Microsoft.Bot.Builder;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers(); builder.Services.AddHttpClient("WebClient", client => client.Timeout = TimeSpan.FromSeconds(600)); builder.Services.AddHttpContextAccessor();

// Prepare Configuration for ConfigurationBotFrameworkAuthentication builder.Configuration["MicrosoftAppType"] = "MultiTenant"; builder.Configuration["MicrosoftAppId"] = builder.Configuration.GetSection("BOT_ID")?.Value; builder.Configuration["MicrosoftAppPassword"] = builder.Configuration.GetSection("BOT_PASSWORD")?.Value;

// Create the Bot Framework Authentication to be used with the Bot Adapter. builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>();

// Create the Cloud Adapter with error handling enabled. // Note: some classes expect a BotAdapter and some expect a BotFrameworkHttpAdapter, so // register the same adapter instance for both types. builder.Services.AddSingleton<CloudAdapter, AdapterWithErrorHandler>(); builder.Services.AddSingleton(sp => sp.GetService()); builder.Services.AddSingleton(sp => sp.GetService());

// Create command handlers and the Conversation with command-response feature enabled. builder.Services.AddSingleton(); builder.Services.AddSingleton(); builder.Services.AddSingleton(sp => { var options = new ConversationOptions() { Adapter = sp.GetService(), Command = new CommandOptions() { Commands = new List { sp.GetService() } }, CardAction = new CardActionOptions() { Actions = new List { sp.GetService() } } };

return new ConversationBot(options);

});

// Create the bot as a transient. In this case the ASP Controller is expecting an IBot. builder.Services.AddTransient<IBot, TeamsBot>();

var app = builder.Build();

if (app.Environment.IsDevelopment()) { app.UseDeveloperExceptionPage(); }

app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); });

app.Run();

[xiaolang124]

You can try to watch '_conversation.Adapter' and check BotFrameworkAuthentication... in it. You can verify whether the bot ID and password match those in appsettings.Development.json. If they don't match, you can prepare the Teams app, rebuild the project, and then proceed with debugging. If they do match, you may need to uninstall your app and then reinstall it again. If none of these steps solve your problem, you may need to wait a few minutes to allow the configurations to take effect in Teams, and then try again.

[pschandekar09]

@xiaolang124 I have verified that appId and password are matching which appsetting configuration. I will check with uninstalling it and again try.

Thanks for help.

[DuttatreyAmiteshSethi]

Hi , I have cloned a TEAMS APP from https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/msgext-message-reminder/nodejs

and now that i HIT DEBUG ( f5 )

i am getting the Start local tunnel issue

THIS IS MY TASKS.JSON FILE

// This file is automatically generated by Teams Toolkit. // The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0. // See https://aka.ms/teamsfx-tasks for details on how to customize each task. { "version": "2.0.0", "tasks": [ { "label": "Start Teams App Locally", "dependsOn": [ "Validate prerequisites", "Start local tunnel", "Provision", "Deploy", "Start application" ], "dependsOrder": "sequence" }, { // Check all required prerequisites. // See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args. "label": "Validate prerequisites", "type": "teamsfx", "command": "debug-check-prerequisites", "args": { "prerequisites": [ "nodejs", // Validate if Node.js is installed. "m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission. "portOccupancy" // Validate available ports to ensure those debug ones are not occupied. ], "portOccupancy": [ 3978, // app service port 9239 // app inspector port for Node.js debugger ] } }, { // Start the local tunnel service to forward public URL to local port and inspect traffic. // See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions. "label": "Start local tunnel", "type": "teamsfx", "command": "debug-start-local-tunnel", "args": { "type": "dev-tunnel", "ports": [ { "portNumber": 3978, "protocol": "http", "access": "public", "writeToEnvironmentFile": { "endpoint": "{BOT_ENDPOINT}", // output tunnel endpoint as BOT_ENDPOINT "domain": "{BOT_DOMAIN}" // output tunnel domain as BOT_DOMAIN } } ], "env": "local" }, "isBackground": true, "problemMatcher": "$teamsfx-local-tunnel-watch" }, { // Create the debug resources. // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args. "label": "Provision", "type": "teamsfx", "command": "provision", "args": { "env": "local" } }, { // Build project. // See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args. "label": "Deploy", "type": "teamsfx", "command": "deploy", "args": { "env": "local" } }, { "label": "Start application", "type": "shell", "command": "npm run dev:teamsfx", "isBackground": true, "options": { "cwd": "${workspaceFolder}" }, "problemMatcher": { "pattern": [ { "regexp": "^.*$", "file": 0, "location": 1, "message": 2 } ], "background": { "activeOnStart": true, "beginsPattern": "[nodemon] starting", "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed" } } } ] }

[XiaofuHuang]

@DuttatreyAmiteshSethi Have you attempted to initiate the dev tunnel CLI? Did this issue occur when you used the dev tunnel CLI directly?

• Install dev tunnel cli.
• Login with your M365 Account using the command devtunnel user login.
• Start your local tunnel service by running the command devtunnel host -p 3978 --protocol http --allow-anonymous.
• In the env/.env.local file, fill in the values for BOT_DOMAIN and BOT_ENDPOINT with your dev tunnel URL.

  BOT_DOMAIN=sample-id-3978.devtunnels.ms
  BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/

  • Remove "Start local tunnel" task in tasks.json
  • Press F5 to start again

[daviddqnguyen]

@DuttatreyAmiteshSethi Have you attempted to initiate the dev tunnel CLI? Did this issue occur when you used the dev tunnel CLI directly?

• Install dev tunnel cli.
• Login with your M365 Account using the command devtunnel user login.
• Start your local tunnel service by running the command devtunnel host -p 3978 --protocol http --allow-anonymous.
• In the env/.env.local file, fill in the values for BOT_DOMAIN and BOT_ENDPOINT with your dev tunnel URL.

  BOT_DOMAIN=sample-id-3978.devtunnels.ms
  BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/

• Remove "Start local tunnel" task in tasks.json
• Press F5 to start again

I tried the devtunnel host -p 3978 --protocol http --allow-anonymous command after executing the devtunnel user login command, but received the following error: "Tunnel service response status code: Forbidden.

How can this issue be resolved?

[XiaofuHuang]

@DuttatreyAmiteshSethi Have you attempted to initiate the dev tunnel CLI? Did this issue occur when you used the dev tunnel CLI directly?

• Install dev tunnel cli.
• Login with your M365 Account using the command devtunnel user login.
• Start your local tunnel service by running the command devtunnel host -p 3978 --protocol http --allow-anonymous.
• In the env/.env.local file, fill in the values for BOT_DOMAIN and BOT_ENDPOINT with your dev tunnel URL.

  BOT_DOMAIN=sample-id-3978.devtunnels.ms
  BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/

• Remove "Start local tunnel" task in tasks.json
• Press F5 to start again

I tried the devtunnel host -p 3978 --protocol http --allow-anonymous command after executing the devtunnel user login command, but received the following error: "Tunnel service response status code: Forbidden.

How can this issue be resolved?

Could you please switch to a different account, such as your GitHub account, and attempt the task once more?

[amiteshsethi]

I switched to a different account and then in that account i got a free Azure developer Subscription and then used a VPN .

It works now

[daviddqnguyen]

• devtunnel host -p 3978 --protocol http --allow-anonymous

How do I switch to a GitHub account when it is asking me for a Microsoft account?

[XiaofuHuang]

• devtunnel host -p 3978 --protocol http --allow-anonymous

How do I switch to a GitHub account when it is asking me for a Microsoft account?

Could you try command devtunnel user login -g? Detail: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/cli-commands#manage-user-credentials

[daviddqnguyen]

• devtunnel host -p 3978 --protocol http --allow-anonymous

How do I switch to a GitHub account when it is asking me for a Microsoft account?

Could you try command devtunnel user login -g? Detail: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/cli-commands#manage-user-credentials

The command is able to be executed but my organization has blocked access.

[xiaolang124]

Could you try command devtunnel user login -g? Detail: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/cli-commands#manage-user-credentials

The command is able to be executed but my organization has blocked access.

Sorry for your inconvenience, Teams need to use https URL as bot endpoint. If you're able to use an alternative tunnel service, you can comment out "start local tunnel" in your "tasks.json" to avoid using the dev tunnel during the debugging stage. Additionally, please add "BOT_DOMAIN={{tunnelUrl}}" and "BOT_ENDPOINT=https://{tunnelUrl}}" to your ".env.local" file within your project. Afterward, try local debugging again.