Facebook OAuth "Non pris en charge" dans Chrome sur iOS

Le popup Facebook OAuth lance une erreur sur Chrome uniquement sur iOS. Les développeurs.facebook.com et google n'ont rien trouvé à ce sujet. Des idées?

Capture d'écran du popup de facebook sur mobile chrome sur ios

Vous pouvez utiliser la méthode de redirection comme suit pour ce cas (en détectant l'agent utilisateur en cours de chrome ios):

https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}

Voir plus d'informations ici https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/

Remarque: j'utilise personnellement le serveur OAuth dans ce cas, mais cela devrait faire l'affaire et c'est assez simple

C'est ainsi que je l'ai fait (en réglant iOS chrome spécifiquement)

 // 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'});

Voici une solution de rechange complète pour votre session FB JS Auth sur Chrome iOS http://seanshadmand.com/2015/03/06/facebook-js-login-on-chrome-ios-workaround/

JS fonctionne pour vérifier auth, ouvrir FB auth page manuellement et rafraîchir auth tokens sur la page d'origine une fois que vous avez terminé:

 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 }); } }); }

Et le gestionnaire d'ouvre-boîtes que l'authentification FB remonte et appelle un rafraîchissement sur la page principale. Notez la fenêtre.open dans Chrome iOS a également des bugs, alors appelez-le correctement comme indiqué ci-dessus:

 <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>

Mes 2 centimes à ce sujet car aucune des réponses n'était claire pour moi. Je lance la boîte de dialogue de connexion js sur un clic de bouton, alors maintenant, c'est chrome ios. Je vérifie d'abord si l'utilisateur est connecté à facebook et si je ne les envoie pas à la fenêtre de connexion. Le problème avec cela est que les utilisateurs de chome ios doivent cliquer sur le bouton de connexion deux fois s'ils ne sont pas connectés sur Facebook. S'ils sont connectés à Facebook, un clic suffit.

  $( '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'); } } });

Ce bit de code le fait fonctionner pour les utilisateurs de chrome ios. Sur la réponse de la poignée Je me charge simplement de la réponse de fb et l'envoie à mon site Web pour les utilisateurs de connexion / enregistrement.

 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); } };

J'espère que cela aide!

Pas une réponse réelle, mais en fonction de ce fil, il convient de noter que cela a commencé à fonctionner pour notre application, sur Chrome lorsque sur l'iPhone nous l'avons fait General>Reset>Reset Location & Privacy

J'ai eu une solution pour la connexion au site ios Facebook dans google chrome. En fait, le problème a été avec google chrome dans ios lorsque nous avons cliqué sur le bouton de connexion de Facebook, il donne null en interne à window.open dans ios chrome.
Il y a deux solutions soit pour vérifier qu'il s'agit de chrome dans ios (chrios), puis générer un écran de connexion personnalisé (encore pas le hasard qu'il nous corrige).
Deuxièmement, j'ai utilisé. Est-ce que l'utilisation de l'identifiant Facebook depuis l'arrière-plan, créez un coup de pouce qui remplira l'écran Facebook, puis, lorsque la connexion est terminée, il redirige vers votre serveur d'où vous redirigerez vers votre page Web avec des données Facebook.
Un autre avantage est que vous créez un site Web 2 pour le même propriétaire de site Web que vous ne pouvez pas configurer deux URL de site Web dans le compte de développeur de Facebook. De cette façon, vous pouvez créer plusieurs sites de connexion au Facebook avec le même appid de Facebook.

C'est un problème très fréquent que tous les développeurs ont rencontré lors de la mise en œuvre de la fonctionnalité de connexion FB. J'ai essayé la plupart des solutions Internet, mais aucune d'entre elles n'a fonctionné. Soit window.opener ne fonctionnent pas dans Chrome iOS, soit quelquefois l'objet FB n'est pas chargé lors de l'utilisation de /dialog/oauth .

Enfin, j'ai résolu cela par moi-même après avoir essayé tous les hacks!

 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' }); } }

Notez que ci-dessus, je passe un paramètre supplémentaire à l'URL de redirection, de sorte que, une fois que la nouvelle fenêtre s'ouvre avec la redirection précédente, j'ai pu lire les valeurs et dire que oui, cet appel provient de la fenêtre Chrome iOS. Assurez-vous également que ce code s'exécute en charge de la page.

 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); }