ruby on rails - son - Activa el inicio de sesión de omniauth facebook en una ventana emergente

pop ups chrome

Question

Estoy usando la gema omniauth con rieles y funciona muy bien con el ingreso de usuarios, pero cada vez que te lleva a la página de inicio de sesión de fb te redirige. Me preguntaba si hay una manera de hacer lo que hacen la mayoría de las páginas y mostrar el inicio de sesión de fb en una ventana emergente y luego volver a cargar el div principal una vez que se haya completado. ¿Algunas ideas?

¡Gracias!

Answer 1

Claro, puedes fácilmente.

En su opinión:

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

En su 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;
});

Y luego en su vista de devolución de llamada:

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

Aparecerá su autenticación de Facebook en una ventana emergente centrada en 600x400, y cuando el usuario regrese de la autenticación, la vista cerrará la ventana emergente y actualizará la página principal. Se degrada graciosamente si un usuario hace clic en el botón Ctrl o no tiene Javascript habilitado también.

Answer 2

Ok, entonces hay un problema con la solución de Chris Heald si estás usando OmniAuth junto con Devise . El problema es que cuando recarga la ventana (que está en la página de inicio de sesión), Devise lo llevará a la ruta raíz, ignorando por completo la URL a la que intentaba acceder y mostrará el mensaje de error "Ya ha iniciado sesión". Esto tiene sentido porque Devise protege a un usuario conectado de acceder a la página de inicio de sesión redireccionando a la página de inicio. Al volver a cargar la página de inicio de sesión inmediatamente después de iniciar sesión, terminará con este problema.

Entonces mi solución para alguien que use Devise es la siguiente:

# 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

Por lo tanto, normalmente, después de encontrar o crear un usuario que utiliza el hash devuelto por un determinado proveedor (Facebook, Twitter, etc.), llamamos a la función Devise sign_in_and_redirect . Pero no podemos redireccionar por el momento (recuerde, en este momento, el usuario se encuentra actualmente en una ventana emergente) por lo que simplemente sign_in el usuario.

A continuación, tenemos que pasar la url que el usuario estaba tratando de acceder a la vista, y podemos obtener esa url usando el método de Devise after_sign_in_path_for .

Finalmente, necesitamos renderizar la vista. Como solo usaremos la vista para llamar a JavaScript, no es necesario renderizar el diseño, por lo que lo desactivamos para que no se ralentice. Aquí está esa vista:

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

De esta forma, se redirige al usuario a la url adecuada después de iniciar sesión y se muestra el mensaje flash correcto.

Con JavaScript deshabilitado

Después de algunas pruebas me di cuenta de que esta solución no permitía la autenticación sin JavaScript, así que me gustaría hacer una adición.

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);
}

El cambio aquí es agregar un parámetro simple llamado popup a la url usando JavaScript. OmniAuth tendrá la amabilidad de almacenar cualquier parámetro de consulta agregado a la url de solicitud. Así que finalmente buscamos ese param en el controlador. Si existe, es porque JavaScript está habilitado:

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

Además, no olvide hacer lo mismo para su acción de failure , que se invoca cuando el usuario no acepta el inicio de sesión.

No podría haber hecho esto sin la solución de Chris Heald, así que ... ¡Muchas gracias!

Answer 3

Publicación en caso de que ayude a otros. Estaba usando la respuesta de Chris Heald, pero tuve problemas con el último javascript que cerraba los enlaces de las ventanas nuevas. Por ejemplo, si publiqué un enlace a mi sitio en Facebook, cuando los usuarios hicieron clic en el vínculo, la nueva ventana se cerraría automáticamente en Chrome porque la condición solo busca "if (window.opener)".

Terminé resolviendo esto con el uso de una variable global (popupValue). Puede haber soluciones más elegantes, pero pensé que las compartiría en caso de que otras tengan el mismo problema:

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()
}
});

Answer 4

Terminé usando JS SDK de Facebook porque es más fácil.

# 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

Entonces en tus puntos de vista:

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

Esto es directamente de la sugerencia de Sergio Gutiérrez aquí - https://coderwall.com/p/bsfitw