7

私のウェブサイトにはFacebookでログインしますが、このエラーが表示されます。JavaScriptのSDKログインエラー:「リダイレクトURIがホワイトリストに登録されていません」

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

あなたのURLはどこで宣言されていますか? – wuno

+0

アプリ内サイトURLセクション – user1844634

+0

これを実行すると、コンソールにエラーが表示されますか? – wuno

答えて

7

あなたはあなたがあなたのアプリを作る登録時 Go here

そして、Facebookのログインドキュメントについて開発者のページ Go here

とあなたのアプリを登録していることを確認しなければならないことを確認どんなURLリダイレクトページとして使用しているのは、アプリが送信しているものと同じです。例 http://example.com については

は、ローカルホストが this post

を参照して http://www.example.com

は、あなたがあなたの

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

すべてを設定していることを確認してくださいURLをsettupするには、ではありませんFacebookのアプリを作成するときにアプリ設定内で指定されたとおりのデータを修正する開発者ページ。

できるだけ明確にする。

アプリのページに移動して、ローカルホストにページのURLを入力します。 次にコードに行き、まったく同じURLを追加してください。あなたのコード内の

アプリの設定で

http://localhost 

http://localhost 

あなたのlocalhostの後にポート番号がある場合は、アプリの設定で

http://localhost:8080 

あなたのコードで

http://localhost:8080 

アプリの設定で、ローカルホスト

後のファイルがある場合は、あなたのコード

http://localhost/myfile.php 

http://localhost/myfile.php 

このコードを試してみてください。このコードを使用して、コードを交換し、あなた自身に

YOUR_FACBEOOK_APP_ID

を変更することを忘れないでください。

<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

私はアプリを登録しました。そのアプリケーションはライブで実行中で、私が逃したものは分かりません。 – user1844634

+0

URLがクライアントOAuth設定でホワイトリストに登録されていないと訴えます。このリダイレクトは、リダイレクトURIがアプリのクライアントOAuth設定でホワイトリストに登録されていないため失敗しました。何が必要なのですか – user1844634

+0

はい私は正しいURLを使用しています – user1844634

0

私は同じ問題を抱えています。 解決策は、私のサイトのWWW版とWWW版の両方をクライアントOAuth設定のホワイトリストに追加することでした。

1

私の場合は、/ etc/hostsファイルを変更して '127.0.0.1'をmyapp.comのようにマップして、アプリケーションに「実際の」URLがあるようにして問題を解決してください。 クライアントOAuth設定の[有効なOAuthリダイレクトURI]に同じものが追加されます。

関連する問題