0

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.

  • 1
    As mentioned in the blog, the resource will be the name of the Azure AD app that you have registered in the Azure portal. Is it the same name ? Yes, you can use the application ID or the client ID of the app. So, it should be "webApiPermissionRequests": [ { "resource": "<your Azure AD app name>", "scope": "user_impersonation" }, – Gautam Sheth Jan 17 at 13:55
0

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"
    }
],

enter image description here

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

  • thank you for the reply .I changed the resource name to match the azure API name. but I still get the same error. – user1339913 Jan 17 at 19:19
  • 1) are you in the same azure ad as the O365 tenant ? 2) can you create a new azure ad app with different display name and check ? – Gautam Sheth Jan 17 at 19:25
  • Based on your updated error message, would point you to waldek's blog here for the resolution of the issue - Common issues while working with SPFx permissions. You need to open the custom API endpoint in your O365 tenant and then consent to it which will then allow you to consume it – Gautam Sheth Jan 18 at 6:30
  • Thank you Gautam, I did go through the article but I could not change it to a multitenant 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. – user1339913 Jan 18 at 19:05
  • can you create a new Azure AD app and while creating it set it as multi tenant and then check ? Also, would suggest that you create the App in the same O365 tenant and then check. – Gautam Sheth Jan 21 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.