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​​

二:代码部署

安装 ：

代码：

信息: