web-dev-qa-db-fra.com

Identifiant Facebook avec erreur JavaScript SDK: "URL de redirection non répertoriée"

Je veux que mon site Web se connecte avec Facebook mais je vois cette erreur.

L'URL donnée n'est pas sur liste blanche dans les paramètres OAuth du client: Cette redirection a échoué car l'URI de redirection n'est pas sur la liste blanche dans les paramètres OAuth du client de l'application. Assurez-vous que les connexions Client et Web OAuth sont activées et ajoutez tous vos domaines d'application en tant qu'URI de redirection OAuth valide.

<!DOCTYPE html>
    <html>
    <head>
    <title>Facebook Login JavaScript Example</title>
    <meta charset="UTF-8">
    </head>
    <body>
    <script>
      // This is called with the results from from FB.getLoginStatus().
      function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        // The response object is returned with a status field that lets the
        // app know the current login status of the person.
        // Full docs on the response object can be found in the documentation
        // for FB.getLoginStatus().
        if (response.status === 'connected') {
          // Logged into your app and Facebook.
          testAPI();
        } else if (response.status === 'not_authorized') {
          // The person is logged into Facebook, but not your app.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
        } else {
          // The person is not logged into Facebook, so we're not sure if
          // they are logged into this app or not.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
        }
      }

      // This function is called when someone finishes with the Login
      // Button.  See the onlogin handler attached to it in the sample
      // code below.
      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }

      window.fbAsyncInit = function() {
      FB.init({
          appId: 'XXXXXXXXXXXX',
        cookie     : true,  // enable cookies to allow the server to access 
                            // the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.5' // use version 2.2
      });

      // Now that we've initialized the JavaScript SDK, we call 
      // FB.getLoginStatus().  This function gets the state of the
      // person visiting this page and can return one of three states to
      // the callback you provide.  They can be:
      //
      // 1. Logged into your app ('connected')
      // 2. Logged into Facebook, but not your app ('not_authorized')
      // 3. Not logged into Facebook and can't tell if they are logged into
      //    your app or not.
      //
      // These three cases are handled in the callback function.

      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });

      };

      // Load the SDK asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      // Here we run a very simple test of the Graph API after login is
      // successful.  See statusChangeCallback() for when this call is made.
      function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
          console.log('Successful login for: ' + response.name);
          document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
        });
      }
    </script>

    <!--
      Below we include the Login Button social plugin. This button uses
      the JavaScript SDK to present a graphical Login button that triggers
      the FB.login() function when clicked.
    -->

    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
    </fb:login-button>

    <div id="status">
    </div>

    </body>
    </html>
facebookfacebook-graph-apifacebook-javascript-sdkfacebook-login
8
user1844634

Vous devez vous assurer que vous avez enregistré votre application sur la page du développeur Allez ici

Pour les documents de connexion facebook Allez ici

Ensuite, lorsque vous enregistrez votre application, assurez-vous que l'adresse URL que vous utilisez en tant que page de redirection est identique à celle utilisée par votre application. 

Par exemple, __. http://example.com N'est pas, http://www.example.com

Pour régler l’URL en tant qu’hôte local, reportez-vous à this post

S'il vous plaît assurez-vous que vous configurez votre 

$app_id = "xxx"; 
$app_secret = "xxx"; 
$my_url ="http://localhost:3080/example.php";

Toutes les données correctes spécifiées dans les paramètres de votre application lorsque vous créez votre application sur la page de développement de Facebook.

Pour rendre cela aussi clair que possible. 

Allez sur la page de votre application et entrez l'URL de la page dans votre hôte local ..__ puis accédez à votre code et ajoutez la même URL exacte.

dans les paramètres de l'application,

http://localhost

dans votre code 

http://localhost

S'il y a un numéro de port après votre localhost, 

dans les paramètres de l'application,

http://localhost:8080

dans votre code 

http://localhost:8080

S'il y a un fichier après votre localhost 

dans les paramètres de l'application,

http://localhost/myfile.php

dans votre code 

    http://localhost/myfile.php

S'il vous plaît essayez ce code. remplacez votre code par ce code et n'oubliez pas de changer le 

YOUR_FACBEOOK_APP_ID 

à la vôtre.

  <div id="fb-root"></div>

    <script>
    window.fbAsyncInit = function() {
            FB.init({
            appId: 'xxxxxxxxxxxxx',
            status: true,
            cookie: true,
            xfbml: true
        });
    };

    // Load the SDK asynchronously
    (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
    }(document));

    function login() {
        FB.login(function(response) {

        // handle the response
        console.log("Response goes here!");

        }, {scope: 'read_stream,publish_stream,publish_actions,read_friendlists'});            
    }

    function logout() {
        FB.logout(function(response) {
          // user is now logged out
        });
    }

    var status = FB.getLoginStatus();

    console.log(status);

    </script>

    <button onclick="javascript:login();">Login Facebook</button>

    <br>

    <button onclick="javascript:logout();">Logout from Facebook</button>
7
wuno

Dans mon cas, la modification du fichier/etc/hosts pour mapper "127.0.0.1" vers quelque chose comme myapp.com - afin que votre application ait une "vraie" URL, a résolu le problème. Idem à ajouter à "URI de redirection OAuth valides" dans les paramètres OAuth du client.

1
Shilpa

J'ai le même problème. Pour moi, la solution consistait à ajouter les versions WWW et non-WWW de mon site à la liste blanche dans les paramètres OAuth du client.

0
seeder