Facebook OAuth ポップアップは、iOS の Chrome でのみエラーをスローします。developers.facebook.com と google の両方が、これについて何も明らかにしていません。アイデア?
7 に答える
この場合、リダイレクト方法を次のように使用できます (ユーザー エージェントが chrome ios であることを検出することにより)。
https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}
ここで詳細情報を参照してください https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/
備考:その場合、私は個人的にサーバーOAuthを使用しますが、これはうまくいくはずであり、非常に簡単です
これが私がやった方法です(具体的にはiOSクロムを修正しています)
// fix iOS Chrome
if( navigator.userAgent.match('CriOS') )
window.open('https://www.facebook.com/dialog/oauth?client_id='+appID+'&redirect_uri='+ document.location.href +'&scope=email,public_profile', '', null);
else
FB.login(null, {scope: 'email,public_profile'});
これは、 Chrome iOS の問題での FB JS Auth の完全な回避策ですhttp://seanshadmand.com/2015/03/06/facebook-js-login-on-chrome-ios-workaround/
認証を確認し、FB 認証ページを手動で開き、完了したら元のページの認証トークンを更新する JS 関数:
function openFBLoginDialogManually(){
// Open your auth window containing FB auth page
// with forward URL to your Opened Window handler page (below)
var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
var scope = "&scope=public_profile,email,user_friends";
var url = "https://www.facebook.com/dialog/oauth?client_id=" + FB_ID + redirect_uri + scope;
// notice the lack of other param in window.open
// for some reason the opener is set to null
// and the opened window can NOT reference it
// if params are passed. #Chrome iOS Bug
window.open(url);
}
function fbCompleteLogin(){
FB.getLoginStatus(function(response) {
// Calling this with the extra setting "true" forces
// a non-cached request and updates the FB cache.
// Since the auth login elsewhere validated the user
// this update will now asyncronously mark the user as authed
}, true);
}
function requireLogin(callback){
FB.getLoginStatus(function(response) {
if (response.status != "connected"){
showLogin();
}else{
checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
// Check FB tokens against your API to make sure user is valid
});
}
});
}
そして、FB 認証が転送し、メイン ページの更新を呼び出すオープナー ハンドラー。Chrome iOS の window.open にもバグがあることに注意してください。上記のように正しく呼び出してください。
<html>
<head>
<script type="text/javascript">
function handleAuth(){
// once the window is open
window.opener.fbCompleteLogin();
window.close();
}
</script>
<body onload="handleAuth();">
<p>. . . </p>
</body>
</head>
</html>
本当の答えではありませんが、注目に値するこのスレッドに基づいて、私たちのアプリで機能し始めました。iPhone で行ったときに Chrome でGeneral>Reset>Reset Location & Privacy
これは、FB ログイン機能を実装する際にすべての開発者が直面する非常に一般的な問題です。ほとんどのインターネット ソリューションを試しましたが、どれも機能しませんでした。window.opener
Chrome iOS で動作しないか、使用中に FB オブジェクトがロードされないことがあります/dialog/oauth
。
最後に、すべてのハックを試した後、これを自分で解決しました!
function loginWithFacebook()
{
if( navigator.userAgent.match('CriOS') )
{
var redirect_uri = document.location.href;
if(redirect_uri.indexOf('?') !== -1)
{
redirect_uri += '&back_from_fb=1';
}
else
{
redirect_uri += '?back_from_fb=1';
}
var url = 'https://www.facebook.com/dialog/oauth?client_id=[app-id]&redirect_uri='+redirect_uri+'&scope=email,public_profile';
var win = window.open(url, '_self');
}
else
{
FB.login(function(response)
{
checkLoginState();
},
{
scope:'public_profile,email,user_friends,user_photos'
});
}
}
上記のリダイレクト URL に追加のパラメーターを渡していることに注意してください。これにより、上記のリダイレクト URI で新しいウィンドウが開くと、値を読み取ることができ、この呼び出しは Chrome iOS ウィンドウからのものであると言うことができます。また、このコードがページの読み込み時に実行されることを確認してください。
if (document.URL.indexOf('back_from_fb=1') != -1 && document.URL.indexOf('code=') != -1)
{
pollingInterval = setInterval(function()
{
if(typeof FB != "undefined")
{
FB.getLoginStatus(function(response) {}, true);
checkLoginState();
}
else
{
alert("FB is not responding, Please try again!", function()
{
return true;
});
}
}, 1000);
}