Get Current User Basic Properties Using PNP JS

In this blog, I have explained how to retrieve the current user properties using PNP JS.

To retrieve the current user properties using PNP JS, we need to follow the below steps.
 
Add the following references into your page.
  • PNP JS - It's a library for consuming SharePoint, Graph, and Office 365 REST APIs.
  • ES6 Promise - It provides support for handling the promises in Internet Explorer.
  • Fetch - It provides support for the fetch protocol in Internet Explorer.
Download reference from here.
So now, let's work on some basic operations using PnP JavaScript library.
 

Get Current User Properties

 
It retrieves some of the important properties of the currently logged in user. For example, User id, Login name,  Email, and IsSiteAdmin etc.
 
Code 
  1. <html>    
  2. <head>    
  3.     <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>    
  4.     <script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript">  
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js" type="text/javascript"  
  6. </script>    
  7.     <script type="text/javascript">    
  8.         $(document).ready(function() {    
  9.             getUserBasicProperties()    
  10.         })    
  11.     
  12.         function getUserBasicProperties() {    
  13.             $pnp.sp.web.currentUser.get().then(function(basicprops) {    
  14.                 var props = {};    
  15.                 props.Email = basicprops.Email;    
  16.                 props.Title = basicprops.Title;    
  17.                 props.LoginName = basicprops.LoginName    
  18.                 $('#one').html(props.Email);    
  19.                 $('#two').html(props.Title);    
  20.                 $('#three').html(props.LoginName);    
  21.             })    
  22.         }    
  23.     </script>    
  24. </head>    
  25.     
  26. <body>    
  27.     <div id="displayUpdates">    
  28.         <ul>    
  29.         <li id="one"></li>    
  30.         <li id="two"></li>    
  31.         <li id="three"></li>    
  32.         </ul>    
  33.     </div>    
  34. </body>    
  35. </html>     
The successful JSON response will be like below. 
 
 Get Current User Basic Properties Using PNP JS
 
The final result is printed for your reference.
 
Get Current User Basic Properties Using PNP JS
 
Happy SharePointing!....