如何使用 devise + omniauth + rails 获取社交登录按钮

Question

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

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

我包括了以下 gem，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

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

Answer 2

首先你需要 _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' }

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

如何使用 devise + omniauth + rails 获取社交登录按钮

How to get social login buttons using devise + omniauth + rails

ruby-on-rails

devise

omniauth

twitter-bootstrap