[RUBY-ON-RAILS] 팝업으로 omniauth 페이스 북의 로그인을 돌려

팝업으로 omniauth 페이스 북의 로그인을 돌려

나는 레일에 omniauth 보석을 사용하고 있는데 사용자에 loging와 함께 잘 작동하지만, 매번 그것을 다음 FB 로그인 페이지로 이동합니다 당신을 리디렉션합니다. 즉 완료되면 부모 사업부를 대부분의 페이지가해야 할 일 및 팝업에서 FB 로그인을 보여 다음 다시로드 할 수있는 방법이 있는지 궁금했다. 어떤 아이디어?

감사!

해결법

1. ==============================

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

   인증에서 사용자가 반환 될 때보기가 팝업을 닫고 상위 페이지를 새로 고침 할 때 다음, 중심 600x400 팝업에서 페이스 북 인증을 팝업 수 있습니다. 사용자도 링크를 Ctrl 키를 클릭하거나 자바 스크립트를 사용할 수없는 경우는 정상적으로 저하됩니다.

2. ==============================

   2.좋아, 그래서 당신이 고안와 함께 OmniAuth를 사용하는 경우 크리스 종광의 솔루션에 문제가있다. 문제는 당신이 (로그인 페이지에있는) 창을 다시로드 할 때, 유증가 완전히 접속을 시도하려는 URL을 무시하고 root_path로 이동합니다 및 오류 메시지 "당신은 이미 서명"을 얻을 것입니다. 유증은이 홈페이지로 리디렉션하여 로그인 페이지에 액세스 로그인 한 사용자 보호 할 수 있기 때문 의미가 있습니다. 로그인 한 후 바로 로그인 페이지를 다시로드하면이 문제가 될 겁니다.

   좋아, 그래서 당신이 고안와 함께 OmniAuth를 사용하는 경우 크리스 종광의 솔루션에 문제가있다. 문제는 당신이 (로그인 페이지에있는) 창을 다시로드 할 때, 유증가 완전히 접속을 시도하려는 URL을 무시하고 root_path로 이동합니다 및 오류 메시지 "당신은 이미 서명"을 얻을 것입니다. 유증은이 홈페이지로 리디렉션하여 로그인 페이지에 액세스 로그인 한 사용자 보호 할 수 있기 때문 의미가 있습니다. 로그인 한 후 바로 로그인 페이지를 다시로드하면이 문제가 될 겁니다.

   다음과 같이 고안는 사용하는 사람에 대한 내 솔루션 그래서 :

   # 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
   

   그래서 일반적으로, 특정 업체 (페이스 북, 트위터, 등)에 의해 반환 된 해시를 사용하여 사용자를 찾거나 생성 한 후, 우리는 고안 기능 sign_in_and_redirect를 호출 할 것입니다. 그러나 우리는 아직 (지금, 사용자가 팝업 창에서 현재, 기억) 우리는 그렇게 간단하게 사용자 sign_in 리디렉션 할 수 없습니다.

   다음은, 우리는 사용자가보기에 액세스하려고했던 URL을 통과해야, 우리는 after_sign_in_path_for 고안의 방법을 사용하여 해당 URL을 얻을 수 있습니다.

   마지막으로, 우리는 뷰를 렌더링 할 필요가있다. 우리는 일부 자바 스크립트를 호출 할 뷰를 사용하는 것이기 때문에, 우리는 우리를 진정되지로 끄도록 레이아웃을 렌더링 할 필요가 없다. 여기에 해당 뷰는 다음과 같습니다

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

   사용자가 로그인하고 올바른 플래시 메시지가 표시됩니다 후 적절한 URL로 리디렉션됩니다 이런 식으로.

   일부 테스트 후 나는 부록을하고 싶습니다 있도록이 솔루션은 자바 스크립트없이 인증을 허용하지 않는 것을 깨달았다.

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

   여기의 변화는 자바 스크립트를 사용하여 URL에 팝업라는 간단한 매개 변수를 추가한다. OmniAuth는 요청 URL에 추가 된 검색어 매개 변수를 저장하기 위해 친절하게도 될 것이다. 그래서 결국 우리는 컨트롤러에서 해당 PARAM을 확인합니다. 이 존재하는 경우 자바 스크립트가 활성화되어 때문입니다 :

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

   또한, 사용자가 로그인 동의하지 않는 경우라고하여 장애 조치를 위해 동일한 작업을 수행하는 것을 잊지 마세요.

   나는 크리스 종광의 솔루션없이이 작업을 수행 한 수 없게되고 .. 정말 감사합니다!

3. ==============================

   3.경우에 게시 그것은 다른 사람을 도움이됩니다. 크리스 종광의 답변을 사용했지만, 자바 스크립트의 마지막 비트가 새 창에서 링크를 닫는 문제로 달렸다. 예를 들어, 나는 사용자가 링크를 클릭하면 페이스 북에 내 사이트로 연결되는 링크를 게시하는 경우 새 윈도우 것 자동으로 종료 크롬 때문에의 조건은 검사 "만약 (window.opener)"

   경우에 게시 그것은 다른 사람을 도움이됩니다. 크리스 종광의 답변을 사용했지만, 자바 스크립트의 마지막 비트가 새 창에서 링크를 닫는 문제로 달렸다. 예를 들어, 나는 사용자가 링크를 클릭하면 페이스 북에 내 사이트로 연결되는 링크를 게시하는 경우 새 윈도우 것 자동으로 종료 크롬 때문에의 조건은 검사 "만약 (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. ==============================

   4.나는 쉽게 이후 페이스 북의 JS SDK를 사용하여 상처.

   나는 쉽게 이후 페이스 북의 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

from https://stackoverflow.com/questions/4491433/turn-omniauth-facebook-login-into-a-popup by cc-by-sa and MIT license