共计 1289 个字符,预计需要花费 4 分钟才能阅读完成。
国际化的项目就会用用到一些第三方的登录 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>
三: 结果:
信息: