Edit

Share via


Add app-only authentication to JavaScript apps for Microsoft Graph

In this article, you add app-only authentication to the application you created in Build JavaScript apps with Microsoft Graph and app-only authentication.

The Azure Identity client library for JavaScript provides many TokenCredential classes that implement OAuth2 token flows. The Microsoft Graph JavaScript client library uses those classes to authenticate calls to Microsoft Graph.

Configure Graph client for app-only authentication

In this section, you use the ClientSecretCredential class to request an access token by using the client credentials flow.

  1. Open graphHelper.js and add the following code.

    import 'isomorphic-fetch';
    import { ClientSecretCredential } from '@azure/identity';
    import { Client } from '@microsoft/microsoft-graph-client';
    // prettier-ignore
    import { TokenCredentialAuthenticationProvider } from
      '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';
    
    let _settings = undefined;
    let _clientSecretCredential = undefined;
    let _appClient = undefined;
    
    export function initializeGraphForAppOnlyAuth(settings) {
      // Ensure settings isn't null
      if (!settings) {
        throw new Error('Settings cannot be undefined');
      }
    
      _settings = settings;
    
      // Ensure settings isn't null
      if (!_settings) {
        throw new Error('Settings cannot be undefined');
      }
    
      if (!_clientSecretCredential) {
        _clientSecretCredential = new ClientSecretCredential(
          _settings.tenantId,
          _settings.clientId,
          _settings.clientSecret,
        );
      }
    
      if (!_appClient) {
        const authProvider = new TokenCredentialAuthenticationProvider(
          _clientSecretCredential,
          {
            scopes: ['https://graph.microsoft.com/.default'],
          },
        );
    
        _appClient = Client.initWithMiddleware({
          authProvider: authProvider,
        });
      }
    }
    
  2. Replace the empty initializeGraph function in index.js with the following.

    function initializeGraph(settings) {
      initializeGraphForAppOnlyAuth(settings);
    }
    

This code declares two private properties, a ClientSecretCredential object and a Client object. The InitializeGraphForAppOnlyAuth function creates a new instance of ClientSecretCredential, then uses that instance to create a new instance of Client. Every time an API call is made to Microsoft Graph through the _appClient, it uses the provided credential to get an access token.

Test the ClientSecretCredential

Next, add code to get an access token from the ClientSecretCredential.

  1. Add the following function to graphHelper.js.

    export async function getAppOnlyTokenAsync() {
      // Ensure credential isn't undefined
      if (!_clientSecretCredential) {
        throw new Error('Graph has not been initialized for app-only auth');
      }
    
      // Request token with given scopes
      const response = await _clientSecretCredential.getToken([
        'https://graph.microsoft.com/.default',
      ]);
      return response.token;
    }
    
  2. Replace the empty displayAccessTokenAsync function in index.js with the following.

    async function displayAccessTokenAsync() {
      try {
        const appOnlyToken = await getAppOnlyTokenAsync();
        console.log(`App-only token: ${appOnlyToken}`);
      } catch (err) {
        console.log(`Error getting app-only access token: ${err}`);
      }
    }
    
  3. Run the following command in your CLI in the root of your project.

    node index.js
    
  4. Enter 1 when prompted for an option. The application displays an access token.

    JavaScript Graph App-Only Tutorial
    
    [1] Display access token
    [2] List users
    [3] Make a Graph call
    [0] Exit
    
    Select an option [1...3 / 0]: 1
    App-only token: eyJ0eXAiOiJKV1QiLCJub25jZSI6IlVDTzRYOWtKYlNLVjVkRzJGenJqd2xvVUcwWS...
    

    Tip

    For validation and debugging purposes only, you can decode app-only access tokens using Microsoft's online token parser at https://jwt.ms. Parsing your token can be useful if you encounter token errors when calling Microsoft Graph. For example, verifying that the role claim in the token contains the expected Microsoft Graph permission scopes.

Next step