7

Desidero che il mio sito Web effettui l'accesso con Facebook ma vedo questo errore.Accesso Facebook con errore JavaScript SDK: "URI di reindirizzamento non inserito nella whitelist"

Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

<!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> 
+0

Dove viene dichiarato il tuo url? – wuno

+0

Nell'app. Sezione URL del sito – user1844634

+0

Quando si esegue questo si verificano errori nella console? – wuno

risposta

7

È necessario assicurarsi di aver registrato la vostra applicazione con la pagina sviluppatore Go here

Per la documentazione Facebook Login Go here

Poi, quando si registra l'app assicurarsi che qualsiasi URL stai usando come la pagina di reindirizzamento è uguale a quella che l'app sta inviando.

Per esempio http://example.com non è, http://www.example.com

Per settup URL come host locale si riferiscono a this post

Si prega di assicurarsi che si sta impostando una

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

Tutto al dati corretti come specificato nelle impostazioni dell'app quando crei la tua app su Facebook pagina dello sviluppatore.

Per rendere questo più chiaro possibile.

Vai alla pagina della tua app e inserisci l'url della pagina nel tuo localhost. Quindi vai al tuo codice e aggiungi lo stesso URL.

nelle impostazioni di app,

http://localhost 

nel codice

http://localhost 

Se v'è un numero di porta dopo che il localhost,

nelle impostazioni di app,

http://localhost:8080 

nel tuo codice

http://localhost:8080 

Se c'è un file dopo il vostro localhost

nelle impostazioni di app,

http://localhost/myfile.php 

nel codice

http://localhost/myfile.php 

Si prega di provare questo codice. sostituire il codice con questo codice e non dimenticare di cambiare il

YOUR_FACBEOOK_APP_ID

al proprio.

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

Ho registrato un'app. quell'app è live e in esecuzione e non è sicura di ciò che ho perso. Non funziona – user1844634

+0

Si lamenta che l'URL specificato non è autorizzato nelle Impostazioni OAuth del client: questo reindirizzamento non è riuscito perché l'URI di reindirizzamento non è autorizzato nelle Impostazioni OAuth client dell'app. cosa devo fare – user1844634

+0

Sì sto usando l'url corretto – user1844634

0

Ho lo stesso problema. Per me la soluzione era aggiungere le versioni WWW e no-WWW del mio sito alla whitelist nelle Impostazioni OAuth del client.

1

Nel mio caso, la modifica del file/etc/hosts per mappare '127.0.0.1' su qualcosa come myapp.com - in modo che l'applicazione abbia un URL "reale", ha risolto il problema. Lo stesso deve essere aggiunto a "URI di reindirizzamento OAuth validi" nelle Impostazioni OAuth client.

Problemi correlati