javascript - 允许用户将我的内容嵌入他们的网站(如博客)——rails 4

Question

我正在构建一个 Rails 4 应用程序，我想做的是让我的用户可以选择通过可嵌入代码将我的内容嵌入到他们自己的网站(比如他们的博客)中。

换句话说，我想要一个包含一些内容的 erb 页面，以及一个显示“嵌入”的按钮。当用户单击它时，会出现一小段可嵌入代码，他们可以将这些代码复制并粘贴到他们的博客等地方。这将显示我页面中的内容。

解决此问题的最佳方法是什么？请尽可能描述，因为我对此很陌生。谢谢!

Answer 1

iFrame

用当前技术实现的方法通常是使用 iframe ，从客户端网站上的 JS 调用。你必须确保你有正确的 CORS policy设置(以允许来自远程站点的连接)

---

从高层次的 Angular 来看，您将如何做到这一点:

#config/routes.rb
namespace :embed do
   resources :pages, only: :show, path: "" # -> domain.com/embed/1
end

这将为您提供所谓的 endpoint。 - 您将能够从您的客户网站指向它(嵌入代码)。本质上，它会让您能够使用您的 JS 小部件连接 your_domain.com/embed/:blog_post_number

然后可以使用相应的 Controller 来处理:

#app/controllers/embed/pages_controller.rb
class PagesController < ApplicationController
   layout false
   def show
      @page = Page.find params[:id]
   end
end

#app/views/embed/pages/show.html.erb
<%= @page.title %>

这将呈现pages Controller 的show 方法，这将呈现相应的没有布局的 View 。这本身不会执行任何操作，但如果您从 javascript 小部件正确调用它，您将能够在您的 iFrame 中显示它

---

JS

因此您需要一个小部件来“嵌入”您的代码。执行此操作的典型方法是创建一个 javascript“小部件”，它将驻留在您的服务器上(在 public 目录中)。然后，您将提示您的用户在嵌入代码时调用此脚本:

#public/embed.js
window.onload = function() {

   //Params
   var scriptPram = document.getElementById('load_widget');
   var id = scriptPram.getAttribute('data-page');

   /iFrame
   var iframe = document.createElement('iframe');
   iframe.style.display = "none";
   iframe.src = "embed/" + id;
   document.body.appendChild(iframe);
};

然后您将提示用户嵌入以下 JS:

<script id="load_widget" src="http://domain.com/embed.js" data-page="1"></script>

这是一个 great resource

这里的底线目标是提供在用户站点上嵌入 iframe 的能力，这将最终调用您的 domain.com/embed/:id url

上面的代码可能有点臃肿(Youtube 只是让你把一个“裸”iframe 直接放到你的网站上)。你如何做将取决于你想要拥有的复杂性，以及你计划的任何 future 可扩展性

---

CORS

最后，您需要管理 "CORS" (Cross Origin Resource Sharing policy) .这是一个标准协议(protocol)，基本上可以防止来自非源域的任何 XHR 请求。

CORS 的原因是它可以防止您的服务器受到跨 XHR 的匿名请求的攻击。我不确定它的深层架构含义 - 但您肯定需要确保在您的服务器上设置了 CORS 策略以允许调用/显示嵌入的页面。

在 Rails 中实现此目的的最有效方法是使用 RACK-CORS gem :

#config/application.rb
config.middleware.use Rack::Cors do
  allow do
     origins '*'
     resource '/embed.js', :headers => :any, :methods => [:get, :post, :options] #-> I believe resource needs to be a specific URL - will have to check this
  end
end