How to use the Microsoft Graph mgt-people-picker component in .NET Core

Question

I'm new in Microsoft Graph API. I'm trying to develop a proof of concept .NET core MVC Web App, which one of the functionality is to have people-picker to search user from Azure AD.

Following is how I did:

<script src='https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js'></script>


`<mgt-msal-provider client-id="[Removed]"
               login-type="redirect"
               scopes="user.read,people.read"
               redirect-uri="[Removed]"
               authority="[Removed]"></mgt-msal-provider>`

`<mgt-people-picker></mgt-people-picker>`

I have configured below information based on Microsoft documentation:

`"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "[Removed]",
"ClientId": "[Removed]",
"TenantId": "[Removed]",
"CallbackPath": "/signin-oidc"}`

Somehow it does not able to search my Azure AD users, its always should not match is found. But when i try to use <mgt-mock-provider></mgt-mock-provider>, i can see a list of users.

Is there any workable example that someone can show to me or guide me to a correct direction to let me find out the answer I need.

Thank you very much for your help.

Answer 1

You are missing a login operation.

Please add <mgt-login></mgt-login>.

I download the sample code from the link you shared.

After configuring it by following the steps in that link, I added the following code into Index.cshtml file.

<div class="text-center">
    <h1>Welcome!</h1>
    <script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <mgt-msal-provider client-id="{client id}"
                       login-type="redirect"
                       scopes="user.read,people.read"
                       redirect-uri="https://localhost:44321/"
                       authority="https://login.microsoftonline.com/{my tenant}.onmicrosoft.com"></mgt-msal-provider>
    <mgt-login></mgt-login>
    <mgt-people-picker></mgt-people-picker>
</div>

appsettings.json is like this:

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "{my tenant}.onmicrosoft.com",
    "TenantId": "{tenant id}",
    "ClientId": "{client id}",
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath ": "/signout-callback-oidc",
    // To call an API
    "ClientSecret": "{client secret}"
  },

After I sign in, the home page is like this: