Facebook OAuth "Unsupported" in Chrome iOSで
Facebook OAuthポップアップはChromeではiOSのみでエラーをスローします。developers.facebook.comとgoogleの両方がこれについて何も明らかにしていません。アイデア？
この場合、リダイレクト方法を次のように使用できます（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 chrome具体的に修正）
// 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'});
以下に、完全な回避策を示します FB JS Auth on Chrome iOS issuehttp://seanshadmand.com/2015/03/06/facebook- js-login-on-chrome-ios-workaround /
JSは、認証を確認し、FB認証ページを手動で開き、完了したら元のページの認証トークンを更新するように機能します。
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認証が転送し、メインページの更新を呼び出すOpenerハンドラー。 window.open in Chrome iOSにもバグがあるため、上記のように正しく呼び出してください。
<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>
答えの誰も私には明らかではなかったので、これに関する私の2セント。ボタンクリックでログインjsダイアログを起動するので、chrome iosの場合、まずユーザーがFacebookにログインしているかどうかを確認し、そうでない場合はログインウィンドウに送信します。これは、iOSのchomeユーザーがfacebookにログインしていない場合、接続ボタンを2回クリックする必要があることです。
$( 'body' ).on( 'click', '.js-fbl', function( e ) {
e.preventDefault();
if( navigator.userAgent.match('CriOS') ) {
// alert users they will need to click again, don't use alert or popup will be blocked
$('<p class="fbl_error">MESSAGE HERE</p>').insertAfter( $(this));
FB.getLoginStatus( handleResponse );
} else {
// regular users simple login
try {
FB.login( handleResponse , {
scope: fbl.scopes,
return_scopes: true,
auth_type: 'rerequest'
});
} catch (err) {
$this.removeClass('fbl-loading');
}
}
});
このコードは、chrome iosユーザー。応答を処理する際にfb応答を処理し、ログイン/登録ユーザーのWebサイトバックエンドに送信します。
var handleResponse = function( response ) {
var $form_obj = window.fbl_button.parents('.flp_wrapper').find('form') || false,
$redirect_to = $form_obj.find('input[name="redirect_to"]').val() || window.fbl_button.data('redirect');
/**
* If we get a successful authorization response we handle it
*/
if (response.status == 'connected') {
var fb_response = response;
/**
* Make an Ajax request to the "facebook_login" function
* passing the params: username, fb_id and email.
*
* @note Not all users have user names, but all have email
* @note Must set global to false to prevent gloabl ajax methods
*/
$.ajax({...});
} else {
//if in first click user is not logged into their facebook we then show the login window
window.fbl_button.removeClass('fbl-loading');
if( navigator.userAgent.match('CriOS') )
window.open('https://www.facebook.com/dialog/oauth?client_id=' + fbl.appId + '&redirect_uri=' + document.location.href + '&scope=email,public_profile', '', null);
}
};
それが役に立てば幸い！
実際の答えではありませんが、 このスレッド 私たちのアプリで動作を開始することに注意する価値があります。Chrome iPhoneでGeneral>Reset>Reset Location & Privacy
Google chromeでiOSのFacebook Webサイトにログインするためのソリューションを得ました。実際、この問題はiOSのgoogle chromeにあり、facebookのログインボタンをクリックすると、ios chromeのwindow.openに内部的にnullが与えられます。
Thereは、ios（chrios）のchromeであることを確認し、カスタムログイン画面を生成する2つのソリューションです（まだ修正する可能性はありません）。
Second使用したもの。バックハンドからフェイスブックログインを使用して、APIヒットを作成するとフェイスブック画面に表示され、ログインが完了すると、フェイスブックデータを使用してWebサイトページにリダイレクトする場所からサーバーにリダイレクトされます。
他の1つの利点同じウェブサイト所有者に2つのウェブサイトを作成することです。facebook開発者アカウントに2つのウェブサイトURLを設定することはできません。同じfacebook appid。
これは、FBログイン機能の実装中にすべての開発者が直面した非常に一般的な問題です。ほとんどのインターネットソリューションを試しましたが、どれも機能しませんでした。 window.openerは、Chrome iOSで動作しないか、/dialog/oauthの使用中にFBオブジェクトがロードされないことがあります。
最後に、すべてのハックを試した後、自分でこれを解決しました！
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'
});
}
}
上記のリダイレクトuriに新しいウィンドウが開いたら値を読み取って、この呼び出しがChrome iOS windowまた、このコードがページの読み込み時に実行されることを確認してください。
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);
}