How to connect to Azure Cognitive search from Angular application using managed identity

Question

How to connect to Azure Cognitive search from Angular application using managed identity

Debashis Jena 76

We have a angular UI application which is deployed in Azure app service. We want to connect to Azure cognitive search via managed identity from angular application.

Please suggest any procedure or documentation on how to connect to Azure search using managed identity.

1 answer

Your answer

Answer 1

Sedat SALMAN 14,180 MVP

First Set up managed identity for your Azure App Service:

https://learn.microsoft.com/en-us/azure/app-service/overview-managed-identity?tabs=portal%2Cdotnet

Grant the managed identity access to your Azure Cognitive Search service

Azure Cognitive Search > Access control (IAM) > Add role assignment > Cognitive Search Data Reader

You'll need a back-end service that can handle requests from your Angular application and interact with Azure Cognitive Search using managed identity. You can create a simple API using Node.js, ASP.NET, or any other back-end framework.
Use Azure Active Directory (Azure AD) to secure your back-end service

https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis

Implement search functionality in your back-end service. You can use REST API to interact with your search service

https://learn.microsoft.com/en-us/rest/api/searchservice/

Call your back-end service from the Angular application

Use HttpClient https://angular.io/guide/http and follow

https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-javascript-auth-code-angular

Debashis Jena 76

We are actually calling Azure Search service directly from Angular application using a POST call. Earlier we were using api-key, but now we are looking to get rid of storing api-key in the code and use managed identity access instead, for accessing it.
We tried the following:

import { ManagedIdentityCredential } from '@azure/identity'
const credential = new ManagedIdentityCredential();
const resourceUri = <resource-uri >;
const token = await credential.getToken(resourceUri);
const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  })
};
let data = this.http.post(`${resourceUri}/indexes/<index-name>/docs/search?api-version=<api-version>`, JSON.stringify({
  filter: <filter-option >}), options)

We have deployed application in Azure app service still we are getting this error:

MicrosoftTeams-image (10)

Debashis Jena 76 Reputation points

2023-05-09T09:07:51.3133333+00:00

Hi, we wanted to check if there is any method other than managed identity for secured connection, which can be used to replace the usage of api-keys in the application code. From our understanding so far, managed identity authentication is not supported from Angular code (browser), and generating access token in backend service and using that token in the UI is the only feasible approach. However this affects our performance and we are explicitly looking for some way to rid the use of API key from the Angular code. It would be great if you could suggest some other mechanism other than managed identity (if any) that can be used directly for authenticating to Search Service without having to rely on the backend code.

Share via

How to connect to Azure Cognitive search from Angular application using managed identity

1 answer

Your answer