Graph meeting notifications nodejs sample (OfficeDev#478)

* graph meeting notification nodejs sample

* Added images and readme changes

* meta data change

* added sample.json

* PR fixes

* PR fixes

* Changed images

* feedback changes

* Added env varialble for open ssl config path

* env file changes

.github/workflows/build-complete-samples.yml

@@ -260,6 +260,10 @@ jobs:
               name: 'bot-sharepoint-list'
               version: '3.1.301'
 
+            - project_path: 'samples/graph-meeting-notification/csharp/MeetingNotification/MeetingNotification.csproj'
+              name: 'graph-meeting-notification'
+              version: '6.0.x'
+
       fail-fast: false
     name: Build "${{ matrix.name }}" csharp
     steps:
@@ -542,6 +546,10 @@ jobs:
             - project_path: 'samples\msgext-search-sso-config'
               name: 'msgext-search-sso-config'
               version: '14.x'
+
+            - project_path: 'samples/graph-meeting-notification/nodejs'
+              name: 'graph-meeting-notification'
+              version: '14.x'
 
       fail-fast: false
     name: Build "${{ matrix.name }}" nodejs

README.md

@@ -159,7 +159,8 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |7|Proactive installation of App and sending proactive notifications | This sample illustrates how you can use [Proactive installation of app for user and send proactive notification](https://docs.microsoft.com/en-us/microsoftteams/platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages?tabs=csharp) by calling Microsoft Graph APIs. .                              |[View][graph#graphproactiveinstallation#cs]       |[View][graph#graphproactiveinstallation#js]
 |8|Change Notification  | This sample app demonstrates sending change notifications to user presence in Teams based on user presence status. | [View][graph-change-notification#cs]                        |[View][graph-change-notification#js]
 |9|Graph Pinned Message  | This is a sample application which demonstrates how to pin messages in chat using Graph api. | [View][graph-pinned-message#cs]|[View][graph-pinned-message#js]|
-|10|Graph Bulk Meetings  | This is an sample application which shows how to create Teams meetings in bulk using Graph api. | [View][graph-bulk-meetings#cs]||[View][graph-bulk-meetings#js]|
+|10|Graph Bulk Meetings  | This is an sample application which shows how to create Teams meetings in bulk using Graph api. | [View][graph-bulk-meetings#cs]|[View][graph-bulk-meetings#js]|
+|11|Graph Meeting Notification  | This is a sample application which demonstrates the use of online meeting subscription and sends you the notifications in chat using bot. | [View][graph-meeting-notification#cs]|[View][graph-meeting-notification#js]|
 
 
 
@@ -362,6 +363,8 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 [graph-activity-feed#js]:samples/graph-activity-feed/nodejs
 [graph-change-notification#cs]:samples/graph-change-notification/csharp
 [graph-change-notification#js]:samples/graph-change-notification/nodejs
+[graph-meeting-notification#cs]:samples/graph-meeting-notification/csharp
+[graph-meeting-notification#js]:samples/graph-meeting-notification/nodejs
 [peoplepickeronadaptivecard#js]:samples/bot-people-picker-adaptive-card/nodejs
 [peoplepickeronadaptivecard#csharp]:samples/bot-people-picker-adaptive-card/csharp
 [graph-activity-feed-broadcast#js]:samples/graph-activity-feed-broadcast/nodejs

samples/graph-meeting-notification/nodejs/.env

@@ -0,0 +1,8 @@
+MicrosoftAppId=<<MicrosoftAppId>>
+MicrosoftAppPassword=<<MicrosoftAppPassword>>
+notificationUrl=<<BaseUrl>>/api/notifications
+BaseUrl=<<BaseUrl>>
+Base64EncodedCertificate= "<<Base64EncodedCertificate>>"
+EncryptionCertificateId= "meeting-notification-certId"
+PRIVATE_KEY_PATH=<<PrivateKeyFileName>>
+OPENSSL_CONFIG="C:/Program Files/OpenSSL-Win64/bin/openssl.exe"

samples/graph-meeting-notification/nodejs/.eslintrc.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+module.exports = {
+    "extends": "standard",
+    "rules": {
+        "semi": [2, "always"],
+        "indent": [2, 4],
+        "no-return-await": 0,
+        "space-before-function-paren": [2, {
+            "named": "never",
+            "anonymous": "never",
+            "asyncArrow": "always"
+        }],
+        "template-curly-spacing": [2, "always"]
+    }
+};

samples/graph-meeting-notification/nodejs/CertificateDocumentation/README.md

@@ -0,0 +1,31 @@
+# Create and self signed pem certificate
+
+## Generate certificate using Azure key vault.
+
+1. Open [Azure key vault](https://docs.microsoft.com/en-us/azure/key-vault/key-vault-whatis) and navigate to `Certificates` section.
+2. Click on `Generate/Import` button to create a certificate. 
+
+![Generate certificate](GenerateCertificate.png)
+
+3. Fill the required details. Make sure `Method of Certificate Creation` is **Generate** and content type is **PEM**.
+
+![Fill details](CreateCertificateForm.png)
+
+4. Click on *Current version of certificate*.
+
+![Certificate Operation](CertificateOperations.png)
+
+5. It will open a menu, click on `Download in PFX/PEM format`
+
+![Download certificate](PFXFormat.png)
+
+## Install certificate.
+Once the download is completed open the downloaded certificate in notepad. The downloaded certificate must be in .pem format.
+
+The certificate will contain bot the base64 string and private key
+
+1. Copy the content between `-----BEGIN CERTIFICATE-----` and `-----END CERTIFICATE-----`. This will be the value of `Base64EncodedCertificate` in appsettings.json file.
+
+2. Copy the content from `-----BEGIN PRIVATE KEY-----` and `-----END PRIVATE KEY-----`. (Including the `BEGIN` and `END` strings). Inside helper folder of this project create a new .pem file and paste the copied key. The key must contain `-----BEGIN PRIVATE KEY-----` and `-----END PRIVATE KEY-----` strings.
+
+3. The name of the file which stores the priavate key is the value of `PRIVATE_KEY_PATH`. The file must be present inside helper folder of this project.

samples/graph-meeting-notification/nodejs/Manifest/manifest.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.11",
+  "version": "1.0.0",
+  "id": "<APP-ID>",
+  "packageName": "com.teams.meeting.notification",
+  "developer": {
+    "name": "Microsoft",
+    "websiteUrl": "https://www.microsoft.com",
+    "privacyUrl": "https://www.teams.com/privacy",
+    "termsOfUseUrl": "https://www.teams.com/termsofuser"
+  },
+  "icons": {
+    "color": "color.png",
+    "outline": "outline.png"
+  },
+  "name": {
+    "short": "Meeting Notification App",
+    "full": "Meeting Notification App."
+  },
+  "description": {
+    "short": "This is a sample demonstrates use of online meeting subscription.",
+    "full": "This is a sample application which demonstrates use of online meeting subscription that will post notifications when user joined/left and when meeting start/end."
+  },
+  "accentColor": "#FFFFFF",
+  "bots": [
+    {
+      "botId": "<MICROSOFT-APP-ID>",
+      "scopes": [
+        "groupchat"
+      ],
+      "supportsFiles": false,
+      "isNotificationOnly": false
+    }
+  ],
+  "permissions": [
+    "identity",
+    "messageTeamMembers"
+  ],
+  "validDomains": [
+    "token.botframework.com",
+    "*.ngrok.io"
+  ],
+  "webApplicationInfo": {
+    "id": "<MICROSOFT-APP-ID>",
+    "resource": "https://RscPermission",
+    "applicationPermissions": [
+      "OnlineMeeting.ReadBasic.Chat"
+    ]
+  }
+}

samples/graph-meeting-notification/nodejs/README.md

@@ -0,0 +1,121 @@
+---
+page_type: sample
+description: This is a sample application which demonstrates the use of online meeting subscription and sends you the notifications in chat using bot.
+products:
+- office-teams
+- office
+- office-365
+languages:
+- nodejs
+extensions:
+ contentType: samples
+ createdDate: "24-09-2022 00:16:45"
+urlFragment: officedev-microsoft-teams-samples-graph-meeting-notification-nodejs
+---
+
+# Online meeting subscription
+
+This is a sample application which demonstrates use of online meeting subscription that will post notifications when user joined/left and when meeting start/end.
+
+## Concepts introduced in this sample
+- After sucessfully installation of bot in meeting you will get a welcome card and the subscription will be created for meeting it is installed in.
+
+![Welcome Card](Images/MeetingNotification.gif)
+
+## Prerequisites
+
+- Microsoft Teams is installed and you have an account
+- [Node.js](https://nodejs.org) version 10.14 or higher
+
+    ```bash
+    #determine node version
+    node --version
+    ```
+- [ngrok](https://ngrok.com/) or equivalent tunnelling solution
+
+### Register your application with Azure AD
+
+1. Register a new application in the [Azure Active Directory – App Registrations](https://go.microsoft.com/fwlink/?linkid=2083908) portal.
+2. On the overview page, copy and save the **Application (client) ID, Directory (tenant) ID**. You’ll need those later when updating your Teams application manifest and in the appsettings.json.
+3. Navigate to **API Permissions**, and make sure to add the follow permissions:
+-   Select Add a permission
+-   Select Microsoft Graph -> Application permissions.
+   - `OnlineMeetings.Read.All`
+
+-   Click on Add permissions. Please make sure to grant the admin consent for the required permissions.
+
+4.  Navigate to the **Certificates & secrets**. In the Client secrets section, click on "+ New client secret". Add a description (Name of the secret) for the secret and select “Never” for Expires. Click "Add". Once the client secret is created, copy its value, it need to be placed in the appsettings.json file.
+
+### Create Azure bot resource
+
+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=csharp%2Caadv2).
+
+- Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/en-us/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
+
+- In Settings/Configuration/Messaging endpoint, enter the current `https` URL you were given by running ngrok. Append with the path `/api/messages`
+
+### Create and install Self-Signed certificate
+
+To include resource data of graph notifications, this Graph API require self-signed certificate. Follow the below steps to create and manage certificate.
+
+1. You can self-sign the certificate, since Microsoft Graph does not verify the certificate issuer, and uses the public key for only encryption.
+
+2. Use [Azure Key Vault](https://docs.microsoft.com/en-us/azure/key-vault/key-vault-whatis) as the solution to create, rotate, and securely manage certificates. Make sure the keys satisfy the following criteria:
+
+    - The key must be of type `RSA`
+    - The key size must be between 2048 and 4096 bits
+
+3. Follow this documentation for the steps - [**Create and install Self-Signed certificate**](CertificateDocumentation/README.md)
+
+### Setup code.
+1) Clone the repository
+
+    ```bash
+    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+    ```
+
+  - Launch Visual Studio code
+  - File -> Open Folder
+  - Navigate to `samples/graph-change-notification-team-channel/nodejs` folder.
+
+  - Update the `.env` file
+
+   Update configuration with the ```MicrosoftAppId```, ```MicrosoftAppPassword```, ```MicrosoftAppTenantId```,
+   ```Base64EncodedCertificate```, ```EncryptionCertificateId```, ```PRIVATE_KEY_PATH```
+
+### Instruction for .env
+1. Provide `MicrosoftAppId`, `MicrosoftAppPassword` and `MicrosoftAppTenantId` in the .env that is created in Azure.
+2. Provide the ngrok url as  `BaseUrl` in appsetting on which application is running on.
+3. You should be having `Base64EncodedCertificate` from *Create and install Self-Signed certificate* step.
+4. Use Certificate "PEM" format and add the certificate name for `PRIVATE_KEY_PATH` For eg  `PRIVATE_KEY_PATH`=PrivateKeyFileName.pem" in .env file. Also make sure the private key file is stored inside helper folder of this project.
+
+ - Install node modules
+
+    Inside node js folder, open your local terminal and run the below command to install node modules. You can do the same for client folder by opening the project in Visual Studio code.
+
+    ```bash
+    npm install
+    ```
+
+- Run your app
+
+   ```bash
+     npm start
+   ``` 
+
+ - Run ngrok - point to port 3978
+
+   ```bash
+     ngrok http -host-header=rewrite 3978
+
+## Instruction for manifest
+1. Fill any GUID value in your manifest for <GUID>. As an alternative, you can put your Microsoft App Id.
+2. Update <MICROSOFT-APP-ID> placeholder with your Microsoft App Id.
+3. ZIP the manifest and make sure manifest.json and two icon images are at root.
+4. Upload the `manifest.zip` to Teams (in the Apps view click "Upload a custom app")
+
+Follow this documentation to get more information on custom apps and uploading them into Teams - [Manage custom apps](https://docs.microsoft.com/en-us/microsoftteams/custom-app-overview) and [Upload an app package](https://docs.microsoft.com/en-us/microsoftteams/upload-custom-apps)
+ 
+## Further reading
+- [Change notifications for Microsoft Teams meeting](https://docs.microsoft.com/en-us/graph/changenotifications-for-onlinemeeting)
+- [Set up change notifications that include resource data](https://docs.microsoft.com/en-us/graph/webhooks-with-resource-data)

samples/graph-meeting-notification/nodejs/assets/sample.json

@@ -0,0 +1,68 @@
+[
+  {
+    "name": "officedev-microsoft-teams-samples-graph-meeting-notification-nodejs",
+    "source": "officeDev",
+    "title": "Online Teams Meeting Subscription",
+    "shortDescription": "Online meeting subscription to post notifications when user joined/left meeting.",
+    "url": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-meeting-notification/nodejs",
+    "longDescription": [
+      "This is a sample application which demonstrates use of online meeting subscription that will post notifications when user joined/left and when meeting start/end."
+    ],
+    "creationDateTime": "2022-09-24",
+    "updateDateTime": "2022-09-24",
+    "products": [
+      "Teams"
+    ],
+    "metadata": [
+      {
+        "key": "TEAMS-SAMPLE-SOURCE",
+        "value": "OfficeDev"
+      },
+      {
+        "key": "TEAMS-SERVER-LANGUAGE",
+        "value": "javascript"
+      },
+      {
+        "key": "TEAMS-SERVER-PLATFORM",
+        "value": "express"
+      },
+      {
+        "key": "TEAMS-FEATURES",
+        "value": "bot"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "Image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/graph-meeting-notification/nodejs/MeetingNotification/Images/MeetingNotification.gif",
+        "alt": "Solution UX showing graph meeting notification in meeting chat"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "OfficeDev",
+        "pictureUrl": "https://avatars.githubusercontent.com/u/6789362?s=200&v=4",
+        "name": "OfficeDev"
+      }
+    ],
+    "references": [
+      {
+        "name": "Teams developer documentation",
+        "url": "https://aka.ms/TeamsPlatformDocs"
+      },
+      {
+        "name": "Teams developer questions",
+        "url": "https://aka.ms/TeamsPlatformFeedback"
+      },
+      {
+        "name": "Teams development videos from Microsoft",
+        "url": "https://aka.ms/sample-ref-teams-vids-from-microsoft"
+      },
+      {
+        "name": "Teams development videos from the community",
+        "url": "https://aka.ms/sample-ref-teams-vids-from-community"
+      }
+    ]
+  }
+]

samples/graph-meeting-notification/nodejs/auth.js

@@ -0,0 +1,38 @@
+// <copyright file="auth.js" company="Microsoft">
+// Copyright (c) Microsoft. All rights reserved.
+// </copyright>
+
+var request = require('request');
+var Q = require('q');
+
+// The auth module object.
+var auth = {};
+
+// Gets the application level access token.
+auth.getAccessToken = function () {
+  var deferred = Q.defer();
+  var requestParams = {
+    grant_type: 'client_credentials',
+    client_id: process.env.MicrosoftAppId,
+    client_secret: process.env.MicrosoftAppPassword,
+    scope: 'https://graph.microsoft.com/.default'
+  };
+
+  var url = "https://login.microsoftonline.com/" + process.env.MicrosoftAppTenantId + "/oauth2/v2.0/token";
+  request.post({ url: url, form: requestParams }, function (err, response, body) {
+    var parsedBody = JSON.parse(body);
+
+    if (err) {
+      deferred.reject(err);
+    } else if (parsedBody.error) {
+      deferred.reject(parsedBody.error_description);
+    } else {
+      // If successful, return the access token.
+      deferred.resolve(parsedBody.access_token);
+    }
+  });
+
+  return deferred.promise;
+};
+
+module.exports = auth;