This document discusses securing APIs with Azure Active Directory (AD) authentication from SharePoint Framework (SPFx) solutions. It introduces the AadHttpClient SDK that can be used to call APIs secured with Azure AD without dealing with OAuth flows directly. The SDK handles retrieving access tokens automatically based on the permissions configured for the calling web part in the Azure AD tenant. The document provides an overview of how AadHttpClient works and links to additional resources on setting up API permissions and enabling cross-origin resource sharing (CORS) for APIs.

2. Connect SharePoint Framework solutions to APIs
secured with Azure AD

3. Authenticationisdifficult

4. rencore.com
Calling API secured with Azure AD prerequisites
What is OAuth?
Which flow do I need?
Which type of Azure AD app to create?
Which URLs to enter as Reply URLs?
…but I don’t know where users will put my web part or extension
Is there an SDK I can use?
Does it work in TypeScript?
What if I add another web part to the page?
What if two web parts request token at the same time?
…
…so what do I enter in Reply URLs?

5. AadHttpClient 👍

6. rencore.com
Calling API secured with Azure AD prerequisites
What is OAuth?
Which flow do I need?
Which type of Azure AD app to create?
Which URLs to enter as Reply URLs?
…but I don’t know where users will put my web part or extension
Is there an SDK I can use?
Does it work in TypeScript?
What if I add another web part to the page?
What if two web parts request token at the same time?
…
…so what do I enter in Reply URLs?

7. It.Just.Works.

8. rencore.com
Connect to Azure AD-secured
APIs from SPFx without
headaches
Demo

9. rencore.com
Connect to Azure AD-secured APIs using the AadHttpClient
SharePoint
Online
Client-side web part
Azure
Active
Directory
"SharePoint Online Client“
Permissions - xyz
Tenant administrator configures what
scopes are available for the
MSGraphClient and AadHttpClient by
configuring permissions to specific
pre-provisioned application in the
Azure Active Directory.
1
3
2
Configured access tokens
automatically included in the call
with needed permissions
Request access tokens from
the Azure AD side for the used
application
Custom API

10. rencore.com
• Use the AadHttpClient class to access Azure AD-secured APIs
wldk.nl/spconnect01
• Don’t pass web part context into React components wldk.nl/spconnect02
• Enable CORS for your API wldk.nl/spconnect03
• Setup API permissions in your tenant wldk.nl/spconnect01
• Each piece of JavaScript can access approved APIs wldk.nl/spconnect04
• Setup API permissions without packages wldk.nl/spconnect05
• Additional configuration required for multi-tenant apps wldk.nl/spconnect06
• Isolated web parts wldk.nl/spconnect07
Takeaways

11. Waldek Mastykarz
Head of Product
SharePoint MVP
https://blog.mastykarz.nl
@waldekm

12. Secure. Modernize. Empower.