Intégrer des services externes
Découvrez les modèles permettant de connecter votre backend Supabase à des API et services tiers afin d’étendre les fonctionnalités de votre application
Intégrer des services externes est une leçon Supabase Backend as a Service gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Supabase Backend as a Service, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Supabase Backend as a Service comprend 3 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why External Services?
Your app often needs to do more than just manage data in Supabase. Think about sending emails, processing payments, or integrating AI tools.
This is where integrating with external services comes in! It allows your Supabase backend to communicate with other APIs and platforms to extend your application's capabilities.
Common Integration Needs
Many common app features rely on external services:
- Payment Gateways: Stripe, PayPal for transactions.
- Email/SMS: SendGrid, Twilio for notifications.
- AI/ML APIs: OpenAI, Google Cloud AI for advanced features.
- Geo-location: Google Maps, Mapbox for mapping services.
- Analytics: Mixpanel, Segment for user behavior tracking.
Supabase's Role: Edge Functions
While your client-side app can call external APIs directly, for secure and backend-driven integrations, Supabase Edge Functions are your best friend.
Edge Functions act as serverless backend logic, running close to your users. They can make HTTP requests to any external API without exposing sensitive information directly in your client-side code.
Making an API Call with Deno
Supabase Edge Functions are built on Deno, which uses the standard fetch API for making network requests, similar to browsers. This makes it straightforward to interact with external services.
The flow is: your client invokes an Edge Function, which then makes a request to the external API, processes the response, and sends it back to your client.
Code Demo: Fetching External Data
Here's a simple Edge Function that fetches a random 'todo' item from a public API (JSONPlaceholder). Notice how we use Deno.serve as the entry point for the function.
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
Deno.serve(async (req) => {
const { name } = await req.json()
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
const data = await response.json()
return new Response(JSON.stringify({
message: `Hello ${name}! Here's a todo: ${data.title}`,
}), {
headers: { 'Content-Type': 'application/json' },
status: 200,
})
} catch (error) {
return new Response(JSON.stringify({
error: error.message,
}), {
headers: { 'Content-Type': 'application/json' },
status: 500,
})
}
})Invoking the Edge Function
Once deployed, your client-side application can invoke this Edge Function using the Supabase client library. The function name here would be, for example, 'fetch-todo'.
The invoke method handles sending data to your function and receiving its response.
// Client-side JavaScript
async function getTodoFromEdgeFunction() {
try {
const { data, error } = await supabase.functions.invoke('fetch-todo', {
body: { name: 'CoddyKit User' },
})
if (error) {
console.error('Function error:', error)
} else {
console.log('Function response:', data)
}
} catch (err) {
console.error('Invocation error:', err)
}
}
// Call the function (e.g., on button click)
// getTodoFromEdgeFunction();Securing API Keys with Supabase Secrets
Hardcoding API keys directly into your Edge Function code is a security risk. If your code is ever exposed, your keys are compromised.
Supabase provides Secrets to securely store environment variables for your Edge Functions. These are not part of your codebase and are injected at runtime.
Using Secrets in Edge Functions
First, you'd set a secret using the Supabase CLI: supabase secrets set MY_EXTERNAL_API_KEY=your_key_here. Then, in your Edge Function, you access it via Deno.env.get('MY_EXTERNAL_API_KEY').
This keeps your sensitive credentials safe and out of your version control.
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
Deno.serve(async (req) => {
// Access the secret environment variable
const apiKey = Deno.env.get('MY_EXTERNAL_API_KEY') || 'NO_KEY_SET'
// Example: Use the apiKey in a header for an external API call
// const response = await fetch('https://api.example.com/data', {
// headers: { 'Authorization': `Bearer ${apiKey}` },
// })
return new Response(JSON.stringify({
message: `API Key accessed: ${apiKey.substring(0, 5)}...`,
}), {
headers: { 'Content-Type': 'application/json' },
status: 200,
})
})Handling Responses & Errors Robustly
When integrating external services, always prepare for success and failure. Parse the API's response correctly (often JSON) and handle potential errors.
- Check HTTP Status: Not all 2xx responses are successes; some APIs use 4xx for business logic errors.
- Try-Catch Blocks: Essential for network errors or issues parsing responses.
- Meaningful Error Messages: Return clear error messages to the client without exposing internal API details.
Best Practices for Integrations
To ensure robust and scalable integrations:
- Rate Limiting: Respect external API rate limits to avoid getting blocked.
- Retries: Implement exponential backoff for transient network issues.
- Timeouts: Set reasonable timeouts for external requests to prevent hanging.
- Logging: Log requests and responses (especially errors) for debugging.
- Idempotency: Design your functions to handle duplicate requests gracefully for operations like payments.
Quick Check on Integration
You're building an Edge Function to send an email using an external email API. You need to include your email service API key.
Recap: Integrating External Services
You've learned how to extend your Supabase application's capabilities by integrating with external APIs and services.
- Edge Functions are ideal for secure backend-to-external-service communication.
- Use
fetchwithin Deno Edge Functions to make HTTP requests. - Always secure sensitive credentials like API keys using Supabase Secrets.
- Implement robust error handling and follow best practices for reliable integrations.
This opens up a world of possibilities for building powerful and feature-rich applications!
Apprends Supabase Backend as a Service avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 11
- Leçons
- 40
Questions Fréquemment Posées
La leçon « Intégrer des services externes » est-elle gratuite ?
Oui — le texte complet de « Intégrer des services externes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Supabase Backend as a Service, passe à CoddyKit PRO. Le cours Supabase Backend as a Service comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Intégrer des services externes » ?
Découvrez les modèles permettant de connecter votre backend Supabase à des API et services tiers afin d’étendre les fonctionnalités de votre application Tu pratiques Supabase Backend as a Service avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Supabase Backend as a Service ?
Aucune expérience préalable n'est requise. Supabase Backend as a Service sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Intégrer des services externes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Supabase Backend as a Service ?
Oui. Chaque leçon Supabase Backend as a Service inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Intégrer des services externes
- Files de tâches avec Supabase et des workers
- Planifier des tâches récurrentes avec pg_cron