google auth2.signIn（）ウィンドウがユーザーによって閉じられているかどうかを確認するにはどうすればよいですか？

Question

Imこれを使用して認証を実装しています。ユーザーがボタンをクリックしてサインインしてauth2アカウントの選択/ログインウィンドウが表示されたときに、現在Reactに読み込みアイコンが表示されています。

しかし、ユーザーがウィンドウを閉じると、何かイベントが発生していないようです。すなわち、約束を返すsignIn（）関数です。ウィンドウが閉じていると、Googleがこの約束のエラーを返すと思います。その結果、ローダーアイコンの表示を停止してログインメニューを再表示する方法はありません。

誰にも解決策があるのだろうか？

Answer 1

APIは、ユーザーが[拒否]ボタンをクリックしたときを検出するメカニズムを提供しますが、ユーザーが突然ポップアップウィンドウを閉じた（またはWebブラウザを終了した、等々）。 拒否条件は、範囲を狭めてユーザーに再度プロンプトを表示する場合（たとえば、「電子メール」を要求したがプロファイルのみが必要で、ユーザーに電子メールを送信せずに続行させる場合など）に提供されます。

function onSignInCallback(authResult) { 
    if (authResult['error'] && authResult['error'] == 'access_denied') { 
    // User explicitly denied this application's requested scopes 
    } 
} 

あなたは窓があったかどうかを検出することなく、サインインを実装することができるはずです。

サインインコールバックからの応答がエラーが含まれている場合は、access_denied、それはユーザーがボタンを否定クリックを示しています閉まっている;これは実質的にall of the Google+ sample appsに示されています。つまり、スピナーを使用しないでください。ユーザーが正常にログインするまで認証されたUIを非表示にする必要があります。

ポップアップクローズの検出を実装することは推奨されませんが、

var lastOpenedWindow = undefined; 
window.open = function (open) { 
    return function (url, name, features) { 
     // set name if missing here 
     name = name || "default_window_name"; 
     lastOpenedWindow = open.call(window, url, name, features); 
     return lastOpenedWindow; 
    }; 
}(window.open); 

var intervalHandle = undefined; 
function detectClose() { 
    intervalHandle = setInterval(function(){ 
    if (lastOpenedWindow && lastOpenedWindow.closed) { 
     // TODO: check user was !authenticated 
     console.log("Why did the window close without auth?"); 
     window.clearInterval(intervalHandle); 
    } 
    }, 500); 
} 

注私はそれを実現してきたように、この機構は競合状態に信頼性がないと対象であること：detect in window.unloadそして、グローバルwindow.open呼び出しをオーバーライドしたり、ウィンドウがユーザ認証なしに閉鎖されたかどうかをポーリングするようにあなたが何かを行うことができます。

Answer 2

Google OAuth 2.0ウィンドウを呼び出すコードを変更しようとしています。
Google OAuthのエラー結果をカバーする余分なAJAXメソッドを追加するだけで済みます。これだ、これと

gapi.auth2.getAuthInstance().signIn() 

変更して、

gapi.auth2.getAuthInstance().signIn().then(function(response){ 
    //If Google OAuth 2 works fine 
    console.log(response); 
}, function(error){ 
    //If Google OAuth 2 occured error 
    console.log(error); 
    if(error.error === 'popup_closed_by_user'){ 
     alert('Oh Dude, Why you close authentication user window...!'); 
    } 
}); 

...

GoogleのOAuth 2.0の情報についての詳細は、このリンクを訪問することができます。
https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests
のJavaScriptのサンプルコード：
https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html