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.
 
SharePoint
Now, go to Add Webparts- > Media and Contents -> Add Script Editor Web part.

SharePoint

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

SharePoint
  1. <script type="text/javascript">  
  2. ExecuteOrDelayUntilScriptLoaded(init,'sp.js');  
  3. var currentUser;  
  4. function init(){  
  5.     this.clientContext = new SP.ClientContext.get_current();  
  6.     this.oWeb = clientContext.get_web();  
  7.     currentUser = this.oWeb.get_currentUser();  
  8.     this.clientContext.load(currentUser);  
  9.     this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));  
  10. }  
  11.   
  12. function onQuerySucceeded() {  
  13.     document.getElementById('userLoginName').innerHTML = currentUser.get_loginName();   
  14.     document.getElementById('userId').innerHTML = currentUser.get_id();  
  15.     document.getElementById('userTitle').innerHTML = currentUser.get_title();  
  16.     document.getElementById('userEmail').innerHTML = currentUser.get_email();  
  17. }  
  18.   
  19. function onQueryFailed(sender, args) {  
  20.     alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());  
  21. }  
  22. </script>  
  23. <div>Current Logged User:  
  24.     <span id="userLoginName"></span></br>  
  25.     <span id="userId"></span></br>  
  26.     <span id="userTitle"></span></br>  
  27.     <span id="userEmail"></span></br>  
  28. </div>  
Result

SharePoint