Hello World Tab in Microsoft Teams using yo Teams

This article provides steps to build the Hello World Tab in Microsoft Teams using yo Teams,

The yo Teams generator allows you to simply create and scaffold projects that include one or more Microsoft Teams features such as:

Bots – based on Bot Framework
Messaging Extensions – actions and query
Tabs, with support for Single-Sign-On
Connectors
Outgoing Webhooks

This article, we going to create Tabs, with support for Single-Sign-On

Implementing a Single sign-on (SSO)

Have to create one new app in the Azure active directory, click below to navigate to the App registration page and click “New Registration”

https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

In the “Register as application” page give any name and select “Accounts in any organizational directory (Any Azure AD directory – Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)” and ignore the redirect URI as it is and click Register

Copy the newly created application ID from the Application overview page and keep it somewhere,

Prepare the ngrok URL

ngrok to can provide temporary public hosted URL, just for testing or development we don’t have to host the application in Azure or somewhere. ngrok will provide the public hosted url and the URL will target your localhost URL

check this URL for download and setup the ngrok, run the below comment in sperate PowerShell window after your ngrok setup is done. here setup means simple registration process from ngrok

./ngrok.exe http http://localhost:3007/ -host-header="localhost:3007"

That comment will provide the public https url like this, https://e69bc5ddf0d4.ngrok.io

Now go back to your azure, and select your newly created app then select “Expose an API”. In the top of the page, you can find the set option for Application ID URI, modify the uri in following format (api:// + ngrok url + applicationid) api://7074e3b7107f.ngrok.io/644707d7-5d3e-48f5-a408-bf0a953a8036

Click “+ Add new scope” button, fill values like below

Scope name	access_as_user
Who can consent?	Admins and users
Admin consent display name	Can be enter anything
Admin consent description	Can be enter anything
User consent display name	Can be enter anything
User consent description	Can be enter anything
State	Enabled

add below two ids under “Add a client application” section, these are the team’s windows and mobile apps id, which is never changing. so we always have to use this same id. while you add don’t forgot to select the newly created scope

5e3ce6c0-2b1f-4285-8d4b-75ee78787346

1fec8e78-bce4-4aaf-ab1b-5451cc387264

Next, we have to provide permission for the Azure app, select “API Permission” and click “Add permission” > Graph API > Delegated permissions > select following and click “Add Permission” and click “Grand Admin consent”

☑ email – View users’ email address
☑ offline_access-Maintain access to data you have given it access to
☑ openid – Sign users in
☑ profile – View users’ basic profile

Prerequisite (Setup and prepare your machine)

Run below PowerShell command in Run as Administrator mode and close them once installation done

npm install --global --production windows-build-tools
npm install yo gulp-cli --global
npm install generator-teams --global

Create a new Teams project

Run below Powershell comment for creating new teams project

yo teams

When prompted:

select the values same as like this screenshot pass the ngrock url and azure AD application id

Build and Run your app

Run following PowerShell comments once the project is created for Build and Run the app

gulp manifest
gulp build
gulp serve

Now you can access the app in this url http://localhost:3007/<tabname>/ also can access via ngrok url

When you access inside the teams, the application can be access the graph API and it will show the current user name

Run your app in Microsoft Teams

Installation zip package can be found in the package folder, In the Microsoft teams application or also can teams access via browser. select Apps, click “Upload a custom app” and Upload the file in the Microsoft Teams. Once added app can be accessible in any teams.

Select any one the teams and select any channel and one the top click Plus icon, in the popup search your app and add and access