Skip to content

Latest commit

 

History

History
 
 

csharp

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
QRAppInstallation
QRAppInstallation
 
 
assets
assets
 
 
QRAppInstallation.sln
QRAppInstallation.sln
 
 
README.md
README.md
 
 

README.md

page_type description products languages extensions urlFragment
sample
This sample demos app installation using QR code of application's app id
office-teams
office
office-365
csharp
contentType createdDate
samples
11/10/2021 11:35:25 PM
officedev-microsoft-teams-samples-app-installation-using-qr-code-csharp

Install app using barcode sample

This sample demos app installation using QR code.

The user can Generate a new QR code (contains app id information) and then use Install action to scan and then install the app.

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

Card

QR Code

Install App

Prerequisites

  • .NET Core SDK version 3.1

    determine dotnet version

    dotnet --version

  • Ngrok (For local environment testing) Latest (any other tunneling software can also be used)

    run ngrok locally

    ngrok http -host-header=localhost 3978

  • Teams Microsoft Teams is installed and you have an account

To try this sample

  1. Create a Bot Registration In Azure portal, create a Bot Framework registration resource.

    Also add following permission in app registration. (used for App installation in a team)

    Permission

  2. Clone the repository

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

  3. In a terminal, navigate to samples/app-installation-using-qr-code/csharp

    change into project folder

    cd # QRAppInstallation

  4. Run ngrok - point to port 3978

    # ngrok http -host-header=rewrite 3978

  5. Modify the manifest.json in the /AppPackage folder and replace the following details:

  • {{Microsoft-App-Id}} with Application id generated from Step 1
  • {{domain-name}} with base Url domain. E.g. if you are using ngrok it would be 1234.ngrok.io

  1. Zip the contents of AppPackage folder into a manifest.zip, and use the manifest.zip to deploy in app store or add to Teams using step 9.

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

  • {{Microsoft-App-Id}} - Generated from Step 1 is the application app id

  • {{ Microsoft-App-Password}} - Generated from Step 1, also referred to as Client secret

  • {{Connection Name}} - The OAuthConnection setting

  • {{ Application Base Url }} - Your application's base url. E.g. https://12345.ngrok.io if you are using ngrok.

    The Connection Name referred to is the name that we provide while adding OAuth connection setting in the Bot channel registration. Please follow link Add authentication to your bot to see how we can add the setting.

  1. 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 QRAppInstallation folder
    • Select QRAppInstallation.csproj file
    • Press F5 to run the project

  2. 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 app is uploaded to Teams.

Features of this sample

  • Card with actions Generate QR code and Install App.

Card

  • Generate QR code is used to generate a QR code by selecting the app.

QR Code

  • Install App is used to Scan the QR code and it then installs the app.

Install App

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.

Further reading