In English: This repo contains sample apps for my blog article Call Azure AD protected Functions from Single Page App.

Suomeksi: Repo sisältää esimerkkisovellukset blogiartikkeliini Azure AD suojattujen funktioiden kutsuminen Single Page – sovelluksista.

My simplified examples are originally based on MS MSAL.js 2.x Vanilla JavaScript Single-page Application

These examples show how to authenticate users in plain, vanilla javascript single page application. The credentials are then used to call Azure AD protected MS GraphAPI and your own Azure AD protected function.

The examples show how to configure MSAL.JS 2.x to login, logout, and acquire an access token for a protected resource such as Microsoft Graph API. This version of the MSAL.js library uses the Authorization Code flow w/ PKCE.

You need a web server (like apache, nginx or such) to place the html files to test the logins. This is because Azure AD authentication needs to be configured with a list of http(s) addresses where to go after login redirection.

Please see the blog article for more detailed explanations.

1. Configure your Azure Functions app to use Azure AD login. You'll "Expose an API" here for your SPA to use. Notice when you are creating the scope here: You'll need it both in the SPA app registration, and to copypaste it in the SPA source code.

Please see the blog article for more detailed explanations.

1. Register a new frontend application in the Azure Portal. Ensure that the application is enabled for the authorization code flow with PKCE. This will require that you redirect URI configured in the portal is of type SPA. You need to add uri for each of the samples like https://myserver.com/plainlogin, https://myserver.com/graphapi, https://myserver.com/functioncall.
2. Configure SPA app registration to "Use API"
3. Open the authConfig.js file and provide the required configuration values.

1. Configure authentication and authorization parameters:
   1. Open authConfig.js in each application you want to test.
   2. Replace the string "Enter_the_Application_Id_Here" with your app/client ID on AAD Portal.
   3. Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "https://login.microsoftonline.com/common/" (note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation).
   4. Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal.
2. Copy the files to your own web server, and make sure that paths match the registered redirect uris.
3. Start testing!

This sample demonstrates the following MSAL workflows:

• How to configure application parameters.
• How to sign-in with redirect method.
• How to sign-out.
• How to acquire an access token.
• How to make an API call with the access token.