Graph API in SharePoint custom page layout

Azure Active Directory App
We have to create an Azure AD app for access graph API, this app will help to access from particular URL and limit the permission to access the particular data, let we see the steps to create the new Azure AD app, we don’t have pay for Azure AD app and It’s always free.


Step 1
Sign in to your Azure account, if you don’t have an Azure account the sign-up for a free account.
Step 2
Navigate to Azure Active Directory > App Registration > New application registration


Step 3
In the create form give any name for your app and application type is Web app and enter your SharePoint tenet URL in the sign-on URL section then click Create button in the bottom
Step 4
Once app created select the app and click settings then select required permissions, click add and select permission based on your requirement after selected permission don’t forgot click grant permission, this button located next to the Add button
Step 5
Back to select newly created app and click Manifest, in the manifest file oauth2AllowImplicitFlow to true

If you have any questions about creating new custom page layout please refer my previous article Create custom page layout in SharePoint Online

We are used Active Directory Authentication Library (ADAL) JS for authentication, so we have add “adal.min.js” reference in the page layout. In the below JavaScript function we have to pass the Client ID as the Azure AD app ID and subscription id is <your tenant name>
Even you want to get or post only while clicking any button, you have to get token once in the document ready event.

Please be make sure that you using latest version of adal.js, old version having issues in IE browser, also have to add the SharePoint tenant URL under trusted settings in internet options

$( document ).ready(function() {
"use strict";
var subscriptionId = ""; /* [AzureTenantname] from azure */
var clientId = "6cf00073-3103-4af8-84a4-ee2229e3e83e"; /* [AzureADClientID] from azure */
window.config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
endpoints: {
graphApiUri: ''
cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
var authContext = new AuthenticationContext(config);
// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
// If not logged in force login
var user = authContext.getCachedUser();
if (user) {
// Logged in already
else {
authContext.acquireToken(config.endpoints.graphApiUri, function (error, token) {
if (error || !token) {
console.log('ADAL error occurred: ' + error);
var TeamUri = config.endpoints.graphApiUri + "/v1.0/sites/root/lists";
type: "GET",
url: TeamUri,
headers: { "Authorization": "Bearer " + token, "Content-Type": "application/json" }
}).done(function (response) {

' + v.displayName + '

}).fail(function (xhr, textStatus, errorThrown) {
if (xhr.responseJSON.error.code.indexOf('AccessDenied') !== -1) {
console.log('Access Denied.');
else {

Sharing is caring!

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!


Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s