SlideShare a Scribd company logo
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azure AD - Waldek Mastykarz
Connect SharePoint Framework solutions to APIs
secured with Azure AD
Authenticationisdifficult
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?
AadHttpClient 👍
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?
It.Just.Works.
rencore.com
Connect to Azure AD-secured
APIs from SPFx without
headaches
Demo
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
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
Waldek Mastykarz
Head of Product
SharePoint MVP
https://blog.mastykarz.nl
@waldekm
Secure. Modernize. Empower.
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azure AD - Waldek Mastykarz

More Related Content

PDF
O365Con18 - Introduction to Azure Web Applications - Eric Shupps
PDF
O365Con18 - Azure AD Connect Inside and Out - Sander Berkouwer
PDF
SPUnite17 Who Are You and What Do You Want
PDF
SPUnite17 Introduction to Azure Web Applications
PPTX
Azure functions serverless
PPTX
Building a document e-signing workflow with Azure Durable Functions
PPTX
Azure Web Apps Advanced Security
PPTX
ECS 2018: Introduction to Azure Web Applications
O365Con18 - Introduction to Azure Web Applications - Eric Shupps
O365Con18 - Azure AD Connect Inside and Out - Sander Berkouwer
SPUnite17 Who Are You and What Do You Want
SPUnite17 Introduction to Azure Web Applications
Azure functions serverless
Building a document e-signing workflow with Azure Durable Functions
Azure Web Apps Advanced Security
ECS 2018: Introduction to Azure Web Applications

What's hot (20)

PPTX
Creating Cloud-Ready Enterprise Applications with the SharePoint 2013 Add-In ...
PPTX
Windows azure active directory
PPTX
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
PPTX
Microsoft Reactor Toronto 5/5/2020 | Azure Kubernetes In Action - Running and...
PPTX
Introduction to Azure Web Applications for Office and SharePoint Developers
PPTX
Windows Azure Active Directory
PPTX
Azure staticwebapps
PDF
SPTECHCON - Who are You and What Do You Want - Working with OAuth in SharePoi...
PPTX
Azure App Service Deep Dive
PPTX
Integrating your on-premises Active Directory with Azure and Office 365
PPTX
Building Apps for SharePoint 2013 by Andrew Connell - SPTechCon
PPTX
Building Push Triggers for Logic Apps
PPTX
Identity and o365 on Azure
PPTX
AAD with MVC App
PPTX
Securing SharePoint Apps with OAuth
PDF
O365Con18 - PowerApps build custom forms for SharePoint with Azure Maps - Bra...
PPTX
SharePoint and Office Development Workshop
PPTX
Logic apps and PowerApps - Integrate across your APIs
PPTX
Deep Dive Mobile Development with Office 365
PPTX
Azure Bot Service
Creating Cloud-Ready Enterprise Applications with the SharePoint 2013 Add-In ...
Windows azure active directory
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
Microsoft Reactor Toronto 5/5/2020 | Azure Kubernetes In Action - Running and...
Introduction to Azure Web Applications for Office and SharePoint Developers
Windows Azure Active Directory
Azure staticwebapps
SPTECHCON - Who are You and What Do You Want - Working with OAuth in SharePoi...
Azure App Service Deep Dive
Integrating your on-premises Active Directory with Azure and Office 365
Building Apps for SharePoint 2013 by Andrew Connell - SPTechCon
Building Push Triggers for Logic Apps
Identity and o365 on Azure
AAD with MVC App
Securing SharePoint Apps with OAuth
O365Con18 - PowerApps build custom forms for SharePoint with Azure Maps - Bra...
SharePoint and Office Development Workshop
Logic apps and PowerApps - Integrate across your APIs
Deep Dive Mobile Development with Office 365
Azure Bot Service
Ad

Similar to O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azure AD - Waldek Mastykarz (20)

PPTX
Connect SharePoint Framework solutions to APIs secured with Azure AD
PPTX
Developing Apps with Azure AD
PDF
Colloquim Report - Rotto Link Web Crawler
PDF
BlueHat Seattle 2019 || I'm in your cloud: A year of hacking Azure AD
PDF
Creating cloud ready enterprise applications with the sharepoint 2013 app model
PPTX
Azure API Apps
PDF
Identity Days 2020 - Quelles sont les méthodes et le niveau de sécurisation/r...
PDF
Why your next serverless project should use AWS AppSync
PPTX
SharePoint as Development Platform for the Modern Intranet
PDF
Come riprogettare le attuali farm solution di share point con il nuovo modell...
PDF
O365Con18 - Hybrid SharePoint Deep Dive - Thomas Vochten
PDF
24032022 Zero Trust for Developers Pub.pdf
PPTX
Understanding SharePoint Apps, authentication and authorization infrastructur...
PPTX
harePoint Framework Webinar Series: Consume Graph APIs in SharePoint Framework
PPTX
2014 SharePoint Saturday Melbourne Apps or not to Apps
PPTX
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
PPTX
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
PPTX
Tutorial: Building Apps for SharePoint 2013 Inside and Outside of the Firewal...
PPTX
Azure AD App Proxy Login Scenarios with an On Premises Applications - TSPUG
PPTX
App Model For SharePoint 2013
Connect SharePoint Framework solutions to APIs secured with Azure AD
Developing Apps with Azure AD
Colloquim Report - Rotto Link Web Crawler
BlueHat Seattle 2019 || I'm in your cloud: A year of hacking Azure AD
Creating cloud ready enterprise applications with the sharepoint 2013 app model
Azure API Apps
Identity Days 2020 - Quelles sont les méthodes et le niveau de sécurisation/r...
Why your next serverless project should use AWS AppSync
SharePoint as Development Platform for the Modern Intranet
Come riprogettare le attuali farm solution di share point con il nuovo modell...
O365Con18 - Hybrid SharePoint Deep Dive - Thomas Vochten
24032022 Zero Trust for Developers Pub.pdf
Understanding SharePoint Apps, authentication and authorization infrastructur...
harePoint Framework Webinar Series: Consume Graph APIs in SharePoint Framework
2014 SharePoint Saturday Melbourne Apps or not to Apps
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Tutorial: Building Apps for SharePoint 2013 Inside and Outside of the Firewal...
Azure AD App Proxy Login Scenarios with an On Premises Applications - TSPUG
App Model For SharePoint 2013
Ad

More from NCCOMMS (20)

PDF
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
PDF
O365Con19 - Model-driven Apps or Canvas Apps? - Rick Bakker
PDF
O365Con19 - Office 365 Groups Surviving the Real World - Jasper Oosterveld
PDF
O365Con19 - Developing Timerjob and Eventhandler Equivalents - Adis Jugo
PDF
O365Con19 - Sharepoint with (Artificial) Intelligence - Adis Jugo
PDF
O365Con19 - What Do You Mean 90 days Isn't Enough - Paul Hunt
PDF
O365Con19 - Tips and Tricks for Complex Migrations to SharePoint Online - And...
PDF
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
PDF
O365Con19 - Start Your Journey from Skype for Business to Teams - Sasja Beere...
PDF
O365Con19 - Lets Get Started with Azure Container Instances - Jussi Roine
PDF
O365Con19 - Azure Blackbelt - Jussi Roine
PDF
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
PDF
O365Con19 - Be The Protagonist of Your Modern Workplace - Corinna Lins
PDF
O365Con19 - How to Really Manage all your Tasks Across Microsoft 365 - Luise ...
PDF
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
PDF
O365Con19 - Things I've Learned While Building a Product on SharePoint Modern...
PDF
O365Con19 - Keep Control of Your Data with AIP and CA - Bram de Jager
PDF
O365Con19 - Kaizala a Dive Into the Unknown - Rick van Rousselt
PDF
O365Con19 - How to Inspire Users to Unstick from Email - Luise Freese
PDF
O365Con19 - O365 Identity Management and The Golden Config - Chris Goosen
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - Model-driven Apps or Canvas Apps? - Rick Bakker
O365Con19 - Office 365 Groups Surviving the Real World - Jasper Oosterveld
O365Con19 - Developing Timerjob and Eventhandler Equivalents - Adis Jugo
O365Con19 - Sharepoint with (Artificial) Intelligence - Adis Jugo
O365Con19 - What Do You Mean 90 days Isn't Enough - Paul Hunt
O365Con19 - Tips and Tricks for Complex Migrations to SharePoint Online - And...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Your Journey from Skype for Business to Teams - Sasja Beere...
O365Con19 - Lets Get Started with Azure Container Instances - Jussi Roine
O365Con19 - Azure Blackbelt - Jussi Roine
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Be The Protagonist of Your Modern Workplace - Corinna Lins
O365Con19 - How to Really Manage all your Tasks Across Microsoft 365 - Luise ...
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
O365Con19 - Things I've Learned While Building a Product on SharePoint Modern...
O365Con19 - Keep Control of Your Data with AIP and CA - Bram de Jager
O365Con19 - Kaizala a Dive Into the Unknown - Rick van Rousselt
O365Con19 - How to Inspire Users to Unstick from Email - Luise Freese
O365Con19 - O365 Identity Management and The Golden Config - Chris Goosen

Recently uploaded (20)

PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
sap open course for s4hana steps from ECC to s4
PPTX
Cloud computing and distributed systems.
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Machine learning based COVID-19 study performance prediction
PDF
KodekX | Application Modernization Development
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Empathic Computing: Creating Shared Understanding
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
Spectroscopy.pptx food analysis technology
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Unlocking AI with Model Context Protocol (MCP)
sap open course for s4hana steps from ECC to s4
Cloud computing and distributed systems.
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Machine learning based COVID-19 study performance prediction
KodekX | Application Modernization Development
NewMind AI Weekly Chronicles - August'25 Week I
Empathic Computing: Creating Shared Understanding
Agricultural_Statistics_at_a_Glance_2022_0.pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
Reach Out and Touch Someone: Haptics and Empathic Computing
Network Security Unit 5.pdf for BCA BBA.
Programs and apps: productivity, graphics, security and other tools
20250228 LYD VKU AI Blended-Learning.pptx
Spectroscopy.pptx food analysis technology
Digital-Transformation-Roadmap-for-Companies.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf

O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azure AD - Waldek Mastykarz

  • 2. Connect SharePoint Framework solutions to APIs secured with Azure AD
  • 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?
  • 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?
  • 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