Включите учетную запись omniauth facebook во всплывающем окне

Ответ 1

Конечно, вы можете легко.

На ваш взгляд:

=link_to "Log in with Facebook", omniauth_authorize_path(:user, :facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400

В вашем приложении application.js:

function popupCenter(url, width, height, name) {
  var left = (screen.width/2)-(width/2);
  var top = (screen.height/2)-(height/2);
  return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}

$("a.popup").click(function(e) {
  popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
  e.stopPropagation(); return false;
});

И затем в вашем обратном просмотре:

:javascript
  if(window.opener) {
    window.opener.location.reload(true);
    window.close()
  }

Это выведет ваш Facebook-авторизацию в центрированном всплывающем окне 600x400, а затем, когда пользователь вернется с аутентификации, представление закроет всплывающее окно и обновит родительскую страницу. Он изящно деградирует, если пользователь ctrl-клики по ссылке или не поддерживает Javascript.

Ответ 2

Итак, проблема с решением Криса Хейлда, если вы используете OmniAuth в сочетании с Devise. Проблема заключается в том, что при перезагрузке окна (на странице входа) Devise приведет вас к корневому пути, полностью игнорируя URL-адрес, к которому вы пытались получить доступ, и выдает сообщение об ошибке "Вы уже вошли". Это имеет смысл, потому что Devise защищает зарегистрированного пользователя от доступа к странице входа, перенаправляя на домашнюю страницу. Перегружая страницу входа сразу после входа в систему, вы столкнетесь с этой проблемой.

Итак, мое решение для кого-то, использующего Devise, выглядит следующим образом:

# add this wherever needed in your_authentications_or_callbacks_controller.rb
sign_in user
@after_sign_in_url = after_sign_in_path_for(user)
render 'callback', :layout => false

Так обычно, после поиска или создания пользователя, использующего хэш, возвращаемый определенным провайдером (Facebook, Twitter и т.д.), мы бы назвали функцию Devise sign_in_and_redirect. Но мы еще не можем перенаправить (помните, что сейчас пользователь находится во всплывающем окне), поэтому мы просто sign_in пользователь.

Далее, нам нужно передать URL-адрес, к которому пользователь пытался получить доступ к представлению, и мы можем получить этот url, используя метод Devise after_sign_in_path_for.

Наконец, нам нужно отобразить представление. Поскольку мы будем использовать представление только для вызова JavaScript, нет необходимости отображать макет, поэтому мы отключим его, чтобы не замедлить нас. Вот этот взгляд:

# views/your_authentications_or_callbacks/callback.html.erb
<script type="text/javascript">
  window.opener.location = '<%= @after_sign_in_url %>';
  window.close();
</script>

Таким образом, пользователь будет перенаправлен на правильный URL-адрес после входа в систему и отобразится правильное флэш-сообщение.

С отключенным JavaScript

После некоторого тестирования я понял, что это решение не разрешает аутентификацию без JavaScript, поэтому я хотел бы добавить добавление.

function popupCenter(linkUrl, width, height, name) {
    var separator = (linkUrl.indexOf('?') !== -1) ? '&' : '?',
        url = linkUrl + separator + 'popup=true',
        left = (screen.width - width) / 2,
        top = (screen.height - height) / 2,
        windowFeatures = 'menubar=no,toolbar=no,status=no,width=' + width +
            ',height=' + height + ',left=' + left + ',top=' + top;
    return window.open(url, name, windowFeatures);
}

Здесь мы добавим простой параметр под названием popup к URL-адресу с использованием JavaScript. OmniAuth будет достаточно любезен, чтобы сохранить любые параметры запроса, добавленные в url запроса. Итак, наконец, мы проверяем этот параметр в контроллере. Если он существует, это связано с тем, что JavaScript включен:

if request.env['omniauth.params']['popup']
  render 'callback', :layout => false
else
  redirect_to @after_sign_in_url
end

Кроме того, не забудьте сделать то же самое для своего действия failure, которое вызывается, когда пользователь не принимает вход в систему.

Я не мог бы сделать это без решения Криса Хейлда, так что.. Большое вам спасибо!

Ответ 3

Проводка в случае, если это помогает другим. Я использовал ответ Криса Хейлда, но столкнулся с проблемой с окончательным бит javascript, закрывающим любые новые ссылки на окна. Например, если я разместил ссылку на мой сайт на Facebook, когда пользователи нажали на ссылку, новое окно автоматически закроется в Chrome, потому что условие проверяет только "if (window.opener)"

Я решил решить эту проблему с помощью глобальной переменной (popupValue). Могут быть более элегантные решения, но я думал, что буду делиться ими, если другие ударят по одной и той же проблеме:

function popupCenter(url, width, height, name) {
 var left = (screen.width/2)-(width/2);
 var top = (screen.height/2)-(height/2);
 popupValue = "on";
 return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top     );
}

$(document).ready(function(){
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});


if(window.opener && window.opener.popupValue === 'on') {
 delete window.opener.popupValue;
 window.opener.location.reload(true);
 window.close()
}
});

Ответ 4

Я начал использовать Facebook JS SDK, так как это проще.

# In facebook.js.coffee
jQuery ->
  $('body').prepend('<div id="fb-root"></div>')

  $.ajax
    url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
    dataType: 'script'
    cache: true

window.fbAsyncInit = ->
  FB.init(appId: 'YOUR-APP-ID', cookie: true)

  $('#sign_in').click (e) ->
    e.preventDefault()
    FB.login (response) ->
      window.location = '/auth/facebook/callback' if response.authResponse

  $('#sign_out').click (e) ->
    FB.getLoginStatus (response) ->
      FB.logout() if response.authResponse
    true

Затем в ваших представлениях:

<%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in" %>
<%= link_to "Sign out", signout_path, id: "sign_out" %>

Это прямо из подсказки Серхио Гутьерреса - https://coderwall.com/p/bsfitw