58

私はrailsでomniauthgemを使用しており、ユーザーのログインでうまく機能しますが、fbログインページに移動するたびにリダイレクトされます。ほとんどのページが行うことを実行し、ポップアップにfbログインを表示し、それが完了したら親divをリロードする方法があるかどうか疑問に思いました。何か案は？

ありがとう！

4

4 に答える 4

125

もちろん、簡単にできます。

あなたの見解では：

=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が有効になっていない場合も、正常に機能が低下します。

于 2010-12-29T00:54:49.783 に答える
29

わかりました。OmniAuthをDeviseと組み合わせて使用​​している場合、ChrisHealdのソリューションに問題があります。問題は、（ログインページにある）ウィンドウをリロードすると、DeviseがアクセスしようとしたURLを完全に無視してroot_pathに移動し、「すでにサインインしています」というエラーメッセージが表示されることです。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を渡す必要があり、Deviseのメソッドを使用してそのURLを取得できます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);
}

ここでの変更は、popupJavaScriptを使用してURLに呼び出される単純なパラメーターを追加することです。OmniAuthは、リクエストURLに追加されたクエリパラメータを保存するのに十分親切です。最後に、コントローラーでそのパラメーターを確認します。存在する場合は、JavaScriptが有効になっているためです。

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

failureまた、ユーザーがログインを受け入れない場合に呼び出されるアクションに対しても同じことを行うことを忘れないでください。

クリス・ヒールドの解決策がなければ、これを行うことはできなかったので、..どうもありがとうございました！

于 2012-03-06T21:27:11.347 に答える
4

他の人に役立つ場合に備えて投稿します。私はChrisHealdの答えを使用していましたが、新しいウィンドウリンクを閉じるjavascriptの最後のビットで問題が発生しました。たとえば、自分のサイトへのリンクをFacebookに投稿した場合、ユーザーがリンクをクリックすると、条件が「if（window.opener）」のみをチェックするため、Chromeでは新しいウィンドウが自動的に閉じます。

最終的に、グローバル変数（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()
}
});
于 2012-06-28T17:59:08.650 に答える
3

FacebookのJSSDKの方が簡単なので、結局使用しました。

# 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" %>

これは、SergioGutierrezのヒントから直接引用しています-https://coderwall.com/p/bsfitw

于 2014-02-20T22:06:35.223 に答える