Readme.md

page_type	description	products	languages	extensions	urlFragment
sample	This is a sample app which shows connector authentication and sends notification on task creation.	office-teams office office-365	nodejs	contentType createdDate samples 11/11/2021 11:30:17 PM	officedev-microsoft-teams-samples-connector-todo-notification-nodejs

Microsoft Teams Sample Connector Todo

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

Interaction with bot

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.

Setup

Note these instructions are for running the sample on your local machine.

1. Run ngrok - point to port 3978

     ngrok http -host-header=rewrite 3978

2. Clone the repository

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

3. Install node modules

   Navigate to samples/connector-todo-notification/nodejs

   Inside node js folder, open your local terminal and run the below command to install node modules. You can do the same in Visual Studio code terminal by opening the project in Visual Studio code.

   npm install

4. Configure your own connector :

Note:The below gif file 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. Register a new connector in the Connector Developer Portal

2. Fill in all the basic details such as name, logo, descriptions etc. for the new connector.

3. For the configuration page, you'll use our sample code's setup endpoint: https://[BASE_URI]/connector/SimpleAuth

4. For Valid domains, make entery of your domain's https URL, e.g. XXXXXXXX.ngrok.io.

5. Click on Save. After the save completes, you will see your connector id.

6. Using Azure AD

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

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

   • https://<Your_Ngrok_Domain>/SimpleEnd

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

   • 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_domain>/{AppID}

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

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

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

7. Setting up .env configuration

   • Update the .env configuration with the ClientId and BaseUrl

   Note: ClientId is your Microsoft-App-ID and BaseUrl is your Ngrok.

8. Run your app for server and client

   npm start

9. This step is specific to Teams.

• Edit the manifest.json contained in the appPackage folder to replace your ConnectorId field in ~/app manifest/manifest.json file with your ConnectorId in connectors section.

  • Edit the manifest.json for validDomains. if you are using ngrok it would be https://1234.ngrok.io then your domain-name will be 1234.ngrok.io.

    Example :

      "connectors": [
      {
        "connectorId": "<<CONNECTOR_ID>>",
        "configurationUrl": "https://<<VALID-DOMAIN>>/Connector/Setup"
      }
    ]

  • Zip up the contents of the app manifest folder to create a manifest.zip (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)

  • Upload the manifest.zip to Teams (In Teams Apps/Manage your apps click "Upload an app". Browse to and Open the .zip file. At the next dialog, click the Add button.)

  • Add the app to personal/team/groupChat scope (Supported scopes)

Running the sample

Setup your App in Teams

Click to Setup a Connector as given in the below image.

Sign In.

Welcome message after successfull SignIn

Now connector todo is configured.

Task Details will displayed.

Click Create button to create a new task.

Task add successfull message.

Created task list will displayed as below image shows.

This is notify you in the channel group.

Further Information

• For more information on developing apps for Microsoft Teams, please review the Microsoft Teams developer documentation.**
• For more information about getting started with Teams, please review the following resources:
• Review Getting Started with Authentications for Tabs
• Review Getting Started with Teams