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 https://portal.azure.com, 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>.onmicrosoft.com.
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 = "ravichandran.onmicrosoft.com"; /* [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: 'https://graph.microsoft.com'
},
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);
authContext.handleWindowCallback();
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.login();
}
authContext.acquireToken(config.endpoints.graphApiUri, function (error, token) {
if (error || !token) {
console.log('ADAL error occurred: ' + error);
return;
}
var TeamUri = config.endpoints.graphApiUri + "/v1.0/sites/root/lists";
$.ajax({
type: "GET",
url: TeamUri,
headers: { "Authorization": "Bearer " + token, "Content-Type": "application/json" }
}).done(function (response) {
$.each(response.value,function(i,v){
$('#main').append('

' + v.displayName + '

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