Vue.js中Twitter第三方登入api實作[親測可用]

國際化的項目就會用用到一些第三方的登入api,這次記錄一下 Twitter 的!

demo 請狠狠的戳這裡  ​​http://download.lllomh.com/cliect/#/product/J416291190483324​​

按步驟來:

要注冊 Twitter 開發者賬号，這個要申請，稽核時間要好幾天。不過國内的手機注冊的幾乎都過不了稽核。看你運氣咯！

一:開發者平台配置

去Twitter 的開發者平台 建立一個App:

​​https://developer.twitter.com/en/apps​​

申請稽核通過之後就可以成功建立app了 如下

設定:

其中的回調位址是非常重要的, 這個跟代碼中的對應,也要跟​​https://auth-server.herokuapp.com/#signin​​ 代理中的對應才行,等下會說。

同時記得把 登入開關打開:

然後再找到api key 跟 api secret key:

代碼相關:

這要 用到的 就是1個KEY 跟回調位址 url 滾上圖一樣（回到位址要跟上圖開發者平台設定的一緻 三個地方要一緻,開發者平台, ​​server.herokuapp​​代理平台,視圖代碼配置）:

  API key:

接下來在 代理位址設定一下​​https://auth-server.herokuapp.com/#signin​​ 如圖： grant_url ：​​https://api.twitter.com/oauth/access_token​​

二:代碼部署

安裝 ：

代碼：

資訊: