A service principal with the name User Details Custom API for SPFx

Question

I am consuming an Azure API app in a SharePoint Online react app. I am following this article. But when I try to approve the app permissions on the API management page (SharePoint admin centre).

I get the following error

[HTTP]:400 - Bad Request [CorrelationId]:d3dfb69e-402d-7000-64e6-ba81277edcf1 [Version]:16.0.0.8502 - A service principal with the name helloworld-webpart could not be found. The webpart does

The code in the package solution is

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "helloworld-client-side-solution",
    "id": "acd09ed8-ebcd-4477-a763-ec8544f9175f",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,    
    "webApiPermissionRequests": [    
      {    
        "resource": "mywebserice",    
        "scope": "user_impersonation"    
      },    
      {    
        "resource": "Windows Azure Active Directory",    
        "scope": "User.Read"    
      }    
    ]
  },
  "paths": {
    "zippedPackage": "solution/helloworld.sppkg"
  }
}

On the web part i have added the following code

this.context.aadHttpClientFactory
      .getClient('85540847a-e29a-4843-9154-cf80513f7d92')
      .then((client: AadHttpClient): void => {
        client
          .get('https://mywebserice.azurewebsites.net/api/students', AadHttpClient.configurations.v1)
          .then((response: HttpClientResponse): Promise<JSON> => {
            return response.json();
          })
          .then((responseJSON: JSON): void => {
            //Display the JSON in a table
            var claimsTable = this.domElement.getElementsByClassName("azFuncClaimsTable")[0];
            for (var key in responseJSON) {
              var trElement = document.createElement("tr");
              trElement.innerHTML = `<td class="${styles.azFuncCell}">${key}</td><td class="${styles.azFuncCell}">${responseJSON[key]}</td>`;
              claimsTable.appendChild(trElement);
            }
          });
      });
  }

When i run gulp serve on the webpart appears but no data appears. Can someone confirm if the GUID in the .getclient method is the applicationID of the Azure API.

In the console log i get the following error Now I get another error.

**AADSTS50001: The application named guid was not found in the tenant named 466e8469-189a-4f64-8657-f97984c5306b3a.  This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant.  You might have sent your authentication request to the wrong tenant.**

I tried to change the setting under

App Services-> App-> Authetication/Authorization-> Manage application-> settings-> Properties

But when I changed Multitenant to "Yes". I get the following error

Failed to update App ID URI application property. Error detail: The App ID URI is not available. The App ID URI must be from a verified domain within your organization's directory.

I did try to add another domain under Azure active directory -> custom domains. It said the domain needs to be verified but will be done only after 72 hours.

Answer 1

As mentioned in the blog, you need to use the display name of the Azure AD application which you have registered in your Azure Portal.

The display name needs to be the same in the SPFx's package-solution.json file's webApiPermissionRequests attribute. You are currently AFAIK using the webpart's name.

So, modify the file as below;

"webApiPermissionRequests": [ 
    { 
        "resource": "<your Azure AD app display name>", 
        "scope": "user_impersonation" 
    },
    {
        "resource": "Windows Azure Active Directory",
        "scope": "User.Read"
    }
],

To answer your 2nd question, yes it will work with the clientID and applicationID, both of them should be fine.