允许用户将我的内容嵌入他们的网站(如博客) – rails 4
我正在构建一个Rails 4应用程序,我想要做的是为我的用户提供通过可嵌入代码将我的内容嵌入他们自己的网站(如他们的博客)的选项。
换句话说,我希望有一个包含一些内容的错误页面,以及一个显示“嵌入”的按钮。 当用户点击它时,会出现一小部分可嵌入代码,他们可以将这些代码复制并粘贴到他们的博客上等。这将显示我页面中的内容。
解决这个问题的最佳方式是什么? 请尽可能描述,因为我对此不熟悉。 谢谢!
的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 %>
这将呈现pages
控制器的show
方法,它将呈现没有布局的相应视图。 这将无法自行执行任何操作,但如果您从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:
这是一个很好的资源
这里的底线目标是提供在用户网站上嵌入iframe的function,最终会调用您的domain.com/embed/:id
url
上面的代码可能有点臃肿(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