PnP-JS-Core: Get Site Permissions in SharePoint

Securing the contents is very important in today’s world and SharePoint provides well structured way in providing the protection to the information stored with in SharePoint sites. Groups will be created and managed the collection of users within SharePoint to grant permissions to the SharePoint blocks such as (site, Library, List, Items, Documents, etc..)

In this article, We will use the PnP JavaScript Library to retrieve the permissions associated to the SharePoint site.

PnP JavaScript Library provides number of properties to access the SharePoint objects and methods to do Read Write operations to the SharePoint Objects. This library uses the SharePoint REST API development model to do all sort of SharePoint interactions. So this library only avail for SharePoint 2013+and SharePoint Online.To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

Syntax:

pnp.sp.web.roleAssignments.expand(“Member,RoleDefinitionBindings”).get().then(function(result){ });

Example:

The below steps and code snippet used to all visible lists & libraries from SharePoint site using PnP JavaScript library,

1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
   • Download pnp.js  PnP JS file
   • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
   • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
2. Create new web part page and insert Content Editor web part
3. Create a sample.html file in Site Assets or Style library and insert the below code snippet

   <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script> <script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script> <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>     <div id="sample"></div>     <script type="text/javascript"> //Member property returns the user or group //RoleDefinitionBindings property returns the collection of associated role permissions for each Member //Use the expand method to get the properties from releAssignments //then( ) runs on success //catch( ) runs on failure $pnp.sp.web.roleAssignments.expand("Member,RoleDefinitionBindings").get().then(function(result) {     var assignments = result;     var propValue = "";     propValue += "<table>";     propValue += "<tr><th>Member</th><th>Role Assignments</tr></tr>";     assignments.forEach(function(role) {         var roledefs = "";         role.RoleDefinitionBindings.forEach(function(rb) {             roledefs += rb.Name + "; ";         });         propValue += "<tr>";         propValue += "<td>" + role.Member["Title"] + "</td>";         propValue += "<td>" + roledefs + "</td>";         propValue += "</tr>";     });     propValue += "</table>";     document.getElementById("sample").innerHTML = propValue; }).catch(function(err) {     console.log("Error: " + err); }); </script>

4. Add the URL of sample.html file to the content editor web part
5. Click OK to apply the changes to the web part and save the page.
6. Now the page displays a all the site permissions associated to the current SharePoint website using PnP JavaScript method .

Note: 
Supports SharePoint 2013, SharePoint 2016 and SharePoint Online. 
For on-premise environment, PnP requests will not work properly due to JSON Light is not enabled by default. 
To enable , we have to modify the headers before calling PnP methods. Check this link https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/13/pnp-jscore-1-0-1/ for setup the headers.

[code lang=”js”]
//Set response type in headers
$pnp.setup({
headers: {
"Accept": "application/json; odata=verbose"
}
});
[/code]

Output: