Azure AD for browser-based application developers
Download as PPTX, PDF1 like200 views
The document serves as a comprehensive troubleshooting checklist for securely handling API keys and integrating with Azure services like Azure Active Directory and Microsoft Graph API. It outlines key concepts, common confusions, and various authentication flows, along with best practices for app registration and permission settings. Additionally, it provides links to sample code and documentation to assist users in understanding and implementing these services effectively.
Azure AD for browser-based application developers
- 2. Agenda Troubleshooting Checklist Securely handling API Keys âąAzure Cognitive Services âąAzure Function Proxy âąâEasy authâ Registering and coding a Single Page Application âąSimple JavaScript/jQuery calls MS Graph API âąTypeScript and React calls MS Graph API Azure AD Concepts âąVersion confusion âąSubscription confusion âąTerminology confusion âąPermission confusion
- 3. Azure ACS Azure AD v1 Endpoint Azure AD v2 Endpoint Azure AD B2C Federation with âsocialâ accounts (Google, Facebook, Microsoft, etc) Azure AD only âUnifiedâ Azure AD + Microsoft accounts Federation with âsocialâ accounts (Google, Facebook, Microsoft, etc) Static consent model Static consent model Dynamic consent model Static consent, admins only Program with ADAL Program with MSAL Program with MSAL Deprecated â will be turned off November 2018* Easy to write your own services Limitations when building your own services Highly scalable Highly customizable No âon behalf ofâ flow Register in Azure Service Bus (or in SharePoint for add-ins and S2S) Register in Azure Portal, PowerShell etc. New app registration portal Azure Portal B2C Apps can be single or multi-tenant All apps are multi-tenant (for now)
- 4. ï On-premises AD federation ï Multi-factor authentication ï B2B federation Azure subscriptions Office365 Your apps Multi-tenant partner apps Daemon applications Web browsers Native applications Application gallery Synchronise users from your AD DS ï Consent model ï Conditional access ï Self-service password, group mgmt
- 5. Azure AD Key Concepts App Registration âą Application ID â uniquely identifies an app âą App Secret â effectively the password for app âservice accountâ; not used w/implicit flow âą Redirect URI â used to direct responses back to your app âą More depending on the flow you plan to use Resources â e.g. https://graph.windows.net or your appâs GUID â These are apps secured with Azure AD - not to be confused with ARM resources Scopes â e.g. Directory.Read These are permissions that are specific to each resource
- 7. âą Unique identifier for an instance of Azure ADTenant ID, Directory ID âą Unique identifier for an application App ID, Application ID, Client ID âą Password used to authenticate the application App Secret, App Key, Client Secret âą App registration applied to a service, possibly in another tenant Enterprise Application, Service Principal
- 9. App type Who can consent Effective Permissions Delegated Permissions (Get access on behalf of users) App Permissions (Get access as a service) Mobile, Web and Single page app Service and Daemon Elevate permissions Users can consent for their data Admin can consent for them or for all users Only admin can consent App permissions User permissions App permissions Application permissionDelegated permission (user permission)
- 10. OAuth 2.0 When calling from Use this flow Permission Browser ï Web service Implicit Flow User ï Web service ï Web service On-Behalf-Of Flow User Daemon or Web Service ï Web Service Client Credentials Flow App Native application ï Web Service Authorization Code Flow (client obtains auth code then access token; SSO scenarios; client does not handle user passwords) or User Credentials Flow (client passes username and password) User
- 11. OAuth 2.0 Implicit Flow Browser Apps
- 14. The Challenge API keys in the browser can be stolen by anyone using the browserâs built- in developer tools
- 15. Azure Function Proxies âą Light-weight API management âą Change URL, manipulate request and response âą Inherits the configuration of your Function App â including âEasyAuthâ
- 18. Troubleshooting Checklist 1. Does it work in Postman? NOTE: Postmanâs client credential flow does not work with Azure AD; make the call manually! 2. Is the App ID correct? 3. Is the App Secret correct? Expired? Did you recently make a major change to the App registration that might invalidate the App Secret? 4. Are permissions correct? Are you using the right kind of permission (App permissions for client credentials flow; Delegated for everything else!) 5. Have you pressed the âGrantâ button to grant permission? 6. In your Auth URL are you referencing the right resource (the one you plan to access?) 7. Are you using Implicit flow, and if so, is allowImplicitFlow set in the app manifest?
- 19. Resourcesï Sample code https://link.bobg.tv/ImplicitFlow ï â30 Days Graphâ with article explaining sample code https://link.bobg.tv/30DaysGraph ï Azure AD Documentation https://link.bobg.tv/AAD-Docs ï Microsoft Graph Explorer https://link.bobg.tv/MSGraphExplorer ï Extending SharePoint with ADAL and MS Graph API (Julie Turner) https://link.bobg.tv/SPADAL ï Call MS Graph API tutorial (SPA) https://link.bobg.tv/JSMSAL
Editor's Notes
- #2: You can build amazing user experiences with modern web technology, but to make it useful you almost always need to call web services. Many of these services, such as the Microsoft Graph and custom Web APIs, require an Azure AD access token. That sounds easy, but it's often very confusing to developers who are new to it. Other web services need only an API key, which is easily stolen by anyone who knows how to use the browser's developer tools. In this session you'll learn the essentials for using Azure AD from your browser-based code. You'll learn about the different Azure AD endpoints - a point of confusion for sure - and when to use them. Then for each one, you'll learn how to register your client application and how to get that all important access token. As a bonus, you'll learn how to create your own Azure AD secured services and use an Azure Function Proxy to hide API keys for other services so they use Azure AD instead of an easily copied key value. Don't miss this quick, practical session that will get you consuming Azure AD web services in no time! DEMO SETUP: - VS Code - http-server - chrome â localhost:8080 - firefox â Azure portal - Postman
- #4: âThere is nothing permanent except changeâ â Heraclitus
- #8: âThe beginning of wisdom is the definition of termsâ â Plato âA rose by any other name would smell as sweetâ â Shakespeare
- #11: Microsoft Build 2017
- #12: Most useful in SharePoint: - Implicit flow on web pages - Client credentials flow for background jobs or elevating privileges in a web service
- #14: Microsoft graph began with people in the directory. People, groups, and relationships (e.g. a manager, a group member) Then content like files Then conversations in Skype 4 Biz, email, teams, online meetings; even conversations in Word comments Then insights gathered by learning from all that information
- #15: Demo the site V1 and V2 registrations â show: - permissions - implicit flow - reply URLs Code walk-through
- #19: Postman - Show API key Azure portal - function app - Show proxy - Show easy auth Postman - Show AAD auth