Active Directory access Azure Storage from browser

Question

I want to use Azure Active Directory to allow users to read and write to Azure storage (specifically all Blobs and Tables ) from a single-page web app.

I started like this:

import { InteractiveBrowserCredential } from '@azure/identity';
import { TableClient, TableServiceClient } from '@azure/data-tables';

const credentials = new InteractiveBrowserCredential({
  clientId: myAuthConfig.clientId,
  tenantId: myAuthConfig.tenantId,
});

const client = new TableServiceClient(
  `https://${myAuthConfig.storageAccountName}.table.core.windows.net`,
  credentials
);
client.listTables().byPage().next().then(console.log);

This works totally fine! I can see all the tables on the account. But then I wanted to list some of the data in on of the tables. So I did:

const client = new TableClient(
  `https://${myAuthConfig.storageAccountName}.table.core.windows.net`,
  '<table name>',
  credentials
);
client.listEntities().byPage().next().then(console.log);

But this gives an error:

{
  "odata.error": {
    "code":"AuthorizationPermissionMismatch",
    "message": {
      "lang":"en-US",
      "value":"This request is not authorized to perform this operation using this permission.\nRequestId:<uuid>\nTime:2021-10-28T18:04:00.0737419Z"
    }
  }
}

I'm very confused by this error. As far as I can tell I've done everything right. I followed every tutorial. I've set up active directory permissions for my app to use the storage API, my Microsoft account has permission to access the tables, OCRS is enabled, etc.

I'm not sure why I would have access to see a table but not see what's in it. I tried to use InteractiveBrowserCredential.authenticate to explicitly set scopes like this:

const scopes = ["User.Read"]

credentials.authenticate(scopes).then(console.log);

It works fine for User.Read but I couldn't figure out what scopes corresponded to Storage read/write access. If I added a scopy like "Microsoft.Storage" it told me that it didn't exist

Has anyone got an error like this before? What am I supposed to do here?

Answer 1

Thank you @gaurav mantri ,Posting your suggestion in comment as an answer.

From error it looks like your service principal does not have access permission to your table storage data. You should either grant permission using a RBAC role on the storage account resource (add to storage account contributors or readers) as below. Or use Storage Explorer to grant permission.

In your storage account please check, if you have Storage Table Data Contributer /Storage table data reader roles assigned as commented by @gaurav mantri

If not , you can add them go into your storage account > IAM > Add role assignment, and add the special permissions

If roles are already assigned , the issue might be due to storage account being protected by firewall. Please try configure in Firewall and virtual networks of your storage account to add an existing virtual network or create a new vnet.If there is no issue you may allow access from all networks.

References:

1. Authorize access to tables using Active Directory - Azure Storage | Microsoft Docs
2. Assign an Azure role for access to table data using powershell - Azure Storage | Microsoft Docs