How to automate fetching ocp-apim-subscription-key from Azure API Management (APIM) and store it in Angular typescript source code?

Siegfried Heintze 1,861 Reputation points
2022-10-30T17:23:55.177+00:00

Background:

I'm trying to automate the deployment of my Angular Azure Static Web, APIM & Function App with Github workflows and Bicep.

I learned here (where-to-find-my-ocp-apim-subscription-key-in-windows-azure) that I can fetch my ocp-apim-subscription-key from my APIM and use this ocp-apim-subscription-key to call my function app.

I assume that his is a very good idea because the alternative is to publish the Azure App Function key in the javascript source code which would bypass APIM.

I'm wondering if it is safe to store my in typescript/javascript source code as I queried here: how-to-use-visual-studio-to-deploy-azure-api-manag.html. Until I get a response, I will assume that it safe to store ocp-apim-subscription-key (but not azure function keys) in my browser resident source code.

Questions:

  1. How do I automate fetching this ocp-apim-subscription-key from APIM? Bicep? Github Workflow?
  2. How do I automate storing this in my angular typescript (javascript) source code? Bicep? Github workflow?

I have posted a related question here: how-to-automate-deployment-of-angular-azure-static.html.

Azure API Management
Azure API Management
An Azure service that provides a hybrid, multi-cloud management platform for APIs.
1,851 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Siegfried Heintze 1,861 Reputation points
    2022-11-13T01:02:54.047+00:00

    Thank you MikeUrnum & MuthuKumaranMurugaachari.

    I just discovered that the underlying premise of my question was false. Having a ocp-apim-subscription-key to guard my APIM API is an option, not a requirement.

    So obviously you only request a subscription & subscription key if you don't want to make it available to the general public so there is no need to store the ocp-apim-subscription-key in the source code. Instead, just to click the check box for a subscription...

    I apologize for the confusion.

    Now Mike does raise an interesting point!

    Let's assume bing.com is implemented with a static web site with AJAX calls to azure function apps.

    Such a site would have to abandon the ocp-apim-subscription-key feature if you wanted everyone to use it!

    Could APIM provide sufficient protection to make such an implementation feasible (safe)?

    I think this should be the subject of a different post and I'm going to mark this post answered.

    Siegfried

    2 people found this answer helpful.

  2. MuthuKumaranMurugaachari-MSFT 22,256 Reputation points
    2022-11-01T15:32:56+00:00

    @Siegfried Heintze Thank you for reaching out to Microsoft Q&A. As described in other thread, you can set up GitHub actions and use CLI, PowerShell or REST API commands for automating the tasks/actions.

    I hope these answers help with your questions and feel free to add a comment if you have any other questions. We would be happy to assist you. Please 'Accept as answer' and ‘Upvote’ if it helped so that it can help others in the community.