国际化的项目就会用用到一些第三方的登录api,这次记录一下 Twitter 的!

按步骤来:

要注册 Twitter 开发者账号，这个要申请，审核时间要好几天。不过国内的手机注册的几乎都过不了审核。看你运气咯！

demo 请狠狠的戳这里 ¥ http://download.lllomh.com/cliect/#/product/J416291190483324

demo 请狠狠的戳这里 c https://download.csdn.net/download/lllomh/12188663

一:开发者平台配置

去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  :5000callbackUri: '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 requestshello.on('auth.login', function(r) {// Get Profilehello( r.network ).api( '/me' ).then( function(p) {window.console.log(p) //输出用户信息});});}}
}
</script>

三:结果:

信息:

Vue.js中Twitter第三方登录api实现[亲测可用]相关推荐

Android开发，登录注册界面中如何添加视频背景，亲测可用
此篇文章属个人查阅资料整理所著,希望能对您有所帮助,欢迎各位留言指正,抱拳了一. 首先在res文件夹下添加raw文件夹并将要添加的背景视频放进去: 二.在MyViewpager.java(此为要显示 ...
淘宝评论问答列表接口获得淘宝商品评论 API分享亲测可用
一个商品的客户体验如何,关乎会有多少客户会愿意回购,大量商家会花时间精力在售后回访上.作为电商公司来说,用户直接在商品评论上的回复可以直接作为售后的调研依据.淘宝上还有一个问答列表,通过客户问,购买过 ...
Linux中mysql密码修改方法（亲测可用）
前提:安装mysql 解压mysql.tar.gz到指定目录进入mysql-5.7.18目录创建文件夹mkdir data 创建用户来执行mysqld命令 groupadd mysql # 创建组 ...
最新API接口(亲测可用)及其使用教程
前言: 就我们目前来说,之前是有很多开源的接口可以使用,比如豆瓣等,但是很多都不开放了,这里提供新的开发api地址.注意,这些都是要注册的,才能拿到key,没有key没办法在其他地方使用 1.地址入口 ...
FFmpeg音频编码 ---- pcm转aac（使用新版ffmpeg API，亲测可用）
/** * @projectName 08-01-encode_audio * @brief 音频编码 * 从本地读取PCM数据进行AAC编码 * 1. 输入PCM格式问题,通过AVCodec的sam ...
twitter授权登录 php,PHP版实现Twitter第三方登录的成功案例
QQ.微信.Fackbook等第三方登录使用OAuth2.0,随便找一些文档跟着做很快实现,没什么难度.等轮到Twitter时候,如果你也这样想,后面它就会证明你是错的! Twitter在当前时间(2 ...
Vue项目中实现用户登录及token验证
一.什么是token token的意思是"令牌",是服务端生成的一串字符串,作为客户端进行请求的一个标识.当用户第一次登录后,服务器生成一个token并将此token返回给客户端, ...
vue.js中DES、RSA、SHA1、MD5这四种加密算法的使用
vue.js中DES.RSA.SHA1.MD5这四种加密算法的使用 DES RSA SHA1 MD5 DES 美国数据加密标准(DES)是对称密码算法,就是加密密钥能够从解密密钥中推算出来,反过来也 ...
Vue.js 3.0 响应式 API 比 2.x 好在哪儿？
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...

Vue.js中Twitter第三方登录api实现[亲测可用]

一:开发者平台配置

二:代码部署

三:结果:

Vue.js中Twitter第三方登录api实现[亲测可用]相关推荐

最新文章

热门文章