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. }
  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. }
  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