Connecting Bubble to Microsoft Azure uses the API Connector with Azure API keys or OAuth2 for Active Directory. Common integrations include Azure Blob Storage for files, Cognitive Services for AI features, and Azure AD for enterprise authentication. This tutorial covers the API Connector setup for Azure's most useful services.
Overview: Integrating Microsoft Azure with Bubble
Azure offers enterprise cloud services that extend Bubble's capabilities. This tutorial covers connecting to Azure's most relevant services for Bubble apps: Blob Storage for files, Cognitive Services for AI-powered features like text analysis and image recognition, and Azure Active Directory for enterprise single sign-on.
Prerequisites
- A Microsoft Azure account with an active subscription
- API keys for the Azure services you want to use
- The API Connector plugin installed in Bubble
- Basic understanding of REST APIs
Step-by-step guide
Get your Azure API keys and endpoints
Get your Azure API keys and endpoints
Log in to portal.azure.com. Navigate to the service you want to integrate (e.g., Cognitive Services, Blob Storage). In the service's resource page, go to Keys and Endpoint. Copy the endpoint URL and one of the API keys. For Blob Storage, you also need the storage account name and access key from the Access Keys section.
Expected result: You have the API endpoint and authentication key for your Azure service.
Configure the API Connector for Azure Cognitive Services
Configure the API Connector for Azure Cognitive Services
In Bubble, go to Plugins → API Connector. Add a new API named Azure Cognitive Services. Set Authentication to None (you will pass the key in headers). Add a shared header: Ocp-Apim-Subscription-Key with your Azure API key (mark as Private). Create an API call for text analysis: POST to https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/sentiment with a JSON body containing your text.
1{2 "documents": [3 {4 "id": "1",5 "language": "en",6 "text": "This product is amazing and I love using it every day!"7 }8 ]9}Pro tip: Mark the API key header as Private in the API Connector so it is never sent to the browser.
Expected result: The API call returns sentiment analysis results from Azure Cognitive Services.
Set up Azure Blob Storage for file upload
Set up Azure Blob Storage for file upload
For Blob Storage, the approach is similar to AWS S3 — use Shared Access Signatures (SAS) tokens to generate temporary upload URLs. Create an Azure Function that generates SAS tokens, or use the REST API directly with the storage account key. The API call pattern: PUT https://{account}.blob.core.windows.net/{container}/{blob}?{SAS_token} with the file content as the body.
Expected result: Files from your Bubble app are uploaded to Azure Blob Storage.
Integrate Azure AD for enterprise authentication
Integrate Azure AD for enterprise authentication
For enterprise single sign-on, configure the API Connector with OAuth2 User-Agent Flow. Set the authorization URL to https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize and the token URL to https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/token. Set the scope to openid profile email. Register your Bubble app in Azure AD's App registrations with the redirect URI.
Expected result: Enterprise users can log in to your Bubble app using their Azure AD credentials.
Display Azure data in your Bubble app
Display Azure data in your Bubble app
Once API calls are configured and initialized, use them as data sources in Repeating Groups (for Data type calls) or as actions in workflows (for Action type calls). For example, display Cognitive Services results in Text elements, show Blob Storage file lists in Repeating Groups, or trigger analysis on button clicks.
Expected result: Azure service data is displayed and used throughout your Bubble app.
Complete working example
1{2 "api_name": "Azure Cognitive Services",3 "authentication": "None (key in header)",4 "shared_headers": {5 "Ocp-Apim-Subscription-Key": "YOUR_AZURE_KEY (Private)",6 "Content-Type": "application/json"7 },8 "calls": [9 {10 "name": "Analyze Sentiment",11 "type": "Action",12 "method": "POST",13 "url": "https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/sentiment",14 "body": {15 "documents": [{"id": "1", "language": "en", "text": "[dynamic_text]"}]16 }17 },18 {19 "name": "Extract Key Phrases",20 "type": "Action",21 "method": "POST",22 "url": "https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/keyPhrases",23 "body": {24 "documents": [{"id": "1", "language": "en", "text": "[dynamic_text]"}]25 }26 },27 {28 "name": "Analyze Image",29 "type": "Action",30 "method": "POST",31 "url": "https://your-resource.cognitiveservices.azure.com/vision/v3.2/analyze?visualFeatures=Categories,Description,Tags",32 "body": {"url": "[image_url]"}33 }34 ]35}Common mistakes when integrating Microsoft Azure with Bubble
Why it's a problem: Exposing Azure API keys in client-side code
How to avoid: Always mark API key headers as Private in the API Connector, which keeps them server-side
Why it's a problem: Using the wrong Azure endpoint region
How to avoid: Copy the exact endpoint URL from your Azure resource's Keys and Endpoint page
Why it's a problem: Not handling Azure rate limits
How to avoid: Check your Azure pricing tier's rate limits and add error handling in Bubble for 429 responses
Best practices
- Always mark Azure API keys as Private in the API Connector to keep them server-side
- Use the exact endpoint URL from your Azure resource to ensure correct region routing
- Start with Azure's free tier to test your integration before committing to a paid tier
- Add error handling for common Azure response codes (401, 403, 429)
- Use Azure Functions as middleware when direct API integration is too complex
- Monitor Azure costs in the portal to avoid unexpected charges
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to integrate Microsoft Azure Cognitive Services with my Bubble.io app for text sentiment analysis and image recognition. Can you walk me through the API Connector setup with Azure API keys and the specific API calls I need?
Integrate Azure Cognitive Services with my app. I need sentiment analysis on user-submitted text and image analysis on uploaded photos. Set up the API Connector calls with proper authentication.
Frequently asked questions
Which Azure services work best with Bubble?
Cognitive Services (text/image AI), Blob Storage (files), Azure AD (enterprise auth), and Azure Functions (custom backend logic) are the most commonly integrated with Bubble.
How much does Azure integration cost?
Azure offers a free tier for most services. Cognitive Services includes 5,000 free transactions per month. Blob Storage costs about $0.018/GB/month. Costs scale with usage.
Can I use Azure instead of Supabase or Firebase as my backend?
Technically yes, but Bubble's native database is usually simpler. Azure is best used to complement Bubble with specific services like AI, enterprise auth, or large-scale file storage.
Do I need an Azure subscription?
Yes, but you can start with a free Azure account that includes $200 in credits and 12 months of free services.
Can I use Azure OpenAI Service with Bubble?
Yes. Azure OpenAI has the same API format as OpenAI but hosted on Azure with enterprise compliance. Configure it in the API Connector with your Azure OpenAI endpoint and key. RapidDev can help build AI-powered features using Azure services.
Is Azure more complex than AWS for Bubble integration?
They are comparable in complexity. Azure's Cognitive Services API is simpler than AWS's equivalent. Blob Storage and S3 are similar. Choose based on your existing infrastructure and preferences.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation