Skip to content

Latest commit

 

History

History
110 lines (80 loc) · 5.35 KB

Readme.md

File metadata and controls

110 lines (80 loc) · 5.35 KB
Raw
page_type description products languages extensions contentType createdDate
sample
This is a sample app which shows connector authentication and sends notification on task creation.
office-teams
office
office-365
nodejs
samples
11-11-2021 23:30:17

Microsoft Teams Sample Connector

This is a sample connector application which demonstarates how to add authentication to connector configuration page and send notification on task creation.

For more information on developing apps for Microsoft Teams, please review the Microsoft Teams developer documentation.

Login

Welcome-card

Task-details

Create-task

Task-created

Prerequisites

  • Microsoft Teams is installed and you have an account (not a guest account)
  • NodeJS
  • ngrok or equivalent tunneling solution
  • M365 developer account or access to a Teams account with the appropriate permissions to install an app.

How to see the connector working in Microsoft Teams

  1. Upload your custom app in Microsoft Teams using this manifest file.
  2. Configure the Connector.
  3. Select either Create or Update on the registration page and click Save.
  4. Once the connector is configured, you will get a notification in channel for the configured connector.

Note: With the above instructions, you can use sample connector which is deployed on Azure. Please follow the instructions below to create your own connector.

Configure your own connector

The sample shows a simple implementation of a connector registration implementation. It also sends a connector card to the registered connector via a process triggered "externally."

  1. Clone the repository 
    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
  2. In a terminal, navigate to samples/connector-auth-nodejs/nodejs
  3. Install node modules using command npm install.
  4. Run your app using command npm start.
  5. Begin your tunnelling service to get an https endpoint.
    1. Open a new command prompt window.
    2. Change to the directory that contains the ngrok.exe application.
    3. In the command prompt, run the command ngrok http 3978 --host-header=localhost.
    4. Ngrok will fill the entire prompt window. Make note of the https:// Forwarding URL. This URL will be your [BASE_URI] referenced below.
    5. Minimize the ngrok Command Prompt window. It is no longer referenced in these instructions, but it must remain running.
  6. Register a new connector in the Connector Developer Portal
    1. Fill in all the basic details such as name, logo, descriptions etc. for the new connector.
    2. For the configuration page, you'll use our sample code's setup endpoint: https://[BASE_URI]/connector/SimpleAuth
    3. For Valid domains, make entery of your domain's https URL, e.g. XXXXXXXX.ngrok.io.
    4. Click on Save. After the save completes, download the zip file for your connector which will contain the connector id.
  7. Now you can sideload your app package and test your new connector.

Using Azure AD

  1. Go to the Application Registration Portal and sign in with the your account to create an application.

  2. Navigate to Authentication under Manage and add the following redirect URLs:

    • https://<your_ngrok_url>/SimpleEnd

  3. Additionally, under the Implicit grant subsection select Access tokens and ID tokens

  4. Click on Expose an API under Manage. Select the Set link to generate the Application ID URI in the form of api://{AppID}. Insert your fully qualified domain name (with a forward slash "/" appended to the end) between the double forward slashes and the GUID. The entire ID should have the form of: api://<your_ngrok_url>/{AppID}

  5. Navigate to API Permissions, and make sure to add the following delegated permissions:

    • User.Read
    • email
    • offline_access
    • openid
    • profile

  6. Scroll to the bottom of the page and click on "Add Permissions".

Setting up Authentication for Configuration page

  1. Update the .env configuration with the ClientId and BaseUrl

  2. Update your Microsoft Teams application manifest

  3. Add your ngrok URL to validDomains. Teams will only show the sign-in popup if its from a whitelisted domain.

     "validDomains": [
     "<<base-url>>"
 ]

More Information

For more information about getting started with Teams, please review the following resources: