Python with Django

<!-- templates/rollout.html -->
{% extends "base.html" %}

{% block content %}
<h1>Your Application</h1>
<div id="rollout-container"></div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/rollout.js' %}"></script>
{% endblock %}

// static/js/rollout.js
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('rollout-container');
  
  // Get CSRF token for Django
  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  
  fetch('/rollout-token/', {
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    }
  })
  .then(response => response.json())
  .then(data => {
    const token = data.token;
    
    // Add required styles
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
    document.body.appendChild(styleLink);

    // Dynamically load Rollout bundle
    import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
      ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
        const root = createRoot(container);
        
        root.render(
          createElement(
            RolloutLinkProvider,
            { token },
            createElement(CredentialsManager)
          )
        );
      }
    );
  });
});

# urls.py
from django.urls import path
from .views import RolloutTokenView, CredentialWebhookView

urlpatterns = [
    path('rollout-token/', RolloutTokenView.as_view(), name='rollout-token'),
    path('credential-webhook/', CredentialWebhookView.as_view(), name='credential-webhook'),
]

# views.py
from django.http import JsonResponse
from django.views import View
import jwt
import time

class RolloutTokenView(View):
    def get(self, request):
        """Generate a JWT token that expires in 15 minutes"""
        # Implement your actual token generation logic
        token = jwt.encode(
            {
                "iss": os.environ.get("ROLLOUT_CLIENT_ID"),
                "sub": user_id,
                "iat": int(time.time()),
                "exp": int(time.time()) + 900  # 15 minutes
            },
            os.environ.get("ROLLOUT_CLIENT_SECRET"),
            algorithm="HS512"
        )
        return JsonResponse({'token': token})

class CredentialWebhookView(View):
    def post(self, request):
        # Handle credential storage
        credential_id = request.POST.get('id')
        app_key = request.POST.get('appKey')
        
        # Save to database or trigger other actions
        print(f"Received credential: {credential_id} for {app_key}")
        return JsonResponse({'status': 'success'})

// Update the import block
.then(({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
  const handleCredentialAdded = ({ id, appKey }) => {
    console.log(`New credential added - ID: ${id}, App: ${appKey}`);
    
    // Send to Django backend
    const formData = new FormData();
    formData.append('id', id);
    formData.append('appKey', appKey);

    fetch('/credential-webhook/', {
      method: 'POST',
      headers: {
        'X-CSRFToken': csrftoken
      },
      body: formData
    });
  };

  const root = createRoot(container);
  root.render(
    createElement(
      RolloutLinkProvider,
      { token },
      createElement(CredentialsManager, {
        onCredentialAdded: handleCredentialAdded
      })
    )
  );
});

CSP_STYLE_SRC = ("'self'", "https://esm.sh")
CSP_SCRIPT_SRC = ("'self'", "https://esm.sh")
CSP_CONNECT_SRC = ("'self'", "https://universal.rollout.com")
CSP_IMG_SRC = ("'self'", "data:")