Как получить социальные кнопки входа с помощью 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

авторизация 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 -%> 

И в Initialize, сделать 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' } 

Пожалуйста, измените имя класса (если оно отличается, это просто демо-классы не из бутстрапа).