Securing AI Apps on Azure Date Topic Speakers July 2 5-6PM UTC Using Keyless Auth with Azure AI Services Marlene Mhangami Pamela Fox July 8 5-6PM UTC Add User Login to AI Apps using Built-in Auth James Casey Pamela Fox July 9 7-8PM UTC Add User Login to AI Apps using MSAL SDK Ray Luo Pamela Fox July 10 7-8PM UTC Handling User Auth for a SPA App on Azure Matt Gotteiner July 17 7-8PM UTC Data Access Control for AI RAG Apps on Azure Matt Gotteiner Pamela Fox July 25 11PM-12PM Deploying an AI App to a Private Network on Azure Matt Gotteiner Anthony Shaw https://aka.ms/S-1355

Securing AI Apps on Azure: Handling User Auth for a SPA App on Azure Matthew Gotteiner, Azure AI Search aka.ms/securing-spa-slides

Demo: A SPA app with user auth

What is a Single Page Application (SPA)? • Simple to create • Great for read-only experiences • Every page has a separate URL by default • Doesn't necessarily require Javascript Traditional Web Application Single Page Application • More setup is required • Rich and customizable user interface • The application backend exposes an API • Requires Javascript to call API

https://aka.ms/azai/rbac/code A SPA app with user authentication WITH AUTOMATION!

Identity and Access Management: A Primer

What is Identity and Access Management? Ensures the right user gets access to the right resource

How do Authentication and Authorization Work? Authenticate users through the Open ID Connect protocol (OIDC) Authorize users using OAuth 2.0 protocol Terminology: Auth Flow ▪ Authentication / Authorization Exchange Authorization Server ▪ Issues tokens for apps to access protected resources Client ▪ App requesting access to a protected resource Token ▪ Allow a client to access a protected resource Resource Owner ▪ Owns protected resource client is trying to access Resource Server ▪ Provides access to protected data

Token types Access token • Issued by an authorization server as part of an OAuth 2.0 flow. Can be used to access web APIs and other protected resources. ID Token • Issued as part of OpenID Connect flow. Used by the client to identify the user. Shouldn’t be used to access web APIs.

Access Token • Commonly a JSON blob that contains claims about the subject • Resource API needs to validate these claims, make authorization decisions based on these claims and potentially other information • It is passed to the API inside request headers "Accept": "application/json, text/plain, */*​ " "Accept-Encoding": "gzip,deflate,sdch​ " "Accept-Language": "en-GB, en;g=0,8,en- US;0=6,de;g=0,4​ " "Authorization": "bearer EyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1hiIsImtpZ CI6InU0T2ZORlBId0VCb3NIanRy...​ " "Cache-Control": "no-cache​ " "Connection": "keep-alive​ " "Host": "localhost:8080"​ "..." Request Headers

Access Token Claims "aud": "416684a7-0b52-4fa3-9918-e76d16542be2", "iss": "https://login.microsoftonline.com/c72a295d-d7a5-41ea-a351-b15dd9f67215/v2.0", "iat": 1563883336, "nbf": 1563883336, "exp": 1563887236, "azp": "bb764c21-49b8-49de-aa24-6c76d7dc800f", "oid": "0e748cd0-5d2a-4918-a351-9549e75fd1dd", "scp": "Catalog.View.Published", "roles": "Catalog.View", "wids": "9c6df0f2-1e7c-4dc3-b195-66dfbd24aa8f", "sub": "0X7PvET4orHRnRYndMvA4CYlYxg_CowsE1BGTIAK6hE", "tid": "c72a295d-d7a5-41ea-a351-b15dd9f67215", "preferred_username": [email protected], "email": [email protected]", "name": "Jane Bowen", Key: Authentication: know the subject Authorization: should subject have access Display-only https://learn.microsoft.com/entra/identity-platform/access-token-claims-reference

How do clients access resources? Two types of access: Delegated and App-only

What kinds of clients are there? Confidential Client Application Clients capable of maintaining the confidentiality of their credentials (e.g., client implemented/deployed on a secure server with restricted access to the client credentials) Public Client Application Clients incapable of maintaining the confidentiality of their credentials. e.g., clients executing on the device used by the resource owner, such as an installed native application (desktop apps, mobile apps) or a web browser-based application (SPA), and even apps that run on devices without a browser. Note: • Both confidential and public clients can sign in users and/or acquire access tokens.

Configuring user authentication with Microsoft Entra

SPA Frontend Entra SPA Application SPA Backend Entra Backend Application Azure OpenAI Azure AI Search Architecture for SPA App with user authentication

Registering with the Microsoft identity platform To request tokens from the Microsoft identity platform, you need to register a Microsoft Entra application and create a service principal for it. Microsoft Entra Application Object Microsoft Graph Service Principal Microsoft identity platform

Registering Client Entra application with Graph SDK graph_client = GraphServiceClient(credentials=credential, scopes=scopes) graph_client.applications.post(Application( display_name=f"Azure Search OpenAI Client App {identifier}", sign_in_audience="AzureADMyOrg", web=WebApplication( redirect_uris=["http://localhost:50505/.auth/login/aad/callback"], implicit_grant_settings=ImplicitGrantSettings(enable_id_token_issuance=True)), spa=SpaApplication(redirect_uris=["http://localhost:50505/redirect", "http://localhost:5173/redirect"]), required_resource_access=[ RequiredResourceAccess( resource_app_id=server_app_id, resource_access=[ ResourceAccess(id=server_app.api.oauth2_permission_scopes[0].id, type="Scope])]), RequiredResourceAccess( resource_app_id="00000003-0000-0000-c000-000000000000", resource_access=[ ResourceAccess(id="e1fe6dd8-ba31-4d61-89e7-88639da4683d", type="Scope") # Graph User.Read ])])) The client application requires access to the server application auth_init.py

Registering Server Entra application with Graph SDK graph_client = GraphServiceClient(credentials=credential, scopes=scopes) graph_client.applications.post(Application( api=ApiApplication( oauth2_permission_scopes=[PermissionScope( id="7b207263-0c4a-4127-a6fe-38ea8c8cd1a7", user_consent_display_name="Access Azure Search OpenAI Chat API", user_consent_description="Allow the app to access Azure Search OpenAI Chat API on your behalf", value="access_as_user", type="User")]), required_resource_access=[RequiredResourceAccess( resource_app_id="00000003-0000-0000-c000-000000000000", resource_access=[ ResourceAccess(id="e1fe6dd8-ba31-4d61-89e7-88639da4683d", type="Scope"), # Graph User.Read ])], identifier_uris=[f"api://{server_app_id}"])) The server application defines its own permission scopes: auth_init.py

Setting Entra application credentials with Graph SDK request_password = AddPasswordPostRequestBody( password_credential=PasswordCredential(display_name="WebAppSecret"), ) graph_client.applications.by_application_id(app_id) .add_password.post(request_password) Currently, app registrations can use either password or certificate credentials. In the future, they can use a managed identity as a federated identity credential! auth_init.py

Implementing the authentication flow Option 1: For auth on Azure App Service or Container Apps Option 2: For auth on any host (including local) Use MSAL packages to orchestrate OIDC flow using app registration Configure built-in authentication and authorization with Microsoft identity platform as the provider

Using MSAL SDKs for authentication flows

OAuth2 authentication flow with OIDC App backend Microsoft Entra servers Browser OAuth2 Leg 1 Initiate the authorization code flow User Signs in Returns redirect to redirectURI OAuth2 Leg 2 Exchange authorization code for token Returns redirect to URI Visits webapp Returns access token Return authorized results and ID token User has not signed in

Architecture for SPA App

Using MSAL.JS Create a public client application and initialize it with your client ID. Then call the correct methods to either fetch a cached token or acquire one using an interactive flow. const msalConfig = { auth: { clientId: "your_client_id", redirectUri: "https://contoso.com" } }; const msalInstance = new PublicClientApplication(msalConfig); await msalInstance.initialize(); msalInstance.acquireTokenSilent({ scopes: ["User.Read"] }) .then(tokenResponse => { ... }) .catch(async (error) => { if (error instanceof InteractionRequiredAuthError) { return msalInstance.acquireTokenPopup(request); } ... LEG 1 LEG 2

Using the Python MSAL SDK for authentication flows app = msal.ConfidentialClientApplication( os.getenv("CLIENT_ID"), client_credential=os.getenv("CLIENT_SECRET"), authority=f"https://login.microsoftonline.com/{os.getenv('TENANT_ID')}", ) flow = app.initiate_auth_code_flow(scopes, redirect_uri=redirect_uri) # Redirect the user to the URI returned by that function ^ ... result = app.acquire_token_by_auth_code_flow(auth_flow, auth_response) access_token = result["access_token"] Configure the client ID and client credentials according to what your provisioned, then call the correct methods to generate the correct authentication URI and exchange the authorization code for a token. LEG 1 LEG 2

Configuration of Cross-Origin Resource Sharing (CORS) Both the App Services instance and the Quart app need to have the correct CORS settings to support alternative frontends. // Bicep Template resource appService 'Microsoft.Web/sites@2022-03-01' = { properties: { siteConfig: { cors: { allowedOrigins: [ 'https://www.contoso.com' ] } } } ... # Python app = Quart("app") cors(app, allow_origin=["https://www.contoso.com"], allow_methods=["GET", "POST"])

Next steps

Try our samples and learn more! Azure OpenAI + AI Search + Entra + MSAL + App Service Built-in Auth aka.ms/ragchat Find more samples at: aka.ms/azai Java JavaScript Python .NET OpenAI Assistants Fine-tuning ...and more! Access Control in Generative AI applications with Azure AI Search aka.ms/rag-access-control Microsoft Entra developer center aka.ms/dev/ms-entra

Securing AI Apps on Azure Date Topic Speakers July 2 5-6PM UTC Using Keyless Auth with Azure AI Services Marlene Mhangami Pamela Fox July 8 5-6PM UTC Add User Login to AI Apps using Built-in Auth James Casey Pamela Fox July 9 7-8PM UTC Add User Login to AI Apps using MSAL SDK Ray Luo Pamela Fox July 10 7-8PM UTC Handling User Auth for a SPA App on Azure Matt Gotteiner July 17 7-8PM UTC Data Access Control for AI RAG Apps on Azure Matt Gotteiner Pamela Fox July 25 11PM-12PM Deploying an AI App to a Private Network on Azure Matt Gotteiner Anthony Shaw https://aka.ms/S-1355