前段時間公司有個需求需要使用facebook登錄網(wǎng)站，但是一直都是做國內的網(wǎng)站，幸好自己搭好了現(xiàn)成的梯子，只有硬著頭皮上了，注意博主使用的vue-cli開發(fā)

第一步 在facebook注冊你的應用

網(wǎng)址：[facebook開發(fā)者]
(https://developers.facebook.com/apps/)

注冊新應用

博主在這里遇到一個小坑，電腦上OAuth驗證無法加載圖片，后面在手機上才得以搞定，這里就預示了后面的一個小bug

添加產品的時候選擇facebook登錄

獲得應用編號

添加url白名單

這里有個大坑，facebook開始限制https才能訪問，后面會敘述如何解決

第二步 使用hello.js登錄

附上官網(wǎng)地址 hello.js

開始的時候一直遵循官方提供的步驟流程走，但是奈何遇到許多問題，在vue中不方便處理，后面發(fā)現(xiàn)一款hello.js，不僅可以使用facebook登錄，還有google，twitter等等

首先 npm install hellojs

下面是一些核心代碼

登錄按鈕

引入插件，并且初始化，init的時候填入的就是我們在facebook注冊的應用編號

注冊方法

使用方法官網(wǎng)已經描述的很清楚了，有個地方調用hello.api，只需要.api("方法")就能使用啦
在Vue中添加Facebook、Twitter、vkontakte三方登錄我也是從這篇博文上參考的( ? ?ω?? )?

第三步 解決https

相信大部分人都是在本地開發(fā)，url都是localhost:8080什么的，但是facebook現(xiàn)在是禁止http跳轉的，這里我推薦一款軟件ngrok，反向代理

網(wǎng)址：ngrok官網(wǎng)

首先在官網(wǎng)下載，然后本地安裝什么的就略過了，下一步就好了

監(jiān)聽8080端口

成功監(jiān)聽

前提是咱們讓自己的代碼跑起來，這里有個 https://6d6331f4.ngrok.io -> localhost:8080 ，沒錯，這就是我們需要的，但是又發(fā)現(xiàn)輸入網(wǎng)址后，報Invalid Host header錯誤，坑啊，其實需要去更改下webpack就好了

image.png

在build的webpack.dev.conf.js文件下，添加如下代碼

image.png

成功訪問

這個時候，https://6d6331f4.ngrok.io這個網(wǎng)址就能成功訪問了，而且內容都是我們原網(wǎng)址的，在手機上也能訪問哦，前提是同一局域網(wǎng)哈

返回信息

至此，已經可以成功拿到facebook返回的信息了，這里的picture其實就是頭像，但是這個頭像地址博主的電腦拿不到，但是手機可以，和OAuth驗證一樣，很奇怪