MSGraphNotifications/Javascript/sample-app

Sample App for running the Microsoft Graph notifications client library in your browser

Getting Started

Prerequisites

1. Have node and npm installed. More details here
2. Install http-server globally: npm install http-server -g

Building the sample

1. npm install (most of the time, only once is enough)
2. npm run build

Running the sample

1. Build the sample (if is not built already).
2. Add the reply url http://localhost:8080/authreply.html (please see this for more details about the empty page for the reply url) to the redirect URIs list within the Authentication page of your Azure Active Directory client app registration.
3. Set the following values:
   • msalConfig.auth.clientId in index.html: this is the client ID of your Azure AD client app
   • crossDeviceAppId in index.html: this is the "cross-device domain name" that you have registered and verified in your Cross-Device App registration in Partner Center (https://partner.microsoft.com/dashboard )
4. Open command prompt, powershell, or git for windows and start the http-server (by running http-server) within the folder of the sample app (i.e.: ~/repository-source-path/sample-app).
5. Open the page http://localhost:8080/index.html (check the port with the one given by http-server).
   • if the port is other than 8080 the 2nd step needs to be redone with the new given port.
   • don't go to http://localhost:8080/ without index.html, as that doesn't work in http-server.
6. Sign in with an Azure AD account.
   • see "Login with a personal Microsoft account (MSA)" below if you want to use that form of account.
7. Click Subscribe, then click Allow on the Chrome browser prompt regarding notification permission.
   • the JavaScript console can be opened to see the logs and results. Make sure that all the log levels are selected.
8. Click the other buttons to exercise the various functions.
   • as before, look in the JavaScript console for the logs and results.
9. Post a new notification from Graph explorer and see a notification popup. Click the popup to be redirected to https://docs.microsoft.com/en-us/graph/notifications-concept-overview

How-to (mostly specific to Chrome and Firefox)

1. Login with a personal Microsoft account (MSA) instead of AAD:

   1. Change msalConfig.auth.authority to https://login.microsoftonline.com/consumers
   2. Change requestObj.scopes to ["https://activity.windows.com/useractivity.readwrite.createdbyapp"]
   3. The clientId might need to be changed as well (in case 2 different apps are used) from the one used for an Azure AD account
   4. Reload the page

2. Unregister the service worker created by this app:

   • Chrome:
     1. Option 1: Go to Dev Tools -> Application -> Service Workers -> (The one that you want) Unregister. More details in here
     2. Option 2: chrome://serviceworker-internals/. More details in here (first option)
   • Firefox:
     • Go to about:serviceworkers and unregister the one that you want
   • It's necessary to unregister the service worker when signing out and then signing in as a different user, or to troubleshoot when a push notification is not received.

3. Check if Chrome has received a push notification: go to chrome://gcm-internals (Receive Message Log section). Also here the connection can be checked. More details in Payload Encryption Issue

4. Force the acquireTokenSilent to call Azure AD instead of waiting 1 hour until the cached token expires; The following are 2 options for doing it:

   1. one of key entry is deleted from the localStorage; more specially {"authority":"https://login.microsoftonline.com/consumers/","clientId":"..","scopes":"https://activity.windows.com/UserActivity.ReadWrite.CreatedByApp","homeAccountIdentifier":"…"}; the one that has the scope set to activity.*.com (as there are 2 with the previous template)
   2. forceRefresh flag

Other tips

1. Getting duplicate push notifications? This is a known server-side issue in some cases. See the README for the client itself to learn more. Look for the text starting with:

   userNotificationApiImpl.processPushNotificationAsync(notificationPayload) may call back to the Graph notification server to fetch notification data

2. To look at the logs of the sample app and the client library, open the developer tools -> console.

3. Wondering how the reload of index.html is avoided? Please see MSAL JS: 1.2.0 beta.0