csharp

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.

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

• Scan the generated QR code to join the team.

Prerequisites

• .NET Core SDK version 3.1

  # determine dotnet version
  dotnet --version

• Publicly addressable https url or tunnel such as ngrok or Tunnel Relay

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

• Ensure that you've enabled the Teams Channel

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.

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

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

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

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