graph_sdk_js.md

title	The Microsoft Graph SDK for JavaScript
author	Part 4 of 4 in the [Develop JavaScript Applications with the Microsoft Identity Platform](https://github.com/msusdev) series

The Microsoft Graph SDK for JavaScript

Overview

About us

Co-Presenter Name

☁️ Co-Presenter Title

Co-Presenter Name

☁️ Co-Presenter Title

For questions or help with this series: MSUSDev@Microsoft.com

All demos and source code available online:

https://github.com/MSUSDEV/microsoft_identity_platform_dev

Setting the scene

Series roadmap

• Session 1:
  • Authenticating users in JavaScript apps with MSAL.javascript
• Session 2:
  • Discover Microsoft Graph Toolkit Components
• Session 3:
  • Authenticating to Azure with MSAL.javascript
• Session 4:
  • ↪️ The Microsoft Graph SDK for JavaScript

Today's agenda

1. Item

Demo: Accessing Azure resource using MSAL.javascript and a Node.javascript server-side app

::: notes

1. Open Visual Studio Code in an empty folder

2. Run git clone https://github.com/msusdev/example-static-javascript-app.git . to clone the sample Node.javascript web application

3. Run npm install to install the Node.javascript dependencies

4. Switch to the example branch

5. Fill-in the missing client-id and tenant-id fields in the index.javascript file.

6. Run npm start to start the web server and observe the server URL

7. Observe the working application

:::

::: notes

<script src="https://unpkg.com/@microsoft/microsoft-graph-client@3.0.0/lib/graph-javascript-sdk.javascript" crossorigin></script>
<script src="https://unpkg.com/@microsoft/microsoft-graph-client@3.0.0/lib/graph-client-msalBrowserAuthProvider.javascript" crossorigin></script>

const options = {
    authProvider: new MSGraphAuthCodeMSALBrowserAuthProvider.AuthCodeMSALBrowserAuthenticationProvider(client, {
        account: {},
        scopes: ['user.read'],
        interactionType: msal.InteractionType.Popup,
    })
};

var graphClient = MicrosoftGraph.Client.initWithMiddleware(options);

let profile = await graphClient.api('/me').get();
console.dir(profile);

scopes: ['user.read', 'tasks.readwrite'],

let taskLists = await graphClient.api('/me/todo/lists').get();
console.dir(taskLists);

var list = {
    displayName: 'demo'
};
let taskLists = await graphClient.api('/me/todo/lists').post(list);
console.dir(taskLists);

var list = {
    displayName: 'demo'
};
let taskLists = await graphClient.api('/me/todo/lists/<list-id>/tasks').post(list);
console.dir(taskLists);

var list = {
    title: 'This is fun!'
};
var listId = '<list-id>';
let taskLists = await graphClient.api('/me/todo/lists/' + listId + '/tasks').post(list);
console.dir(taskLists);

:::

::: notes

{
  "name": "servernodegraph",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "start": "node app.js"
  }
}

npm install @azure/identity --save
npm install @microsoft/microsoft-graph-client --save

import { ClientSecretCredential } from '@azure/identity';
import { Client, TokenCredentialAuthenticationProvider } from "@microsoft/microsoft-graph-client";

const credential = new ClientSecretCredential('<tenant-id>', '<client-id>', '<client-secret>');

:::