This document discusses using the AadHttpClient to connect SharePoint Framework (SPFx) solutions to APIs secured with Azure Active Directory (Azure AD) without needing to handle authentication headaches. The AadHttpClient handles requesting and including access tokens in API calls automatically. Administrators configure which API permissions are available by setting permissions for a pre-provisioned Azure AD application. This allows SPFx solutions to connect to secured APIs seamlessly without having to specify reply URLs or handle multiple requests for tokens.

1. Connect SharePoint
Framework solutions to APIs
secured with Azure AD
Waldek Mastykarz | @waldekm
SharePoint Saturday Belgium 2018
#SPSBE

2. Platinum
Gold
Silver
SharePint
Community
Thanks to our sponsors!

3. Authentication is difficult

4. 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
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. 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
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. Connect to Azure AD-secured
APIs from SPFx
without headaches

9. 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. Takeaways
• Use the AadHttpClient class to access Azure AD-secured APIs wldk.nl/spsbe03
• Don’t pass web part context into React components wldk.nl/spsbe04
• Enable CORS for your API wldk.nl/spsbe05
• Setup API permissions in your tenant wldk.nl/spsbe03
• Each piece of JavaScript can access approved APIs wldk.nl/spsbe06
• Setup API permissions without packages wldk.nl/spsbe07
• Additional configuration required for multi-tenant apps wldk.nl/spsbe08

11. #SPSBE
http://spsbe.be
Please rate this session!

12. SharePoint Saturday Belgium 2018
#SPSBE