@pnp/core/adalclient¶
This module contains the AdalClient class which can be used to authenticate to any AzureAD secured resource. It is designed to work seamlessly with SharePoint Framework's permissions.
Where possible it is recommended to use the MSAL client.
Getting Started¶
Install the library and required dependencies
npm install @pnp/adaljsclient --save
Setup and Use inside SharePoint Framework¶
Using the SharePoint Framework is the preferred way to make use of the AdalClient as we can use the AADTokenProvider to efficiently get tokens on your behalf. You can also read more about how this process works and the necessary SPFx configurations in the SharePoint Framework 1.6 release notes. This method will only work for SharePoint Framework >= 1.6. For earlier versions of SharePoint Framework you can still use the AdalClient as outlined below using the constructor to specify the values for an AAD Application you have setup.
Calling the graph api¶
By providing the context in the onInit we can create the adal client from known information.
import { graph } from "@pnp/graph";
import { getRandomString } from "@pnp/core";
// ...
public onInit(): Promise<void> {
return super.onInit().then(_ => {
// other init code may be present
graph.setup(this.context);
});
}
public render(): void {
// here we are creating a team with a random name, required Group ReadWrite All permissions
const teamName = `ATeam.${getRandomString(4)}`;
this.domElement.innerHTML = `Hello, I am creating a team named "${teamName}" for you...`;
graph.teams.create(teamName, "This is a description").then(t => {
this.domElement.innerHTML += "done!";
}).catch(e => {
this.domElement.innerHTML = `Oops, I ran into a problem...${JSON.stringify(e, null, 4)}`;
});
}
Calling the SharePoint API¶
This example shows how to use the ADALClient with the @pnp/sp library to call an API secured with AAD from within SharePoint Framework.
import { SPFxAdalClient } from "@pnp/core";
import { sp } from "@pnp/sp/presets/all";
// ...
public onInit(): Promise<void> {
return super.onInit().then(_ => {
// other init code may be present
sp.setup({
spfxContext: this.context,
sp: {
fetchClientFactory: () => new SPFxAdalClient(this.context),
},
});
});
}
public render(): void {
sp.web().then(t => {
this.domElement.innerHTML = JSON.stringify(t);
}).catch(e => {
this.domElement.innerHTML = JSON.stringify(e);
});
}
Calling the any API¶
You can also use the AdalClient to execute AAD authenticated requests to any API which is properly configured to accept the incoming tokens. This approach will only work within SharePoint Framework >= 1.6. Here we call the SharePoint REST API without the sp library as an example.
import { FetchOptions } from "@pnp/core";
import { AdalClient } from "@pnp/adaljsclient";
import { ODataDefaultParser } from "@pnp/queryable";
// ...
public render(): void {
// create an ADAL Client
const client = AdalClient.fromSPFxContext(this.context);
// setup the request options
const opts: FetchOptions = {
method: "GET",
headers: {
"Accept": "application/json",
},
};
// execute the request
client.fetch("https://{tenant}.sharepoint.com/_api/web", opts).then(response => {
// create a parser to convert the response into JSON.
// You can create your own, at this point you have a fetch Response to work with
const parser = new ODataDefaultParser();
parser.parse(response).then(json => {
this.domElement.innerHTML = JSON.stringify(json);
});
}).catch(e => {
this.domElement.innerHTML = JSON.stringify(e);
});
}
Manually Configure¶
This example shows setting up and using the AdalClient to make queries using information you have setup. You can review this article for more information on setting up and securing any application using AzureAD.
Setup and Use with Microsoft Graph¶
This sample uses a custom AzureAd app you have created and granted the appropriate permissions.
import { AdalClient } from "@pnp/adaljsclient";
import { graph } from "@pnp/graph";
// configure the graph client
// parameters are:
// client id - the id of the application you created in azure ad
// tenant - can be id or URL (shown)
// redirect url - absolute url of a page to which your application and Azure AD app allows replies
graph.setup({
graph: {
fetchClientFactory: () => {
return new AdalClient(
"00000000-0000-0000-0000-000000000000",
"{tenant}.onmicrosoft.com",
"https://myapp/singlesignon.aspx");
},
},
});
try {
// call the graph API
const groups = await graph.groups();
console.log(JSON.stringify(groups, null, 4));
} catch (e) {
console.error(e);
}