Get Current User Details Using JavaScript Object Model In SharePoint

Here, I am explaining how to show current user details using JavaScript Object Model (JSOM) in SharePoint online.

 

Steps

Open your site and go to Edit Site -> Add Web parts.

 

Now, go to Add Webparts- > Media and Contents -> Add Script Editor Web part.

Edit Script Editor Webpart -> Edit Snipped -> Paste your code.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(init,'sp.js');
var currentUser;
function init(){
    this.clientContext = new SP.ClientContext.get_current();
    this.oWeb = clientContext.get_web();
    currentUser = this.oWeb.get_currentUser();
    this.clientContext.load(currentUser);
    this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}

function onQuerySucceeded() {
    document.getElementById('userLoginName').innerHTML = currentUser.get_loginName();
    document.getElementById('userId').innerHTML = currentUser.get_id();
    document.getElementById('userTitle').innerHTML = currentUser.get_title();
    document.getElementById('userEmail').innerHTML = currentUser.get_email();
}

function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>
<div>Current Logged User:
    <span id="userLoginName"></span></br>
    <span id="userId"></span></br>
    <span id="userTitle"></span></br>
    <span id="userEmail"></span></br>
</div>

Result