In my previous article, I have explained how to fetch the access token to consume graph APIs in web applications.
When we retrieve a user from Office 365 it returns the default properties such as - user id, business phone, display name, job title, mail, userprincipalname, mobilephone, and office location.
Use Microsoft Graph Explorer to retrieve the default properties of the below request.
Request

GET https://graph.microsoft.com/v1.0/{userid | userprincipalname}
It retrieves the properties of the current signer in user.
SharePoint


Now, I am going to retrieve the user information from the SharePoint site.
Open the SharePoint site.
Create a user.html file under siteAssets.
Step1

Create the function requesttoken() to fetch the access token and use it in the headers.
Code
  1. // refer jquery
  2. < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < /script> < script type = "text/javascript" >
  3. var token; // create global variable holds the access token
  4. $(document).ready(function() {
  5. requestToken(); // call the requesttoken function on page load
  6. });
  8. function requestToken() {
  9. $.ajax({
  10. "async": true,
  11. "crossDomain": true,
  12. "url": "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie
  13. "method": "POST",
  14. "headers": {
  15. "content-type": "application/x-www-form-urlencoded"
  16. },
  17. "data": {
  18. "grant_type": "client_credentials",
  19. "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id
  20. "client_secret": "DxSF1K+JKl7LWJK8+3Ibg4il5JM4qUvdwOtShsYNvEA=", //Provide your secret
  21. "scope ": "https://graph.microsoft.com/.default"
  22. },
  23. success: function(response) {
  24. console.log(response);
  25. token = response.access_token;
  26. getUserInformation();
  27. },
  28. error: function(error) {
  29. console.log(JSON.stringify(error));
  30. }
  31. })
  32. }
The below response is the outcome of the above code:
SharePoint
Now, create a function getUserProperties() and retreive the user properties from Microsoft Graph API.
Code
  1. function getUserInformation() {
  2. $.ajax({
  3. method: 'GET',
  4. url: "https://graph.microsoft.com/v1.0/users/{userid | userprincipalname}",
  5. headers: {
  6. 'Authorization': 'Bearer ' + token,
  7. 'Content-Type': 'application/json'
  8. },
  9. }).success(function(response) {
  10. console.log(response);
  11. }).error(function(error) {});
  12. }
After passing the user principalname, the code looks like below.
  1. function getUserInformation() {
  2. $.ajax({
  3. method: 'GET',
  4. url: "https://graph.microsoft.com/v1.0/users/[email protected]",
  5. headers: {
  6. 'Authorization': 'Bearer ' + token,
  7. 'Content-Type': 'application/json'
  8. },
  9. }).success(function(response) {
  10. console.log(response);
  11. }).error(function(error) {});
  12. }
The below response is the outcome of the above code.
SharePoint
So, let's append the code into HTML.
Code
  1. function getUser() {
  2. $.ajax({
  3. method: 'GET',
  4. url: "https://graph.microsoft.com/v1.0/users/[email protected]",
  5. headers: {
  6. 'Authorization': 'Bearer ' + token,
  7. 'Content-Type': 'application/json'
  8. },
  9. }).success(function(response) {
  10. console.log(response);
  11. var Name = response.displayName;
  12. var Title = response.jobTitle;
  13. var email = response.mail;
  14. var office = response.officeLocation;
  15. var mobile = response.mobilePhone;
  16. var business = response.businessPhones[0];
  17. $('#one').append(Name);
  18. $('#two').append(Title);
  19. $('#three').append(email);
  20. $('#four').append(office);
  21. $('#five').append(mobile);
  22. $('#six').append(business);
  23. }).error(function(error) {});
  24. }
HTML
  1. Name:<p id="one"></p>
  2. Job Title:<p id="two"></p>
  3. Email:<p id="three"></p>
  4. Office:<p id="four"></p>
  5. Mobile:<p id="five"></p>
  6. Business Phone:<p id="six"></p>
Result

SharePoint