专栏首页我的代码世界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>

三:结果:

信息:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    demo 地址请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417096994417412

    芈渡
  • Vue.js中Line第三方登录api实现[亲测可用]

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

    芈渡
  • Vue.js中Google第三方登录api实现[亲测可用]

    上一篇说了 facebook的实现,接下来说下google 的实现了,国际化的用的少.实际详细的文档也不多,这记录下来!

    芈渡
  • OSI物理层之宽带接入技术

    爱学习的孙小白
  • Flink Forward 2019系列文章--实战相关(1)--农业机械公司John Deere

    How John Deere uses Flink to process millions of sensor measurements per second-...

    阿泽
  • Flink Forward 2019--实战相关(14)--Arctic Wolf Networks分享事件流攻击

    Hunting for Attack Chains in Event Streams -- Ray Ruvinskiy(Arctic Wolf Networks...

    阿泽
  • 博客园特效简单添加

    @坤的
  • 臭名昭著的手机验证码功能是如何实现的

    现在基本上各种手机APP注册都会用到手机验证码,包括一些PC端网站也会使用手机号作为唯一标识验证!

    小柒2012
  • GitHub实战系列~3.提交github的时候过滤某些文件 2015-12-10

    创建项目的时候在最下面,添加过滤器,选择vs 或者把 .gitignore 拷贝一份放git项目文件夹的根目录 ? 建完就有两个文件了,.gitignore 是...

    逸鹏
  • D12-Android自定义控件之--二分搜索树

    张风捷特烈

扫码关注云+社区

领取腾讯云代金券