第三方登入 - Facebook JavaScript SDK + Vue.js

最近刚好有用到 Facebook 的第三方登入，于是就顺便记录一下流程，防止我自己忘记XD

FB 开发者帐号与设定

首先要先去FB官方注册开发者帐号，然后建立自己的应用程式

填入相关资讯

点击设定 Facebook 登入

设定网址完成后跳至基本资料

填入基本资料后切换为上线模式

接下来是最重要的步骤，填入重新导向的 URL，这边填入使用到 SDK 的页面网址，可以填入多个，这边如果要填入本地端网址，也就是 https://localhost:3000/ 之类的记得使用 https，如果是 http 则无法新增，如果想知道本地端如何加上 https 的话可以看这边

以上都设定好后就可以来看 code 了~

嵌入页面

首先到快速入门的页面，可以看到它要我们将一段 code 贴到页面内，这段 code 便是载入 SDK 用的，这边载入可以写在 layout 或是单一页面，看个人的设计

export default {  created() {    // 防止重複载入    if (!window.FB) {      window.fbAsyncInit = function() {        FB.init({          appId: "{your-app-id}", // 填入自己 app 的 id          cookie: true,          xfbml: true,          version: "{api-version}" // 目前版本        });      };      (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 = "https://connect.facebook.net/en_US/sdk.js";        fjs.parentNode.insertBefore(js, fjs);      })(document, "script", "facebook-jssdk");    }  }};

这样便将 SDK 载入完成了

方法介绍

官方这边介绍了基本的状态与方法，以下一一介绍

状态

获取登入状态后 Facebook 会回传以下格式

{  status: "connected",  authResponse: {      accessToken: "{access-token}",      expiresIn: "{unix-timestamp}",      reauthorize_required_in: "{seconds-until-token-expires}",      signedRequest: "{signed-parameter}",      userID: "{user-id}"  }}

status 共有以下三种状态

connected：用户已登入 Facebook，也已登入网站not_authorized：用户已登入 Facebook，但尚未登入网站unknown：用户未登入 Facebook，所以无法得知状态

authResponse 基本上就是各种资料，较不重要

accessToken：用户的 tokenexpiresIn：用户登入的到期时间reauthorize_required_in：登入到期且用户需重新登入的时间signedRequest：以签署的参数userID：用户编号

方法

FB.getLoginStatus()：获得用户的登入状态FB.login(callback, {scope})：让用户登入并授权，scope 可参考官方权限FB.logout()：登出用户FB.api(path, method, params, callback)：因为 Facebook 为 Graph API，所以比较複杂一些，详细可参考官方，这边介绍几个比较常用的FB.api("/me?fields=name,id,email", callback)：获取个人资料，参数接在问号后方，一样可参考官方权限FB.api("/me/permissions", "DELETE", callback)：删除授权，用户 status 须为 connected

Demo

这边 demo 一下登入、登出与获取个人资料的部份～

export default {  methods: {    login() {      const vm = this;      // 检查登入状态      FB.getLoginStatus(function(response) {        // 登入状态 - 已登入        if (response.status === "connected") {          // 获取用户个人资料          vm.getProfile();        } else {          // 登入状态 - 未登入          // 用户登入(确认授权)          FB.login(            function(res) {              // 获取用户个人资料              vm.getProfile();            },            // 授权 - 个人资料&Email            { scope: "public_profile,email" }          );        }      });    },    logout() {      // 检查登入状态      FB.getLoginStatus(function(response) {        // 检查登入状态        if (response.status === "connected") {          // 移除授权          FB.api("/me/permissions", "DELETE", function(res) {            // 用户登出            FB.logout();          });        } else {          // do something        }      });    },    getProfile() {      FB.api("/me?fields=name,id,email", function(res) {        // do something      });    }  },  created() {    // 防止重複载入    if (!window.FB) {      window.fbAsyncInit = function() {        FB.init({          appId: "{your-app-id}", // 填入自己 app 的 id          cookie: true,          xfbml: true,          version: "{api-version}" // 目前版本        });      };      (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 = "https://connect.facebook.net/en_US/sdk.js";        fjs.parentNode.insertBefore(js, fjs);      })(document, "script", "facebook-jssdk");    }  }};

结语

用第三方登入真的是考验自己读文件的能力，再加上 Facebook 的文件有些地方写的实在没有很优，只能硬着读加上多多爬文了，相信以后用其他的第三方登入应该还是会卡关吧XD，继续加油！