Azure Key Vault without Azure Libraries in Playwright (Part 3)

This part of the tutorial assumes you have created an Azure Key Vault and App Registration. If not, please click the relevant links and complete those tutorials

To use Key Vault without importing azure libraries is a simple task. We’re using Playwright for this, however you could use any framework that supports sending and receiving API requests:

First thing we need to do is get the ClientId and ClientSecret from the App Registration in the Azure Portal:

ClientId is found in the Overview page, it is called ‘Application (client) ID’

ClientSecret is found in the ‘Certificates & secrets’ page. Note we need the ‘value’ not the ‘Secret ID’. If you’ve lost the value, don’t worry just create a new API permission, and keep a note of the value.

We also need the Key Vault URI, which will be displayed in the Overview page in the Azure Key Vault.

For this tutorial we’ll use: https://kv-yourkeys.vault.azure.net/

Now open you Playwright project. Create a new file called ‘keyvault.ts/js’. In this file, first we need to authenticate and get a Bearer Token:

    private async getBearer(page : Page, clientId : string, clientSecret: string)
    {
        const req = await page.request.post('https://login.microsoftonline.com/wintechnologies.onmicrosoft.com/oauth2/v2.0/token', 
        {
            headers:
            {
            "Content-Type": 'application/x-www-form-urlencoded'
            },
            form:
            {
                grant_type: "client_credentials",
                client_id: clientId,
                client_secret: clientSecret,
                scope: "https://vault.azure.net/.default",
            }
        })
        expect(req).toBeOK();
        const response = await req.json()
        return await response.access_token
    }

In the above code you’ll notice we’ve not used the Key Vault URI yet, the above code is just a Microsoft OAuth link, to get the Bearer token.

Then we need to incorporate the Bearer token in our Key Vault request (to obtain the secret value), so we’ll call the getBearer() method from our getSecret() method below.

async getSecret(page: Page, secretName: string,) {
  const clientId = xxxx;
  const clientSecret = xxx;
       
  const azure_bearer_token = await this.getBearer(page, clientId,clientSecret);
  try {
    const req  = await page.request.get(`https://kv-yourkeys.vault.azure.net/secrets/${secretName}?api-version=7.2`, 
    {
    headers: {
      "Content-Type": "application/json",
        Authorization: `Bearer ${azure_bearer_token}`,
    }})
    expect(req).toBeOK();
    const response = await req.json()
    return await response.value
  }
  catch (err) {
    console.error(`GET https://kv-yourkeys.vault.azure.net/secrets/${secretName}?api-version=7.2 failed :`, err);
    throw err;
  }
}

Here we’ve constructed the Key Vault URL, this URL contains:

1. Key Vault URI : https://kv-yourkeys.vault.azure.net/secrets
2. The secret name — in our example this is parametrised, however it could be hardcoded if you like, but is has to match the secret name in the Key Vault
3. The api version

So we eventually have something like this: `https://kv-yourkeys.vault.azure.net/secrets/${secretName}?api-version=7.2

Then we’re calling the getBearer() method to get Bearer token as mentioned before and we’ll pass it into the Authorization header.

We’re making sure the response is successful and then we’re converting the response to JSON and retrieving the value.

That’s all the code needed to retrieve the secret value. To put it into use, you’d can use it in a number of ways, I however call this method from a login method like so:

  const keyvaultHelper = new KeyvaultHelper();
  const kvPassword = await keyvaultHelper.getSecret(this.page, username);

  await this.userNameField.fill(username);
  await this.passwordField.fill(kvPassword);

You can notice from the above code, I created a class and put the Key Vault methods into that class, however you could use functions if you’d like.

Note: ideally you’d want to store the Client ID and Client Secret in environment variables, however I’ll leave that up to you.

Thanks for following, I hoped that helped.