Skip to content

Latest commit

 

History

History
123 lines (84 loc) · 4.33 KB

README.md

File metadata and controls

123 lines (84 loc) · 4.33 KB
Raw
page_type description products languages extensions contentType createdDate
sample
This sample demos a feature where user can join a team using QR code containing the team's id.
office-teams
office
office-365
csharp
samples
24-12-2021 23:35:25

Join a team using QR code sample

This sample demos a feature where user can join a team using QR code containing the team's id.

User can generate a new QR code (contains team id information) and then scan the QR code to join the team.

Currently, Microsoft Teams support for QR or barcode scanner capability is only supported for mobile clients

  • Type a message to get a card to generate the QR code.

Card

  • Select the team from dropdown list for which you want to generate the QR code and then click on 'Generate QR' button.

QR Code

  • Scan the generated QR code to join the team.

Join Team

Prerequisites

Setup

  1. Clone the repository

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

  2. In a terminal, navigate to samples/bot-join-team-using-qr-code/csharp

  3. Run ngrok - point to port 3978

    # ngrok http -host-header=rewrite 3978

  4. Create a Azure Bot resource

a) In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-authentication? view=azure-bot-service-4.0&tabs=userassigned%2Caadv2%2Ccsharp).

b) Navigate to API Permissions, and make sure to add the follow permissions:

  • Select Add a permission

  • Select Microsoft Graph -> Delegated permissions.

    • User.Read (enabled by default)
    • Directory.AccessAsUser.All
    • TeamMember.ReadWrite.All

  • Click on Add permissions.

Permissions

  1. Modify the manifest.json in the /AppManifest folder and replace the <<Microsoft-App-Id>> with the id from step 2.

  2. Zip the contents of AppManifest folder into a manifest.zip, and use the manifest.zip to deploy in app store or add to Teams as in step

  3. Modify the /appsettings.json and fill in the following details:

    • {{ MicrosoftAppId }} - Generated from Step 4.a is the application app id
    • {{ MicrosoftAppPassword }} - Generated from Step 4.a, also referred to as Client secret
    • {{ ConnectionName }} - Generated from Step 4.a, is the name that we provide while adding OAuth connection setting in Azure Bot resource. Please follow Add authentication to bot to configure the connection.
    • {{ ApplicationBaseUrl }} - Your application's base url. E.g. https://12345.ngrok.io if you are using ngrok.

  4. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

    • Go to Microsoft Teams. From the lower left corner, select Apps
    • From the lower left corner, choose Upload a custom App
    • Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
    • Select Add in the pop-up dialog box. Your tab is uploaded to Teams

To try this sample

  • In a terminal, navigate to JoinTeamByQR

    # change into project folder
cd # JoinTeamByQR

  • Run the bot from a terminal or from Visual Studio, choose option A or B.

    A) From a terminal

    # run the bot
dotnet run

    B) Or from Visual Studio

    • Launch Visual Studio
    • File -> Open -> Project/Solution
    • Navigate to samples/bot-join-team-using-qr-code/csharp folder
    • Select JoinTeamByQR.csproj file
    • Press F5 to run the project

Deploy the bot to Azure

To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.