前段时间公司有个需求需要使用facebook登录网站，但是一直都是做国内的网站，幸好自己搭好了现成的梯子，只有硬着头皮上了，注意博主使用的vue-cli开发
第一步 在facebook注册你的应用
网址：[facebook开发者]
(https://developers.facebook.com/apps/)
博主在这里遇到一个小坑，电脑上OAuth验证无法加载图片，后面在手机上才得以搞定，这里就预示了后面的一个小bug
添加产品的时候选择facebook登录
这里有个大坑，facebook开始限制https才能访问，后面会叙述如何解决
第二步 使用hello.js登录
附上官网地址 hello.js
开始的时候一直遵循官方提供的步骤流程走，但是奈何遇到许多问题，在vue中不方便处理，后面发现一款hello.js，不仅可以使用facebook登录，还有google，twitter等等
首先 npm install hellojs
下面是一些核心代码
使用方法官网已经描述的很清楚了，有个地方调用hello.api，只需要.api("方法")就能使用啦
在Vue中添加Facebook、Twitter、vkontakte三方登录我也是从这篇博文上参考的( • ̀ω•́ )✧
第三步 解决https
相信大部分人都是在本地开发，url都是localhost:8080什么的，但是facebook现在是禁止http跳转的，这里我推荐一款软件ngrok，反向代理
网址：ngrok官网
首先在官网下载，然后本地安装什么的就略过了，下一步就好了
前提是咱们让自己的代码跑起来，这里有个 https://6d6331f4.ngrok.io -> localhost:8080 ，没错，这就是我们需要的，但是又发现输入网址后，报Invalid Host header错误，坑啊，其实需要去更改下webpack就好了
在build的webpack.dev.conf.js文件下，添加如下代码
这个时候，https://6d6331f4.ngrok.io这个网址就能成功访问了，而且内容都是我们原网址的，在手机上也能访问哦，前提是同一局域网哈
至此，已经可以成功拿到facebook返回的信息了，这里的picture其实就是头像，但是这个头像地址博主的电脑拿不到，但是手机可以，和OAuth验证一样，很奇怪
