Session Flow Diagram

Below is a Mermaid diagram illustrating the session flow between the user, the demo app, Azure API Management (APIM), and the Google Vision API endpoint:

sequenceDiagram
  participant User
  participant WebApp as Demo Web App
  participant APIM as Azure API Management
  participant GoogleVision as Google Vision API

  User->>WebApp: Upload image & specify APIM endpoint
  WebApp->>APIM: POST /vision (base64 image in JSON)
  APIM->>APIM: Inject Bearer token (from service account)
  APIM->>GoogleVision: Forward request with Bearer token
  GoogleVision-->>APIM: Response (text detection result)
  APIM-->>WebApp: Response (from Google Vision)
  WebApp-->>User: Show result/feedback

Loading

Simple Image Upload and Base64 Sender Web App

Overview

This is a simple Python Flask web application that allows users to upload an image, specify an HTTP endpoint, and send the image (encoded as base64) to that endpoint. The app displays the response from the endpoint in a readable format.

Features

• Upload an image file via a web interface
• Input a user-specified HTTP endpoint URL
• Encode the uploaded image as base64
• Send the base64-encoded image in a JSON payload to the specified endpoint
• Display the HTTP response (status and body) to the user

Demo Scenario: API Management and Google Vision

This app is designed as a demo to show how Azure API Management (APIM) can be used to host a 3rd party endpoint, such as Google Vision API. In this scenario:

• The user uploads an image and specifies the APIM endpoint (which proxies to Google Vision).
• APIM injects the required Bearer token for Google Vision, so the client does not need to handle authentication directly.
• This demonstrates how APIM can securely expose and manage access to 3rd party APIs.

Authentication Feature (To Be Added)

As an additional feature, this demo can be extended to require authentication before allowing access to the upload functionality. Options include:

• API Key: Require users to provide an API key as a header or query parameter, which APIM validates.
• Microsoft Authentication (Entra ID): Integrate Microsoft Entra ID (formerly Azure AD) authentication, so only authorized users can access the app via APIM.

How to Run

1. Ensure Python 3.7+ is installed.
2. (Optional) Create and activate a virtual environment:

   python -m venv venv
   .\venv\Scripts\activate
   

3. Install dependencies:

   pip install flask requests
   

4. Start the app:

   python app.py
   

5. Open your browser to http://127.0.0.1:5000/
6. Upload an image, enter the APIM endpoint (or any HTTP endpoint), and click "Send Image".

Example JSON Payload Sent

{
  "requests": [
    {
      "image": {
        "content": "BASE64_ENCODED_IMAGE"
      },
      "features": [
        {
          "type": "TEXT_DETECTION"
        }
      ]
    }
  ]
}

How to Configure Azure APIM to Inject Google Vision Bearer Token

To securely call the Google Vision API through Azure API Management, you need to configure APIM to generate a Bearer token using a Google service account file. Follow these steps (adapted from Google’s official guide):

1. Obtain a Google Service Account JSON File

• In the Google Cloud Console, create or select a service account with the required permissions for Vision API.
• Download the service account JSON key file.

2. Store the Service Account in Azure APIM

• In the Azure Portal, go to your APIM instance.
• Navigate to Named values and add a new named value (e.g., google-vision-service-account) to securely store the contents of your service account JSON file.

3. Add a Policy to Generate the Bearer Token

• In your APIM API, go to the Inbound processing policy.
• Add a policy to:
  • Read the service account JSON from the named value.
  • Generate a JWT assertion and exchange it for an access token as described in the Google documentation.
  • Set the Authorization header with the Bearer token for outbound requests.

Example Policy Snippet

    <inbound>
        <base />
        <!-- Set header from named values in the APIM setting -->
        <set-header name="Authorization" exists-action="override">
            <value>Bearer {{MyBearerToken}}}</value>
        </set-header>
    </inbound>

For a full working example, see the Google Vision API authentication guide and Azure APIM documentation on Named values.

4. Test the Integration

• Use this demo app to send a request to your APIM endpoint.
• APIM will inject the Bearer token and forward the request to Google Vision.

Notes

• This app does not store images or user data.
• For production use, add authentication and HTTPS.
• To test with Google Vision, set up APIM to proxy requests and inject the Bearer token as described above.

---

For questions or improvements, please contact the maintainer.