Vue.js怎么实现推特Twitter登录? |
您所在的位置：网站首页 › 推特咋样登录 › Vue.js怎么实现推特Twitter登录? |
Vue.js怎么实现推特Twitter登录?
|
国际化的项目就会用用到一些第三方的登录api,这次记录一下 Twitter 的! 按步骤来: 要注册 Twitter 开发者账号，这个要申请，审核时间要好几天。不过国内的手机注册的几乎都过不了审核。看你运气咯！ demo 请狠狠的戳这里 http://download.lllomh.cn/cliect/#/product/J416291190483324 一:开发者平台配置去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: twitterApp:{ twitter_api_key:'REm8aKjWsthmKXZoVIYXdNn1quy',//mytest :5000 callbackUri: 'http://localhost:5000/' },
接下来在 代理地址设置一下https://auth-server.herokuapp.com/#signin 如图： grant_url ：https://api.twitter.com/oauth/access_token
二:代码部署 安装 ： npm install hellojs
代码： twitter import hello from 'hellojs/dist/hello.all.js' export default { name: 'HelloWorld', mounted() { this.twws() }, methods:{ twws(){ hello.init({ twitter : 'REm8KjWsthsmKXZoVIYXNn1qqy' },{ scope : 'email', redirect_uri: 'http://localhost:5000/' }); }, login(){ hello('twitter').login(); // Listen to signin requests hello.on('auth.login', function(r) { // Get Profile hello( r.network ).api( '/me' ).then( function(p) { window.console.log(p) //输出用户信息 }); }); } } }
结果:
信息:
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |