使用JavaScript SDK的Facebook登录错误：“重定向URI未列入白名单” [英] Facebook login with JavaScript SDK error: "redirect URI not whitelisted"

问题描述

客户端OAuth设置中的URL未列入白名单：由于重定向URI在应用程序的客户端OAuth设置中未列入白名单，因此此重定向失败。确保客户端和Web OAuth登录已启动，并将所有应用程序域添加为有效的OAuth重定向URI。

 <！DOCTYPE html> 
< html> 
< head> 
< title> Facebook登录JavaScript示例< / title> 
< meta charset =UTF-8> 
< / head> 
< body> 
< script> 
 //这是从FB.getLoginStatus（）的结果调用的。 
 function statusChangeCallback（response）{
 console.log（'statusChangeCallback'）; 
 console.log（response）; 
 //返回响应对象，其状态字段允许
 //应用程序知道该人的当前登录状态。 
 //对于FB.getLoginStatus（），可以在文档
 //中找到响应对象的完整文档。 
 if（response.status ==='connected'）{
 //登录到您的应用和Facebook。 
 testAPI（）; 
} else if（response.status ==='not_authorized'）{
 //该人登录到Facebook，但不是您的应用程序。 
 document.getElementById（'status'）。innerHTML ='请将'+ 
'记录到此应用程序中。 
} else {
 //该人没有登录到Facebook，所以我们不知道
 //他们是否登录到这个应用程序。 
 document.getElementById（'status'）。innerHTML ='请将'+ 
'记录在Facebook中。 
} 
} 
 
 //当用户完成登录
 // Button时，会调用此函数。请参阅下面的示例
 //代码中附加的onlogin处理程序。 
 function checkLoginState（）{
 FB.getLoginStatus（function（response）{
 statusChangeCallback（response）; 
}）; 
} 
 
 window.fbAsyncInit = function（）{
 FB.init（{
 appId：'XXXXXXXXXXXX'，
 cookie：true，//启用Cookie以允许服务器访问
 //会话
 xfbml：true，//解析此页面上的社交插件
版本：'v2.5'//使用版本2.2 
}）; 
 
 //现在我们已经初始化了JavaScript SDK，我们调用
 // FB.getLoginStatus（）。此函数获取访问此页面的
 //个人的状态，并可以将三种状态之一返回给
 //您提供的回调。他们可以是：
 // 
 // 1.登录到你的应用程序（'connected'）
 // 2.登录到Facebook，但不是你的应用程序（'not_authorized'）
 // 3.没有登录到Facebook，不知道他们是否登录到
 //你的应用程序。 
 // 
 //这三种情况在回调函数中处理。 
 
 FB.getLoginStatus（function（response）{
 statusChangeCallback（response）; 
}）; 
 
}; 
 
 //异步加载SDK 
（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'））; 
 
 //这里我们运行一个非常简单的Graph API测试，登录后是
 //成功。当进行此调用时，请参阅statusChangeCallback（）。 
 function testAPI（）{
 console.log（'Welcome！Fetching your information ....'）; 
 FB.api（'/ me'，function（response）{
 console.log（'success login for：'+ response.name）; 
 document.getElementById（'status'） .innerHTML = 
'感谢您登录，'+ response.name +'！'; 
}）; 
} 
< / script> 
 
<！ -  
下面我们包括Login Button社交插件。该按钮使用
 JavaScript SDK来呈现一个图形登录按钮，触发
 FB.login（）函数时单击。 
  - > 
 
< fb：login-button scope =public_profile，emailonlogin =checkLoginState（）;> 
< / fb：login-button> 
 
< div id =status> 
< / div> 
 
< / body> 
< / html> 
  

解决方案

你必须确保你已经注册了你的应用程序开发人员页

转到这里

对于facebook登录文档

去这里

然后，当您注册您的应用程序时，请确保您正在使用的任何URL作为重定向页面与您的应用程序相同发送也。

例如
http://example.com
不是，
http://www.example.com

要设置本地主机的网址，请参阅
此帖< a>

请确保您正在设置您的

  $ app_id =xxx; 
 $ app_secret =xxx; 
 $ my_url =http：// localhost：3080 / example.php;当您在Facebook的开发者页面上创建应用程序时，您的所有应用程序设置中指定的正确数据均为
  

$ b

尽可能的清楚。

转到您的应用页面，并在本地主机中输入页面的网址。
然后去你的代码，并添加完全相同的URL。

在应用设置中，

<$ p您的代码中的$ p> http：// localhost


  http：// localhost 
  

如果您的本地主机之间有一个端口号，

在应用程序设置中，

  http：// localhost：8080 
  

如果您的本地主机

在应用设置中有文件，

  http：//localhost/myfile.php 
  

p>

  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 
}）; 
}; 
 
 //异步加载SDK 
（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））; 
 
函数login（）{
 FB.login（function（response）{
 
 //处理响应
 console.log（Response这里！）; 
 
}，{scope：'read_stream，publish_stream，publish_actions，read_friendlists'}）; 
} 
 
函数logout（）{
 FB.logout（function（response）{
 //用户现在注销
}）; 
} 
 
 var status = FB.getLoginStatus（）; 
 
 console.log（status）; 
 
< / script> 
 
< button onclick =javascript：login（）;>登录Facebook< / button> 
 
< br> 
 
< button onclick =javascript：logout（）;>从Facebook注销< / button> 
  

I want my website to login with facebook but I am seeing this error.

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>

解决方案

You must make sure you have registered your app with the developer page Go here

For the facebook login docs Go here

Then when you register your app make sure whatever URL you are using as the redirect page is the same as your app is sending too.

For example http://example.com is not, http://www.example.com

To settup url as the local host refer to this post

Please make sure you are setting your

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

All to the correct data as specified inside your app settings when you create your app on facebook's developer page.

To make this as clear as possible.

Go to your app page and enter the url of the page in your localhost. Then go to your code and add the exact same url.

in app settings,

http://localhost

in your code

http://localhost

If there is a port number after your localhost,

in app settings,

http://localhost:8080

in your code

http://localhost:8080

If there is a file after your localhost

in app settings,

http://localhost/myfile.php

in your code

    http://localhost/myfile.php

Please try this code. replace your code with this code and do not forget to change the

YOUR_FACBEOOK_APP_ID

to your own.

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

这篇关于使用JavaScript SDK的Facebook登录错误：“重定向URI未列入白名单”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！