客户端/electron集成Facebook登录

本文记录下我的electron客户端软件集成Facebook登录，根据Facebook的开发文档来看，其他pc等端的（c/c++/c#等）客户端软件也可以集成该登录功能使用户快速登录。

• 所需SDK：无需；
• 流程概述：在客户端中使用webview类的组件库请求访问Facebook的URL，并带上必要参数，登录成功后回调跳转到特定url，客户端监听webview的URL变动，并提取其中的token/code，客户端通知服务端根据token/code获取相关信息完成登录；
• 参考文档：https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow
• 步骤：

1. 客户端中使用类似webview的组件访问Facebook的接口

   https://www.facebook.com/v4.0/dialog/oauth?client_id={app-id}
   &display=popup&response_type=token
   &redirect_uri=https://www.facebook.com/connect/login_success.html

   app-id换成在Facebook申请的应用的ID;
   示例代码如下：
    

   <webview v-if="showWebview" id="fb_webview" src="https://www.facebook.com/v4.0/dialog/oauth?
   client_id=8***********6&display=popup&response_type=token
   &redirect_uri=https://www.facebook.com/connect/login_success.html"
    style="position: fixed;width: 100%;height: 100%;z-index: 100;">
   </webview>

    

2. 回调跳转地址 redirect_uri=https://www.facebook.com/connect/login_success.html 固定为这个无需变动，成功后自动跳转到这个地址；webview监听到该url加载变动，获取整个URL，里面包含了code/token 等信息，发送给后端处理相关信息并鉴权，完成登录。
   示例代码如下：
    

   facebookLogin: function() {
     this.$loading(true);
     this.showWebview = true; // 显示webview，发送步骤1中的请求
   
     this.$nextTick(() => {
       var webview = document.getElementById('fb_webview');
   
       // 监听webview页面加载事件
       webview.addEventListener('dom-ready', () => {
         var url = webview.getURL(); // 获取URL
         if (this.accessToken) return;
   
         // 非login_success.html成功跳转则略过
         if (url.indexOf('login_success.html') === -1) return;
   
         // 提取URL中的token/code等信息
         var data = url ? url.match(/(\?|&|#)access_token=([^&]*)/i) : '';
         if (data && data.length >= 3) {
           this.accessToken = data[2];
         }
   
         this.showWebview = false;
         // 发送token到后端处理后续登录流程
         this.doLogin();
       });
     });
   }