How to securely use Azure Speech services in SPA app

Hello CiaranODonnell,

That is an excellent question and you are absolutely on the right track. Your instinct that you should not put API keys on the client is correct, and your proposed solution of using a backend service to generate and provide a short-lived token is the exact recommended security pattern for this scenario.

Exposing the subscription key in a Single Page Application (SPA) would allow anyone to copy it and use your Azure Speech resource, leading to unexpected costs and security risks. The token-based approach you described solves this perfectly.

Here is the step-by-step architecture for how to implement this securely:

1. Create a Secure Backend Endpoint (Your Token Provider)

You need to create a simple API on your backend that your Angular app can call. This endpoint will act as a broker, securely exchanging your long-term Speech API key for a short-lived token that is safe to use on the client.

Backend Workflow:

1. Create the Endpoint: Build a secure API endpoint, for example, /api/get-speech-token. This endpoint must require authentication, so only legitimate users of your application can request a token.

Secure Your Key: Your backend service should retrieve the Azure Speech subscription key from a secure location. Do not hardcode it. The best practice is to store it in Azure Key Vault and have your backend service (e.g., an Azure Function or App Service) access it using a Managed Identity.

Request the Token: From your backend code, make a POST request to the Azure Speech token issuance endpoint.

URL: https://<YOUR_REGION>.api.cognitive.microsoft.com/sts/v1.0/issueToken (replace <YOUR_REGION> with your Speech resource's region, e.g., eastus).

  **Header:** Include the **`Ocp-Apim-Subscription-Key`** header, setting its value to your Speech API key.
  
     **Body:** The POST request should have an empty body.
     
     **Return the Token:** The Speech service will return a plain text authorization token (a JWT). Your backend endpoint should then return this token string in the response to your Angular app. This token is typically valid for 10 minutes.
     

2. Configure the Speech SDK in Your Angular App

In your Angular application, you will now use this short-lived token to initialize the Speech SDK instead of the API key.

Frontend Workflow:

Fetch the Token: When you need to use the Speech service, your Angular app first makes an authenticated call to your /api/get-speech-token endpoint to retrieve the token.

Initialize SpeechConfig: Use the SpeechConfig.fromAuthorizationToken() method to configure the SDK. This is the key difference. Instead of using fromSubscription, you will use the token.

typescript
import

Your Question About Managed Identity

You asked if you could use a token from a Managed Identity directly on the client. The answer is no, but you were very close to the full picture. A Managed Identity is for server-to-server communication. The correct way it fits into this pattern is:

Your backend service (like an Azure Function) uses its Managed Identity to securely access the Speech API key from Azure Key Vault. This avoids storing the key in your code or configuration files.

This two-step process—using a Managed Identity to secure the key on the backend, which then issues a temporary token for the frontend—is the most robust and secure architecture for SPAs.

You have a great handle on the security implications. This approach will work perfectly.

Best regards,

Jerald Felix