Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Demo: A SPA app with user auth

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Identity and Access Management: A Primer

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Configuring user authentication with Microsoft Entra

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Using MSAL SDKs for authentication flows

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Architecture for SPA App

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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"])

Slide 27

Slide 27 text

Next steps

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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