7

Ich möchte meine Website mit Facebook anmelden, aber ich sehe diesen Fehler.Facebook Login mit JavaScript SDK Fehler: "Umleitung URI nicht auf der weißen Liste"

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

Wo wird Ihre URL deklariert? – wuno

+0

In der App. Site URL Abschnitt – user1844634

+0

Wenn Sie dies ausführen, erhalten Sie irgendwelche Fehler in der Konsole? – wuno

Antwort

7

Sie müssen sicherstellen, dass Sie Ihre App mit der Entwickler-Seite Go here

Für die Facebook Login docs registriert haben Go here

Dann, wenn Sie sich registrieren Ihre Anwendung stellen Sie sicher, was URL Sie verwenden, da die Weiterleitungsseite mit Ihrer App übereinstimmt.

Zum Beispiel http://example.com ist nicht, http://www.example.com

Url zum settup wie der lokale Host zu siehe this post

Bitte stellen Sie sicher, dass Sie Ihre

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

setzen auf die All Korrigieren Sie die in Ihren App-Einstellungen angegebenen Daten, wenn Sie Ihre App auf Facebook erstellen Entwickler-Seite.

Um dies so klar wie möglich zu machen.

Gehen Sie auf Ihre App-Seite und geben Sie die URL der Seite in Ihrem lokalen Host ein. Dann gehen Sie zu Ihrem Code und fügen Sie genau die gleiche URL hinzu.

in App-Einstellungen,

http://localhost 

im Code

http://localhost 

Wenn eine Portnummer nach dem localhost ist,

in App-Einstellungen,

http://localhost:8080 

in Ihrem Code

http://localhost:8080 

Wenn eine Datei nach dem localhost ist

in App-Einstellungen,

http://localhost/myfile.php 

im Code

http://localhost/myfile.php 

Bitte versuchen Sie diesen Code. Ersetzen Sie den Code mit diesem Code und nicht zu vergessen die

YOUR_FACBEOOK_APP_ID

auf eigene Faust zu ändern.

<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

Ich habe eine App registriert. Diese App ist live und läuft und nicht sicher, was ich verpasst habe. Es funktioniert nicht – user1844634

+0

Es klagt, dass die angegebene URL in den OAuth-Einstellungen des Clients nicht auf die weiße Liste gesetzt wurde: Diese Umleitung ist fehlgeschlagen, weil der Weiterleitungs-URI nicht in den OAuth-Einstellungen der App auf die weiße Liste gesetzt wurde. was ich tun muss – user1844634

+0

Ja ich benutze die richtige URL – user1844634

0

Ich habe das gleiche Problem. Für mich bestand die Lösung darin, sowohl WWW- als auch keine WWW-Versionen meiner Site in die OAuth-Client-Einstellungen zu übernehmen.

1

In meinem Fall, das Ändern der/etc/hosts-Datei zum Zuordnen von '127.0.0.1' zu etwas wie myapp.com - damit Ihre Anwendung eine "echte" URL hat, wurde das Problem behoben. Dasselbe gilt für "Gültige OAuth-Weiterleitungs-URIs" in den Client-OAuth-Einstellungen.

Verwandte Themen