如何使用devise + omniauth + rails

Question

我目前正在运行rails 4应用程序，我想获取社交登录按钮而不是omniauth / devise提供的默认链接。

目前我有一个看起来像这样的注册表单，

我收录了以下宝石，bootstrap-social-rails和font-awesome-rails。

我希望得到一些看起来像这样的按钮，

我的new.html.erb如下所示，

<%= f.submit "Sign up", class: "btn btn-primary" %>
    <%= f.submit "Twitter", class: "btn btn-block btn-social btn-twitter fa fa-twitter"%>
    <%= f.submit "Sign in with Twitter", class: "btn btn-social-icon btn-twitter fa fa-twitter" %>

Answer 1

首先你需要_link.html.erb个文件。我将在下面写下供应商的代码。

<%- if devise_mapping.omniauthable? %> 
  <%- resource_class.omniauth_providers.each do |provider| %>
    .........
  <% end -%>
<% end -%>

将此代码更改为以下代码行。

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "<i class='#{ICONS[provider]}'></i>".html_safe, omniauth_authorize_path(resource_name, provider), class: "ui #{COLOR[provider]} mini submit button ok" %>
  <% end -%>
<% end -%>

在初始化时，为图标和颜色设置CONSTANT。

ICONS = { google_oauth2: 'google plus', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'github'}
COLOR = { google_oauth2: 'blue', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'black' }

请更改类名称（如果它不同，那只是演示类而不是来自bootstrap）。

Answer 2

OmniAuth授权通过重定向到提供者服务来执行，这意味着按钮是<a href="...">，而不是实际的<button>标记。

在这种情况下，你想要实现的是这样的：

<%= link_to user_omniauth_authorize_path(:twitter), class: "btn btn-block btn-social btn-twitter" do %>
   <span class="fa fa-twitter"></span> Sign in with Twitter
<% end %>