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

Question

我正在构建一个Rails 4应用程序,我想要做的是为我的用户提供通过嵌入代码将我的内容嵌入他们自己的网站(如他们的博客)的选项.

换句话说,我想要一个包含一些内容的erb页面,以及一个显示"Embed"的按钮.当用户点击它时,会出现一小部分可嵌入代码,他们可以将这些代码复制并粘贴到他们的博客上等.这将显示我页面中的内容.

解决这个问题的最佳方式是什么？请尽可能具有描述性,因为我对此不熟悉.谢谢!

Answer 1

的iFrame

使用当前技术实现的方式通常是iframe在客户端网站上使用JS调用.您必须确保设置正确的CORS策略(以允许从远程站点进行连接)

以下是从高级角度进行操作的方法:

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

这将为您提供所谓的端点 - 您可以从客户端网站(嵌入代码)指向该端点.从本质上讲,它将使您能够使用JS小部件进行连接your_domain.com/embed/:blog_post_number

然后可以使用相应的控制器处理:

#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 %>

这将呈现控制器的show方法,该方法pages将呈现没有布局的相应视图.这将不会自行执行任何操作,但如果您从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>

这是一个很好的资源

这里的底线目标是提供在用户的网站上嵌入iframe的功能,最终会调用您的domain.com/embed/:id网址

上面的代码可能有点臃肿(Youtube只是让你iframe直接在你的网站上放一个"裸体" ).如何操作将取决于您希望拥有的复杂性,以及您计划的任何未来可扩展性

CORS

最后,您需要管理"CORS"(跨源资源共享策略).这是一种标准协议,它基本上可以防止来自非原始域的任何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