Integrating Graph API With Node.js App On Azure

Introduction

Today, in this write-up, let us learn how we can integrate SharePoint and Node.js App on Azure using Microsoft Graph API as a bridge.

Read permissions are enabled in the Microsoft Graph API to interact with SharePoint. In this scenario, all the site collections are retrieved via Microsoft Graph API. It's essential to form the URL and test on Graph Explorer. Once done, an app is registered on the Azure Portal. I have explained the detailed steps for that in this article. Post registration, a node.js Azure webapp will be created which, in turn, will call the app registered on Azure Portal using a token endpoint.

Setting up Microsoft Graph API

Test the query using Graph Explorer. It should result in success while using your SharePoint tenant here.

Integrating GraphAPI with Node.js App on Azure

Registering App on Azure Portal

Create an App. Enter the details as shown below. We shall use SharePoint site URL in the Redirect URL text area.

Settting Permissions

Grant the Read permisssions. Don't forget to grant Admin Consent.

Generating Client Secret

Create NodeJS Web App on Azure

Open the Azure Cloud Shell and start executing the below commands.

Create Resource Group

az group create --name myResourceGroup --location "South Central US"

Create App Service Plan

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Create WebApp

I have used nodeazuregraphapisp as <app_name>

# Bash and Powershell
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name>

SetRuntime

# Bash and Powershell
az webapp config appsettings set --resource-group myResourceGroup --name <app_name> --settings WEBSITE_NODE_DEFAULT_VERSION=8.11.1

Code NodeJS in VsCode

Install node.js, Express, and npm.

Below is the code file for accessing the Graph API. Refer to the source code for complete details.

<html>
<head>
<title>Microsoft Graph API</title>
</head>
<body>
<a href="/home"> Home</a>
<a href="/GraphAPI-SharePoint"> SharePoint GraphAPI</a>
</body>
<script type="text/css">
p { word-break: break-all }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
requestToken();
});
var token;
function requestToken() {
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/yourtenantname.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded"
},
"data": {
"grant_type": "client_credentials",
"client_id ": "2dd85589-51c5-xxx-xxx-xxxxxx", //Enter your client id
"client_secret": "+{)}:1=f^5%z......",//Enter your client secret
"scope ": "https://graph.microsoft.com/.default"
},
success: function(response) {
console.log(response);
token = response.access_token;
document.getElementById('access_token').innerHTML = token
getSiteInformation();
},
error: function(error) {
alert("token error" + JSON.stringify(error)) ;
console.log(JSON.stringify(error));
}
})
}
function getSiteInformation() {
$.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/sites?search=*",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
}).success(function(response) {
console.log(response);
// alert("success");
for(var i=0; i<response.value.length; i++){
console.log(response.value[i].displayName);
var html =
"<tr><td>" + response.value[i].displayName+ "</td><td>" + response.value[i].webUrl+ "</td><td>" + response.value[i].createdDateTime+ "</td>";
$("#site_info").append(html);
}
}).error(function(error) {
alert(JSON.stringify(error));
console.log(JSON.stringify(error));
});
}
</script>
<p id="access_token"></p>
<p id="site_info"></p>
</html>

Create Zip File

Run the below command in your VS Code Terminal.

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

Deploy Zip

Drag and drop the zip file at the below URL. It will automatically get unzipped and deployed.

https://<app_name>.scm.azurewebsites.net/ZipDeployUI

Access your Node.js App on Azure

https://nodeazuregraphapisp.azurewebsites.net/

Reference

https://nodejs.org/en/
https://expressjs.com/
https://developer.microsoft.com/en-us/graph
https://azure.microsoft.com/en-us/