Intégrez facilement des widgets JS avec Rails : un guide étape par étape

La création d'un widget JavaScript personnalisé pouvant être intégré aux sites Web des clients est un moyen puissant d'étendre la portée de votre application Ruby on Rails. Qu'il s'agisse d'une boîte de discussion, d'un tracker analytique ou de tout autre élément interactif, un widget personnalisé vous permet d'apporter des fonctionnalités directement aux utilisateurs. Passons en revue les étapes de création d'un widget sécurisé et intégrable et couvrons les meilleures pratiques.

Table des matières

 1. Étape 1 : Configuration
 2. Étape 2 : Création d'un code intégré pour les clients
 3. Étape 3 : Intégrer votre widget dans une Iframe (facultatif)
 4. Étape 4 : Définition des en-têtes pour l'intégration Iframe
 5. Étape 5 : Testez le widget
 6. Étape 6 : Ajout de la prise en charge des versions avec des routes et des contrôleurs versionnés

Étape 1 : Configuration

Créez un nouveau point de terminaison Rails : ce point de terminaison servira le code JavaScript pour votre widget. En règle générale, il peut s'agir d'une action au sein d'un WidgetsController :

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    # Your widget code here
  end
end

Configurer l'itinéraire : configurez un itinéraire pour rendre le widget accessible.

# config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

Servir JavaScript à partir du contrôleur : dans Rails, vous pouvez répondre avec JavaScript en définissant le type de contenu approprié.

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    response.headers['Content-Type'] = 'application/javascript'
    render layout: false
  end
end

Écrivez le code JavaScript pour votre widget : le script du widget inclut généralement la logique permettant d'afficher un élément HTML personnalisé ou une iframe sur la page du client.

// app/views/widgets/show.js.erb
(function() {
  const widgetDiv = document.createElement('div');
  widgetDiv.id = 'custom-widget';
  widgetDiv.innerHTML = "<p>This is your custom widget content!</p>";
  document.body.appendChild(widgetDiv);
})();

Étape 2 : Création d'un code intégré pour les clients

Pour permettre aux clients d'intégrer votre widget, fournissez un extrait de code JavaScript qu'ils peuvent copier et coller dans leur HTML :

<!-- Client Embeddable Code -->
<script type="text/javascript">
  (function() {
    const script = document.createElement('script');
    script.src = "https://yourapp.com/widget.js";
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Étape 3 : Intégration de votre widget dans une Iframe (facultatif)

Envisagez d'intégrer le contenu du widget dans une iframe pour plus d'isolation et de contrôle sur le style. Cette approche permet de séparer le style et le comportement du widget du site du client.

Mettez à jour le code JavaScript pour créer une iframe pour le widget :

// app/views/widgets/show.js.erb
(function() {
  const iframe = document.createElement('iframe');
  iframe.src = "<%= widget_content_url %>";
  iframe.style.width = "300px";
  iframe.style.height = "200px";
  document.body.appendChild(iframe);
})();

Définissez un nouvel itinéraire et une nouvelle vue pour le contenu du widget :

# config/routes.rb
Rails.application.routes.draw do
  get '/widget_content', to: 'widgets#content', as: :widget_content
end

# app/controllers/widgets_controller.rb
def content
  render layout: false
end

Créer le contenu HTML du widget : créer une vue à afficher à l'intérieur de l'iframe

<!-- app/views/widgets/content.html.erb -->
<div>



<h2>
  
  
  Step 4: Setting Headers for Iframe Embedding
</h2>

<p>Configure the appropriate HTTP headers to ensure your widget works securely in an iframe. There are two primary headers to consider:</p>

<p><strong>Remove the X-Frame-Options Header</strong>: The X-Frame-Options header is deprecated but still widely respected by many browsers. To remove it, add the following configuration in an initializer:<br>
</p>

<pre class="brush:php;toolbar:false"># config/initializers/security_headers.rb
Rails.application.config.action_dispatch.default_headers.delete('X-Frame-Options')

Définir la directive Frame-Ancestors : L'approche moderne et plus flexible consiste à utiliser Content-Security-Policy avec la directive frame-ancestors, qui vous permet de spécifier les domaines autorisés à intégrer votre widget dans une iframe. Ajustez cet en-tête si nécessaire en fonction de vos exigences de sécurité.

# config/initializers/security_headers.rb
Rails.application.config.action_dispatch.default_headers.merge!({
  'Content-Security-Policy' => "frame-ancestors 'self' https://trusted-domain.com"
})

Cette configuration permet à votre application d'être intégrée dans des iframes uniquement par les domaines spécifiés. Remplacez https://trusted-domain.com par les domaines réels auxquels vous faites confiance.

Étape 5 : testez le widget

Une fois que vous avez configuré le widget et les en-têtes, testez le widget en l'intégrant sur une page de test dans différents navigateurs pour garantir la compatibilité. Si vous avez utilisé des ancêtres de cadre, confirmez que seuls les domaines spécifiés peuvent intégrer votre widget et que le widget s'affiche comme prévu.

Étape 6 : Ajout de la prise en charge des versions avec des routes et des contrôleurs versionnés

Au fur et à mesure que votre widget évolue, vous pouvez introduire de nouvelles fonctionnalités ou améliorations que tous les clients ne sont pas prêts à adopter immédiatement. La prise en charge de plusieurs versions de votre widget garantit une compatibilité ascendante, permettant aux clients de mettre à niveau à leur propre rythme sans perturber leurs intégrations existantes.

Implémentation de la prise en charge des versions à l'aide de routes et de contrôleurs versionnés

Définir des itinéraires versionnés

Commencez par configurer des itinéraires distincts pour chaque version de votre widget. L'espacement de noms de chaque version permet de garder votre code organisé et vous permet de gérer différentes versions indépendamment.

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    # Your widget code here
  end
end

Créer des contrôleurs versionnés

Pour chaque version, créez un contrôleur dans son espace de noms. Cette séparation garantit que les modifications apportées à une version n'affectent pas les autres.

# config/routes.rb
Rails.application.routes.draw do
  get '/widget.js', to: 'widgets#show', as: :widget
end

# app/controllers/widgets_controller.rb
class WidgetsController < ApplicationController
  def show
    response.headers['Content-Type'] = 'application/javascript'
    render layout: false
  end
end

Créer des vues JavaScript et HTML spécifiques à la version

Chaque version peut avoir ses propres fichiers JavaScript et HTML, vous permettant d'adapter les fonctionnalités et l'apparence par version.

Version 1 JavaScript :

// app/views/widgets/show.js.erb
(function() {
  const widgetDiv = document.createElement('div');
  widgetDiv.id = 'custom-widget';
  widgetDiv.innerHTML = "<p>This is your custom widget content!</p>";
  document.body.appendChild(widgetDiv);
})();

Contenu de la version 1 :

<!-- Client Embeddable Code -->
<script type="text/javascript">
  (function() {
    const script = document.createElement('script');
    script.src = "https://yourapp.com/widget.js";
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Contenu de la version 2 :

// app/views/widgets/show.js.erb
(function() {
  const iframe = document.createElement('iframe');
  iframe.src = "<%= widget_content_url %>";
  iframe.style.width = "300px";
  iframe.style.height = "200px";
  document.body.appendChild(iframe);
})();

Pensées finales

La création d'un widget intégrable pour une application Rails implique quelques considérations clés : servir JavaScript en toute sécurité, gérer les styles et configurer correctement les en-têtes pour la compatibilité iframe. En suivant les étapes ci-dessus, vous disposerez d'un widget que les clients pourront facilement ajouter à leurs sites, élargissant ainsi la convivialité de votre application Rails.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!