Enable Service Principal Registration at Permission Scope Approval Time with SPFx 1.15.2

With SPFx 1.15.2, a new feature snuck in that allows you to enable service principal registration when you are approving the permissions of the app. If you have ever had your SPFx solution talk to an AAD secured API, you know that not configuring the App Registration in the customer’s tenant can cause problems. Historically, you had to create a URL or some way for the user to sign in separately in the browser to route the user through the consent process for the App Registration.

However, with SPFx 1.15.2, Microsoft has streamlined this process. In your package-solution.json file, there are two new properties appId and replyUrl that you can add to each permission you request in webApiPermissionRequests that allows you to specify the id of the App Registration and a URL that the user is redirected to when the registration is complete.

Here’s an example of a registration:

    "webApiPermissionRequests": [
      {
        "resource": "My API",
        "scope": "user_impersonation",
        "appId": "cff90b76-1822-488f-b9a8-0e7524819c21",
        "replyUrl": "https://api.mycompany.com"
      },
]

Note that the replyUrl must be listed in the Redirect URIs section of the Authentication section of your App Registration. If you don’t have any platforms registered here, add a platform and choose Web. You can then specify the URL.

Build your SPFx package and add it to the App Catalog. To test this, you will need to remove any existing API permissions that were approved on the tenant along with the App Registration in AAD. If you are trying this on a new demo tenant like I did. I noticed I got a few errors during the process and I had to wait a few minutes after the App Catalog was created. If it fails the first time, remove the package and start the process over again.

After you add it to the modern App Catalog, click the Go to API access page. Select your API and click Approve. You will then see the consent request. Accept the permissions it requests and you will be redirected to your replyUrl. The permission should now be approved in Azure Active Directory.

Approve the permissions.
Approve the permissions.

You’ll notice that only basic permissions have been requested. My API actually requires additional permissions, but they don’t show up in the list when I look at the Enterprise Application permissions tab.

Only basic permissions.
Only basic permissions.

If I click on Grant admin consent button, I can then approve those additional permissions requests.

Granting additional permissions.
Granting additional permissions.

When thinking about this, I came to the conclusion that the scope parameter in webApiPermissionRequests represents the scope that you are granting the SPFx service principal. However, your consent flow needs another set of scopes that you are granting to it. For example, I want my API to have access to GroupMember.Read.All but I don’t want the SPFx principal to have it.

While this new capability is a huge step forward, it doesn’t eliminate the manual consent flow that’s still required. However, it does make the initial registration a lot easier. I’m excited to see where this can go.

Published by coreyroth

Corey Roth is the Vice President of Engineering at UnlimitedViz where he helps build the tyGraph product line for data analytics in Microsoft 365. Corey is an eleven-time recipient of the Microsoft MVP award in Office Apps and Services. Corey helps ISVs develop mobile-first applications for Office 365 using technologies such as Ionic Framework and Azure. Corey has always focused on rapid adoption of new Microsoft technologies including Office 365 and Azure. In his spare time, Corey works with his wife, Jennifer, on their product BrewZap, a mobile app platform for breweries.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: