Facebook 应用开发认证和授权登录流程

前段时间由于工作需要，对fb授权登陆并获取对应的访问令牌（access_token）,即授权登陆！调研了facebook应用开发相关事项，阅读官方API文档， 并整理资料与大家分享。本文是关于facebook认证和授权方面的资料整理，结合自己的实际测试总结该文章，希望对大家有所帮助！

Facebook 平台使用OAuth2 协议作为认证和授权协议，它有两种认证流程，服务器端流程（Server-Sizde Flow）和客户端流程（Client-Side Flow)， 这些认证流程可被用于开发网站应用，移动应用或者桌面应用。

此文档使用用户登录的例子，概述了facebook支持的两种认证和授权流程，在这个例子，服务器端使用python-flask，客户端使用HTML/JavaScript（JS SDK）， 但是它们能够很方便地转换为其它的编程语言。 两种认证和授权流程，服务器端(server-side)和客户端（client-side)， 服务器端流程是由Web服务器调用Graph API完成认证和授权， 客户端流程是由客户端调用Graph API完成认证和授权， 例如使用运行在浏览器上的javascript或者本地移动应用或桌面应用。

无论使用何种流程，它都有几个步骤：用户认证、应用获得授权和应用认证。 用户认证保证用户的正确性， 应用授权保证用户准确知道他自己把什么数据和能力授权给了应用， 应用认证保证用户是把信息给了此应用而不是其它应用。一旦认证和授权完成，应用能够使用access token 访问用户的信息，并且作为用户的代表执行操作。

其中参考文档：

https://developers.facebook.com/docs/facebook-login
https://developers.facebook.com/docs/marketing-api/access/

一、服务端授权
本实例主要基于python-flask开发作为实操讲解,所有的回调的url都需要时https,回调测试url：https://test/main/home
redirect_uri回调url是需要预先配置在app的Facebook Login的 OAuth Redirect URIs里面, 即可信白名单！不然无法正常授权

• 1.用户前端页面点击某个授权按钮或者登陆按钮，会重定向到授权登陆页面：

https://www.facebook.com/v3.3/dialog/oauth?client_id={client_id}&redirect_uri={redirect_uri}&scope={scope}&response_type=code&state={state}

参数介绍：
client_id： facebook创建的应用程序ID
redirect_uri： 用户登录成功或者失败后，回调（重定向）地址，facebook验证带到浏览器保存的cookie信息，如果此时用户已经登录，则完成认证。如果没有登录，则返回下面的界面，用户填写信息后点击登录
scope： 权限列表，需要授权给该用户的权限集合，以逗号分隔，如：email,read_stream
state： 随机字符串，暂时不知道干啥用

• 2.登陆成功后会到权限确认页面，一旦确认就会重定向到redirect_uri指定路径，并在url路径后拼接code参数，code参数至关重要，由于后面的获取access_token需要code作为参数，且每次获取的code只能使用一次就会立刻失效！
• 3.根据前端的一系列操作得到code，一下就用来获取access_token:

https://graph.facebook.com/oauth/access_token?client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}&code={code}

参数介绍：
client_id： facebook创建的应用程序ID
client_secret： facebook创建的应用程序密钥
redirect_uri： 用户登录成功或者失败后，回调（重定向）地址，facebook验证带到浏览器保存的cookie信息，如果此时用户已经登录，则完成认证。如果没有登录，则返回下面的界面，用户填写信息后点击登录
code： 前面授权登陆获取的code数据

实例请求结果：

• 1.获取code

https://www.facebook.com/v3.3/dialog/oauth?client_id=client_id&redirect_uri=https://test/main/home&scope=ads_management,ads_read,email,public_profile,manage_pages,pages_show_list,publish_pages,business_management,pages_manage_cta&response_type=code&state=asaswqdcszq

结果：

https://graph.facebook.com/oauth/access_token?client_id=client_id&redirect_uri=https://test/main/home&client_secret=client_secret&code=AQAb9BtXhfQ0OsqTYyLZiuVgPKpMJI9gBRImU_xOwsv26vpXWap5yERv2kB1UgUSOzAoSsJ5w_8hqhlUDVAzeHAh7qlc6O8XrvtqlA5zFpgMLr1M06EXfK0M9T8Y38q3YjO1qmsmWh_BgL87ZKXZELBAWzCBe1MCY6cgbvaQ0kI0jdu7_SVCdRUHFPgZOW7A3RHta0MvQhbb1bhMgch51O7uXf6zIfATv4Tt7AbItKo9qCS5Ory9CozC4l2mqOMPIXtVrRRMy0ZZI75NNO7uycdO23E4plPy8NF8lx_nnadCy_63guD-M-Ush1_qRVJBT2sfnH_fzh9lpdCZ1CX5Rqiq

• 2.获取token

https://graph.facebook.com/oauth/access_token?client_id=client_id&redirect_uri=https://test/main/home&client_secret=client_secret&code=AQAb9BtXhfQ0OsqTYyLZiuVgPKpMJI9gBRImU_xOwsv26vpXWap5yERv2kB1UgUSOzAoSsJ5w_8hqhlUDVAzeHAh7qlc6O8XrvtqlA5zFpgMLr1M06EXfK0M9T8Y38q3YjO1qmsmWh_BgL87ZKXZELBAWzCBe1MCY6cgbvaQ0kI0jdu7_SVCdRUHFPgZOW7A3RHta0MvQhbb1bhMgch51O7uXf6zIfATv4Tt7AbItKo9qCS5Ory9CozC4l2mqOMPIXtVrRRMy0ZZI75NNO7uycdO23E4plPy8NF8lx_nnadCy_63guD-M-Ush1_qRVJBT2sfnH_fzh9lpdCZ1CX5Rqiq

结果：

{
    "access_token": "EAAY8lTqahuABAA91OO0mfZB0XZBOkJsKG6GykI2rZBBOEJcE5eBRkzZCtSx0Fry5Ax40EZBj6BdVG0QWhCE1ag7ZBCore5pRX7JbOpXOEjyYg7caAxHLssjajsdjsqmwnhfsxckKSA152266554sDhThh4gVNYAzHQH88bxKmT3xTGPSM",
    "token_type": "bearer"
}

授权登录

二、客户端授权
客户端授权主要采用JS sdk的授权方式进行授权。
这种回调url正常就是点击Continue with Facebook按钮的当前页面，下面这种做法不推荐，比较麻烦，如果不知道的话也可以查看点击登陆时会弹出一个登陆窗口，复制上面的url，然后找到fallback_redirect_uri后面的url就是授权回调url，其实就是当前页面的url！！
login-btn登陆前端源码：

<div class="fb-login-button" data-size="large" onlogin="checkLoginState()" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false" data-width=""></div>
<script>
  
  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      if (response.authResponse) {
           var access_token =   FB.getAuthResponse()['accessToken']; // get accessToken
           swal({   
              title: "授权登陆中!",   
              text: "请稍后...",  
              showConfirmButton: false 
          });
          // 存储access_token
           $.ajax({
                url: 'https://test/main/get_access_token',
                method: 'POST',
                data: {"access_token": access_token
                   },
                success:function(response){
                    window.location.href = '{{ url_for("main.home") }}'
                }
            })
         } else {
           console.log('User cancelled login or did not fully authorize.');
         }
    } else {                                 // Not logged into your webpage or we are unable to tell.
      // document.getElementById('status').innerHTML = 'Please log ' +
      //   'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{{ client_id }}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : 'v7.0',           // Use this Graph API version for this call.
    });

    // FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
    //   statusChangeCallback(response);        // Returns the login status.
    // });
  };

</script>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

点击按钮进行登录

授权登录