Vue.js中Twitter第三方登录api实现[亲测可用]
原创Vue.js中Twitter第三方登录api实现[亲测可用]
原创
国际化的项目就会用用到一些第三方的登录api,这次记录一下 Twitter 的!
按步骤来:
要注册 Twitter 开发者账号，这个要申请，审核时间要好几天。不过国内的手机注册的几乎都过不了审核。看你运气咯！
demo 请狠狠的戳这里 http://download.lllomh.com/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代码：
<template>
<div class="hello">
<button id='twitter' @click="login()" class="profile">twitter</button>
</div>
</template>
<script>
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) //输出用户信息
});
});
}
}
}
</script>三:结果:
信息:
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。