Merge pull request #13 from Azure-Samples/fix-login-parameters

fix login request parameters, update readme

Author: derisen

App/AuthProvider.js

@@ -3,7 +3,7 @@
  * Licensed under the MIT License.
  */
 
-const { PublicClientApplication } = require('@azure/msal-node');
+const { PublicClientApplication, InteractionRequiredAuthError } = require('@azure/msal-node');
 const { shell } = require('electron');
 
 class AuthProvider {
@@ -23,8 +23,13 @@ class AuthProvider {
         this.account = null;
     }
 
-    async login(tokenRequest) {
-        const authResponse = await this.getToken(tokenRequest);
+    async login() {
+        const authResponse = await this.getToken({
+            // If there are scopes that you would like users to consent up front, add them below
+            // by default, MSAL will add the OIDC scopes to every token request, so we omit those here
+            scopes: [],
+        });
+
         return this.handleResponse(authResponse);
     }
 
@@ -40,9 +45,9 @@ class AuthProvider {
             if (this.account.idTokenClaims.hasOwnProperty('login_hint')) {
                 await shell.openExternal(`${this.msalConfig.auth.authority}/oauth2/v2.0/logout?logout_hint=${encodeURIComponent(this.account.idTokenClaims.login_hint)}`);
             }
-    
+
             await this.cache.removeAccount(this.account);
-            this.account = null;   
+            this.account = null;
         } catch (error) {
             console.log(error);
         }
@@ -56,7 +61,6 @@ class AuthProvider {
             tokenRequest.account = account;
             authResponse = await this.getTokenSilent(tokenRequest);
         } else {
-            console.log('get token interactive');
             authResponse = await this.getTokenInteractive(tokenRequest);
         }
 
@@ -67,8 +71,12 @@ class AuthProvider {
         try {
             return await this.clientApplication.acquireTokenSilent(tokenRequest);
         } catch (error) {
-            console.log('Silent token acquisition failed, acquiring token interactive');
-            return await this.getTokenInteractive(tokenRequest);
+            if (error instanceof InteractionRequiredAuthError) {
+                console.log('Silent token acquisition failed, acquiring token interactive');
+                return await this.getTokenInteractive(tokenRequest);
+            }
+
+            console.log(error);
         }
     }
 
@@ -82,7 +90,7 @@ class AuthProvider {
                 ...tokenRequest,
                 openBrowser,
                 successTemplate: '<h1>Successfully signed in!</h1> <p>You can close this window now.</p>',
-                failureTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
+                errorTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
             });
 
             return authResponse;

App/main.js

@@ -7,12 +7,11 @@ const path = require("path");
 const { app, ipcMain, BrowserWindow } = require("electron");
 
 const AuthProvider = require("./AuthProvider");
-
 const { IPC_MESSAGES } = require("./constants");
 const { protectedResources, msalConfig } = require("./authConfig");
 const getGraphClient = require("./graph");
 
-const authProvider = new AuthProvider(msalConfig);
+let authProvider;
 let mainWindow;
 
 function createWindow() {
@@ -22,11 +21,7 @@ function createWindow() {
         webPreferences: { preload: path.join(__dirname, "preload.js") },
     });
 
-    mainWindow.on('show', () => {
-        setTimeout(() => {
-            mainWindow.focus();
-        }, 200);
-    });
+    authProvider = new AuthProvider(msalConfig);
 }
 
 app.on("ready", () => {
@@ -52,7 +47,6 @@ ipcMain.on(IPC_MESSAGES.LOGIN, async () => {
     const account = await authProvider.login();
 
     await mainWindow.loadFile(path.join(__dirname, "./index.html"));
-    mainWindow.show();
 
     mainWindow.webContents.send(IPC_MESSAGES.SHOW_WELCOME_MESSAGE, account);
 });
@@ -61,7 +55,6 @@ ipcMain.on(IPC_MESSAGES.LOGOUT, async () => {
     await authProvider.logout();
 
     await mainWindow.loadFile(path.join(__dirname, "./index.html"));
-    mainWindow.show();
 });
 
 ipcMain.on(IPC_MESSAGES.GET_PROFILE, async () => {
@@ -73,9 +66,9 @@ ipcMain.on(IPC_MESSAGES.GET_PROFILE, async () => {
     const account = authProvider.account;
 
     await mainWindow.loadFile(path.join(__dirname, "./index.html"));
-    mainWindow.show();
 
-    const graphResponse = await getGraphClient(tokenResponse.accessToken).api(protectedResources.graphMe.endpoint).get();
+    const graphResponse = await getGraphClient(tokenResponse.accessToken)
+        .api(protectedResources.graphMe.endpoint).get();
 
     mainWindow.webContents.send(IPC_MESSAGES.SHOW_WELCOME_MESSAGE, account);
     mainWindow.webContents.send(IPC_MESSAGES.SET_PROFILE, graphResponse);

README.md

@@ -15,18 +15,25 @@ urlFragment: "ms-identity-javascript-nodejs-desktop"
 
 This sample demonstrates how to use [MSAL Node](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node) to sign-in a user and acquire an access token for a protected resource such as Microsoft Graph in an Electron desktop application using the [authorization code grant with PKCE](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-auth-code-flow) flow.
 
+This sample backs the following articles on Microsoft Docs:
+
+- [Quickstart: Acquire a token and call Microsoft Graph API from a desktop application](https://learn.microsoft.com/azure/active-directory/develop/desktop-app-quickstart?pivots=devlang-nodejs-electron)
+- [Tutorial: Sign in users and call the Microsoft Graph API in an Electron desktop app](https://learn.microsoft.com/azure/active-directory/develop/tutorial-v2-nodejs-desktop)
+
 > :information_source: Looking for a TypeScript implementation? See: [ElectronTestApp](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples/ElectronTestApp)
 
 > :information_source: Looking for an Electron with React implementation? See: [ElectronReactTestApp](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples/ElectronReactTestApp)
 
+> :warning: This sample does not implement persistent caching. See [Caching with MSAL Node](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/caching.md) for more information.
+
 ## Features
 
 This sample demonstrates the following **MSAL Node** concepts:
 
-* Configuration
-* Login and logout
-* Acquiring an access token
-* Calling a web API
+- Configuration
+- Login and logout
+- Acquiring an access token
+- Calling a web API
 
 ## Contents
 
@@ -45,8 +52,8 @@ This sample demonstrates the following **MSAL Node** concepts:
 
 ### Prerequisites
 
-* [Node.js](https://nodejs.org/en/) must be installed to run this sample.
-* [Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
+- [Node.js](https://nodejs.org/en/) must be installed to run this sample.
+- [Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
 
 ### Register and Setup the application
 
@@ -68,7 +75,7 @@ This sample demonstrates the following **MSAL Node** concepts:
 1. Select **Add optional claim**:
     1. Select **optional claim type**, then choose **ID**.
     1. Select the optional claim **login_hint**.
-    > An opaque, reliable login hint claim. This claim is the best value to use for the login_hint OAuth parameter in all flows to get SSO.See $[optional claims](https://docs.microsoft.com/azure/active-directory/develop/active-directory-optional-claims) for more details on this optional claim.
+    > An opaque, reliable login hint claim. This claim is the best value to use for the login_hint OAuth parameter in all flows to get SSO. See $[optional claims](https://docs.microsoft.com/azure/active-directory/develop/active-directory-optional-claims) for more details.
     1. Select **Add** to save your changes.
 
 #### Step 2: Clone the repository  
@@ -80,12 +87,8 @@ Clone this repository `git clone https://github.com/Azure-Samples/ms-identity-ja
 1. Open the [.authConfig.js](./App/authConfig.js) file and provide the required configuration values.
     1. Replace the string `Enter_the_Application_Id_Here` with your app/client ID on Azure AD portal.
     1. Replace the string `Enter_the_Tenant_Info_Here` with your tenant ID on Azure AD portal.
-    1. Replace the string `Enter_the_Cloud_Instance_Id_Here` with `https://login.microsoftonline.com/` (see **note** below).
-    1. Replace the string `Enter_the_Graph_Endpoint_Here`. with `https://graph.microsoft.com/` (see **note** below).
-
-> :information_source: *note*: This is for multi-tenant applications located on the Global Azure cloud. For more information, see: [Use MSAL in a national cloud environment](https://docs.microsoft.com/azure/active-directory/develop/authentication-national-cloud)
-
-> :information_source: *note*: This is for MS Graph instance located on the Global Azure cloud. For more information, see: [Use Microsoft Graph in a national cloud environment](https://docs.microsoft.com/graph/deployments)
+    1. Replace the string `Enter_the_Cloud_Instance_Id_Here` with `https://login.microsoftonline.com/` (include the trailing slash).
+    1. Replace the string `Enter_the_Graph_Endpoint_Here`. with `https://graph.microsoft.com/` (include the trailing slash).
 
 #### step 4: Run  the sample