JS-Widgets reibungslos mit Rails einbetten: Eine Schritt-für-Schritt-Anleitung

Das Erstellen eines benutzerdefinierten JavaScript-Widgets, das in Client-Websites eingebettet werden kann, ist eine leistungsstarke Möglichkeit, die Reichweite Ihrer Ruby on Rails-Anwendung zu erweitern. Ganz gleich, ob es sich um eine Chatbox, einen Analytics-Tracker oder ein anderes interaktives Element handelt, mit einem benutzerdefinierten Widget können Sie den Benutzern Funktionen direkt zur Verfügung stellen. Lassen Sie uns die Schritte zum Erstellen eines sicheren, einbettbaren Widgets durchgehen und die Best Practices behandeln.

Inhaltsverzeichnis

 1. Schritt 1: Einrichtung
 2. Schritt 2: Erstellen eines Einbettungscodes für Kunden
 3. Schritt 3: Einbetten Ihres Widgets in einen Iframe (optional)
 4. Schritt 4: Header für die Iframe-Einbettung festlegen
 5. Schritt 5: Testen Sie das Widget
 6. Schritt 6: Versionsunterstützung mit versionierten Routen und Controllern hinzufügen

Schritt 1: Einrichtung

Erstellen Sie einen neuen Rails-Endpunkt: Dieser Endpunkt stellt den JavaScript-Code für Ihr Widget bereit. Normalerweise könnte dies eine Aktion innerhalb eines WidgetsControllers sein:

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

Route konfigurieren: Richten Sie eine Route ein, um das Widget zugänglich zu machen.

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

JavaScript vom Controller bereitstellen: In Rails können Sie mit JavaScript reagieren, indem Sie den entsprechenden Inhaltstyp festlegen.

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

Schreiben Sie den JavaScript-Code für Ihr Widget: Das Widget-Skript enthält normalerweise die Logik zum Rendern eines benutzerdefinierten HTML-Elements oder Iframes auf der Seite des Kunden.

// 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);
})();

Schritt 2: Erstellen eines Einbettungscodes für Kunden

Damit Kunden Ihr Widget einbetten können, stellen Sie ein JavaScript-Snippet bereit, das sie kopieren und in ihren HTML-Code einfügen können:

<!-- 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>

Schritt 3: Einbetten Ihres Widgets in einen Iframe (optional)

Erwägen Sie, den Widget-Inhalt in einen Iframe einzubetten, um mehr Isolierung und Kontrolle über das Design zu erhalten. Dieser Ansatz hält den Stil und das Verhalten des Widgets von der Website des Kunden getrennt.

Aktualisieren Sie den JavaScript-Code, um einen Iframe für das Widget zu erstellen:

// 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);
})();

Definieren Sie eine neue Route und Ansicht für den Widget-Inhalt:

# 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

Erstellen Sie den HTML-Inhalt des Widgets: Erstellen Sie eine Ansicht zum Rendern im 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')

Legen Sie die Frame-Ancestors-Direktive fest: Der moderne und flexiblere Ansatz besteht darin, Content-Security-Policy mit der Frame-Ancestors-Direktive zu verwenden, mit der Sie die Domänen angeben können, in die Ihr Widget eingebettet werden darf ein Iframe. Passen Sie diesen Header je nach Ihren Sicherheitsanforderungen an.

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

Mit dieser Konfiguration kann Ihre App nur von den angegebenen Domänen in Iframes eingebettet werden. Ersetzen Sie https://trusted-domain.com durch die tatsächlichen Domänen, denen Sie vertrauen.

Schritt 5: Testen Sie das Widget

Sobald Sie das Widget und die Kopfzeilen eingerichtet haben, testen Sie das Widget, indem Sie es auf einer Testseite in verschiedenen Browsern einbetten, um die Kompatibilität sicherzustellen. Wenn Sie Frame-Vorfahren verwendet haben, stellen Sie sicher, dass nur die angegebenen Domänen Ihr Widget einbetten können und dass das Widget wie erwartet angezeigt wird.

Schritt 6: Versionsunterstützung mit versionierten Routen und Controllern hinzufügen

Während sich Ihr Widget weiterentwickelt, können Sie neue Funktionen oder Verbesserungen einführen, die nicht alle Kunden sofort übernehmen können. Durch die Unterstützung mehrerer Versionen Ihres Widgets wird die Abwärtskompatibilität gewährleistet, sodass Kunden in ihrem eigenen Tempo aktualisieren können, ohne ihre bestehenden Integrationen zu beeinträchtigen.

Implementieren der Versionsunterstützung mithilfe versionierter Routen und Controller

Definieren Sie versionierte Routen

Beginnen Sie damit, separate Routen für jede Version Ihres Widgets einzurichten. Durch die Benennung von Namensräumen für jede Version bleibt Ihr Code organisiert und Sie können verschiedene Versionen unabhängig voneinander verwalten.

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

Erstellen Sie versionierte Controller

Erstellen Sie für jede Version einen Controller innerhalb ihres Namensraums. Durch diese Trennung wird sichergestellt, dass Änderungen in einer Version keine Auswirkungen auf andere haben.

# 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

Erstellen Sie versionenspezifische JavaScript- und HTML-Ansichten

Jede Version kann über eigene JavaScript- und HTML-Dateien verfügen, sodass Sie die Funktionalität und das Erscheinungsbild pro Version individuell anpassen können.

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);
})();

Inhalt der 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>

Inhalt der 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);
})();

Letzte Gedanken

Das Erstellen eines einbettbaren Widgets für eine Rails-Anwendung erfordert einige wichtige Überlegungen: sichere Bereitstellung von JavaScript, Verwaltung von Stilen und korrekte Konfiguration von Headern für die Iframe-Kompatibilität. Wenn Sie die oben genannten Schritte ausführen, erhalten Sie ein Widget, das Kunden problemlos zu ihren Websites hinzufügen können, wodurch die Benutzerfreundlichkeit Ihrer Rails-Anwendung erweitert wird.

Das obige ist der detaillierte Inhalt vonJS-Widgets reibungslos mit Rails einbetten: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!