Get Current User Basic 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

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
getUserBasicProperties()
})
function getUserBasicProperties() {
$pnp.sp.web.currentUser.get().then(function(basicprops) {
var props = {};
props.Email = basicprops.Email;
props.Title = basicprops.Title;
props.LoginName = basicprops.LoginName
$('#one').html(props.Email);
$('#two').html(props.Title);
$('#three').html(props.LoginName);
})
}
</script>
</head>
<body>
<div id="displayUpdates">
<ul>
<li id="one"></li>
<li id="two"></li>
<li id="three"></li>
</ul>
</div>
</body>
</html>

The successful JSON response will be like below.

The final result is printed for your reference.

Happy SharePointing!....