How to obtain an access token to call Azure AD secured web API's, such as the Microsoft Graph, from a single page application

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

12. Microsoft Graph
Groups
People
Conversations
Files
Insights

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”

16. functions proxies

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