javascript - How to create people picker from Azure Active Directory on a SPA host by SharePoint Online?

Question

I'm creating a single page web application and host it on a SharePoint Online site's document library. In this page I have some textbox which allow user to input their name and email. I'd like to know if it's possible to let user pick up username from Azure Active Directory so they don't need to type in the whole name and email. In native SharePoint page they have this function, I'm wondering if it's still possible in my own page.

Thank you.

I hope it could look like this:

question from:https://stackoverflow.com/questions/65837995/how-to-create-people-picker-from-azure-active-directory-on-a-spa-host-by-sharepo

Answer 1

You can leverage Microsoft Graph's List users API to get the list of users in the directory and populate the dropdown. URL GET https://graph.microsoft.com/v1.0/users Sample response

HTTP/1.1 200 OK
Content-type: application/json

{
  "value": [
    {
      "displayName":"contoso1",
      "mail":"'[email protected]",
      "mailNickname":"contoso1_gmail.com#EXT#",
      "otherMails":["[email protected]"],
      "proxyAddresses":["SMTP:[email protected]"], 
      "userPrincipalName":"contoso1_gmail.com#EXT#@microsoft.onmicrosoft.com"
    }
  ]
}

More details on the API here

Please note the permission requirements for this API