[RUBY-ON-RAILS] 팝업으로 omniauth 페이스 북의 로그인을 돌려
RUBY-ON-RAILS팝업으로 omniauth 페이스 북의 로그인을 돌려
나는 레일에 omniauth 보석을 사용하고 있는데 사용자에 loging와 함께 잘 작동하지만, 매번 그것을 다음 FB 로그인 페이지로 이동합니다 당신을 리디렉션합니다. 즉 완료되면 부모 사업부를 대부분의 페이지가해야 할 일 및 팝업에서 FB 로그인을 보여 다음 다시로드 할 수있는 방법이 있는지 궁금했다. 어떤 아이디어?
감사!
해결법
-
==============================
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.좋아, 그래서 당신이 고안와 함께 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.경우에 게시 그것은 다른 사람을 도움이됩니다. 크리스 종광의 답변을 사용했지만, 자바 스크립트의 마지막 비트가 새 창에서 링크를 닫는 문제로 달렸다. 예를 들어, 나는 사용자가 링크를 클릭하면 페이스 북에 내 사이트로 연결되는 링크를 게시하는 경우 새 윈도우 것 자동으로 종료 크롬 때문에의 조건은 검사 "만약 (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.나는 쉽게 이후 페이스 북의 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
'RUBY-ON-RAILS' 카테고리의 다른 글
[RUBY-ON-RAILS] 어떻게 활성 링크를 표시 트위터 부트 스트랩 탐색을 얻으려면? (0) | 2020.02.10 |
---|---|
[RUBY-ON-RAILS] 더 하나 개의 속성보다 find_or_create_by 레일? (0) | 2020.02.10 |
[RUBY-ON-RAILS] 레일 / lib에 모듈과 (0) | 2020.02.10 |
[RUBY-ON-RAILS] 나는 그것을 제거에 무엇을 ". 응답 본문의 내용 길이를 결정할 수 없습니다 WARN"평균 얼마나됩니까? (0) | 2020.02.10 |
[RUBY-ON-RAILS] 열에서 선택 고유 한 값 : 레일 (0) | 2020.02.10 |