Превратите омниаут вход в Facebook во всплывающее окно - PullRequest
58 голосов
/ 20 декабря 2010

Я использую гем omniauth с rails, и он отлично работает при входе в систему пользователей, но каждый раз, когда вы переходите на страницу входа в fb, вы перенаправляетесь обратноМне было интересно, если есть способ сделать то, что делает большинство страниц и показать логин fb во всплывающем окне, а затем перезагрузить родительский div, как только это будет завершено.Есть идеи?

Спасибо!

Ответы [ 4 ]

125 голосов
/ 29 декабря 2010

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

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

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

В вашем приложении.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.

29 голосов
/ 07 марта 2012

Хорошо, значит, есть проблема с решением Криса Хилда, если вы используете OmniAuth в сочетании с Devise .Проблема в том, что когда вы перезагрузите окно (то есть на странице входа в систему), Devise перенесет вас в root_path, полностью игнорируя 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, которое вызывается, когда пользователь не принимает вход в систему.

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

4 голосов
/ 28 июня 2012

Публикация на случай, если это поможет другим.Я использовал ответ Криса Хилда, но столкнулся с проблемой из-за заключительного кусочка 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()
}
});
3 голосов
/ 21 февраля 2014

Я завелся, используя 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

...