Generate meeting token
The Meeting token app helps to enhance your meeting experience in Teams by allowing meeting participants to request for token and generate tokens. The app generates tokens sequentially so that each participant has an equal opportunity to interact in the meeting. For example, the app is useful in Q&A sessions and in meetings, such as scrum meetings.
Note
The In-meeting tabs for Meeting token generator app are available only for Teams desktop client.
Key features of Meeting token generator
- Displays the current token used in the meeting.
- Displays the user list sorted based on the token number.
- Generates a token for the user upon request.
- Displays current user's token number.
- Allows the organizer to skip the current meeting token.
Different ways of user interactions
Token: Requests token for the user.
Done: Confirms token generation for the user.
Skip: Skips the current user and moves to the next person in line for a token.
Note
Skip is available only to the meeting organizers.
This step-by-step guide helps you to generate meeting token for all the participants to interact in the meeting. You'll see the following output:
Prerequisites
You install the following tools and set up your development environment:
Microsoft Teams with valid account
Latest version of ngrok or any equivalent tunneling solution
Note
After downloading ngrok, sign up and install authtoken.
You must have working knowledge of the following technologies:
Set up local environment
Open Microsoft Teams Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.
Note
If you encounter the error "Filename too long," apply the git command 'git config --system core.longpaths true' in your administrator terminal of choice.
Create and register your bot
The following steps help you to create and register your bot in Azure portal.
- Create Azure Bot resource to register bot with Azure Bot Service.
- Create client secret to enable SSO authentication of the bot.
- Add Teams channel to deploy the bot.
- Use ngrok to create a tunnel to your web server's endpoints.
- Add messaging endpoint to the ngrok tunnel you created.
To create Azure Bot resource
Go to the Azure portal.
Select Create a resource.
In the search box, enter Azure Bot.
Select Enter.
Select Azure Bot.
Select Create.
Enter required bot handle name in Bot handle.
Select your Subscription from the dropdown list.
Select your Resource group from the dropdown list.
You can also create a new resource group (select Create new > enter resource name > select OK).
If you've created a new resource group, select the required location from New resource group location dropdown list.
In the Microsoft App ID section, by default Create new Microsoft App ID is selected.
You can either select Use existing app registration and enter Existing app ID and Existing app password, or select Create new Microsoft App ID.
Note
You can't create more than one bot with the same Microsoft App ID.
Select Type App as Multi Tenant.
Select Review + create.
If the validation passes, select Create.
It takes a few moments for your bot service to be provisioned.
Select Go to resource.
Your Azure bot is created.
To create client secret
Perform the following steps if you've created a new Microsoft App ID:
In the left panel, select Configuration.
Tip
Save the Microsoft App ID or Client ID for future reference.
Next to Microsoft App ID, select Manage.
In the Client secrets section, select New client secret.
The Add a client secret window appears.
Enter Description.
Select Add.
In the Value column, select Copy to clipboard.
Tip
Save the Client secrets value or app password for future reference.
To add the Microsoft Teams channel
Select Home.
Select your bot from Recent resources.
Select Channels in the left pane and select Microsoft Teams
.
Select the checkbox to accept the Terms of Service.
Select Agree.
Select Apply.
To create tunnel for local web server
Use ngrok to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:
ngrok http --host-header=localhost 3978
Note
While creating ngrok tunnel, use localhost 5000 instead of 3978 if you choose Command line to run your app.
Tip
If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.
To add messaging endpoint
From ngrok, copy the HTTPS URL.
Note
The HTTPS URL in your ngrok is your fully qualified domain name. The
WebAppDomainis a fully qualified domain name that doesn't includehttps://in it.In Settings for the Azure bot that you created, select Configuration.
In Messaging endpoint, use the HTTPS URL available from ngrok and at the end of the URL add /api/messages.
Select Apply.
You have successfully set up a bot in Azure Bot Service.
Update the Azure app registration for tab SSO
Go to the Azure portal.
Select Azure Active Directory.
In the left navigation panel, select App registrations.
Select your bot.
Under Manage, select Expose an API.
Select Set.
Set the Application ID URI in the form of
api://your ngrok/botid-{your AppID}.
The following image shows the domain name:
Note
If you're using a tunneling service such as ngrok, ensure you update the value whenever your ngrok subdomain changes.
For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2, wheref631****.ngrok.iois the new ngrok subdomain name.Select Add a scope.
In the panel that appears, enter
access_as_useras the Scope name.Set Who can consent? to
Admins and users.To configure the admin and user consent prompts with appropriate values for
access_as_userscope, provide the following information in the fields:Enter
Teams can access the user’s profileas Admin consent display name.Enter
Allows Teams to call the app’s web APIs as the current useras Admin consent description.Enter
Teams can access the user profile and make requests on the user’s behalfas User consent display name.Enter
Enable Teams to call this app’s APIs with the same rights as the useras User consent description.
The following image shows the fields and the values:
Ensure that State is set to Enabled.
Select Add scope to save.
Note
The Scope name should match with the Application ID URI with
/access_as_userappended at the end.api://ae57****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
In the Authorized client applications section, identify the applications that you want to authorize for your app’s web application.
Select Add a client application.
Enter Client ID:
1fec8e78-bce4-4aaf-ab1b-5451cc387264for Teams mobile or desktop application.
You can enter Client ID:
5e3ce6c0-2b1f-4285-8d4b-75ee78787346for Teams web application.
Select Authorized scopes.
The following image displays the Client ID:
In the left panel, select API Permissions.
Note
Users need to consent to these permissions only if the Azure AD app is registered in a different tenant.
Select Add a permission.
Select Microsoft Graph.
Select Delegated permissions.
Add the following permissions:
- offline_access
- OpenId
- profile
- User.Read
Select Add permissions.
From the left panel, select Authentication to set a redirect URI.
Note
If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
- Select Add a platform.
- Select Web.
Enter the redirect URI for your app by appending
auth-endto fully qualified domain name:https://your ngrok/auth-end.Enable Implicit grant and hybrid flows by selecting the following checkboxes:
- ID tokens
- Access tokens
Select Configure.
Set up app settings
Navigate to appsettings.json in cloned repository.
Open appsettings.json in Visual Studio Code and update the following information:
- Set
"MicrosoftAppId"to your bot's Microsoft App ID. - Set
"MicrosoftAppPassword"to your bot's client secret ID value. - Set
"AzureAd"."TenantId"to the tenant ID of the tenant where the app is used.
Note
The sample works only in the current tenant.
- Set
"AzureAd"."ApplicationId"to your bot's Microsoft App ID. - Set
"ContentBubbleUrl"to the content bubble iframe url(https://[WebAppDomain]/contentBubble.html).
Note
WebAppDomainis your ngrok domain, so the content bubble URL is similar tohttps://ae57****.ngrok.io/contentBubble.html.
- Set
Set up manifest file
Navigate to
manifest.jsonin cloned repository.
Open
manifest.jsonin Visual Studio Code and make the following changes:- Set
manifestVersionto the latest version. - Set
$schematohttps://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json. - Set
resourcetoapi://[WebAppDomainName]/[MicrosoftAppId]. - Replace
[companyName]toContoso. - Replace the following sections to your fully qualified domain name:
websiteUrlprivacyUrltermsOfUseUrl
- Replace all occurrences of
WebAppDomainNamewith your ngrok domain name. - Replace all occurrences of
MicrosoftAppIdwith your bot's Microsoft App ID.
- Set
Build client app using npm install
Navigate to the App folder in cloned repository.
Copy the App folder path.
Open a new Command Prompt window, change the current directory to the copied App path.
Run the following command in the Command Prompt to download packages and dependencies.
npm installRun the following command in the Command Prompt to start the app.
npm start
The process generates the distributable or /dist folder inside the App folder where the assets get copied. The server serves the static files from the location.
Build and run the service
To build and run the service using Latest Visual Studio or Command line
Launch the latest version of Visual Studio.
Navigate to File > Open > Project/Solution.
Select TokenApp.csproj file from csharp folder.
Press F5 to run the project.
Select Yes if the following dialog appears:
A webpage opens with a message App is ready!.
Enable developer preview
Enable uploading of apps in the admin console of your tenant.
Sign in to Microsoft 365 admin center with your admin credentials.
In the left panel, select Show All.
Select Teams.
In the left panel, select Teams apps.
Select Setup Policies.
Select Global.
Toggle Upload custom apps to On position.
Select Save.
Your test tenant can permit custom app sideloading.
Note
The sideloading takes some time to become active.
Go to Microsoft Teams.
From the upper right corner of your Teams interface, select
....Select About.
Select Developer preview.
Select Switch to developer preview.
Add meeting token to Teams
In your cloned repository, navigate to csharp > Resources > Manifest.
Create a .zip with the following files that are present in the Manifest folder:
- manifest.json
- icon-outline.png
- icon-color.png
Create a meeting with a few presenters and attendees.
After the meeting is created, go to the meeting details page and select Add an app.
In the pop-up window, select Manage apps.
Select Upload a custom app.
Select Open to upload the .zip file that you created in the Manifest folder.
Select an Add.
The Manage apps section displays the list of applications.
Go to Teams meeting.
Select Add an app.
In the app selection page, the app displays as Meeting Token App.
Select the Meeting Token App.
Select Save.
The app is visible in the meeting chat.
Start the meeting.
The icon is visible in the meeting control bar.
Note
When you work on your own project, ensure to use a durable storage mechanism to store the token information and service URL for the tenant.
Complete challenge
Did you come up with something like this?
Congratulations!
You've completed the tutorial to get started with a Meeting Token Generator app.
See how your application looks like in a real-time scenario:
Have an issue with this section? If so, please give us some feedback so we can improve this section.
Feedback
Submit and view feedback for