一:开发者平台配置

去Twitter 的开发者平台新建一个App:

developer.twitter.com/en/apps

申请审核通过之后就可以成功创建app了如下

设置:

其中的回调地址是非常重要的, 这个跟代码中的对应,也要跟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/'
          },

接下来在代理地址设置一下auth-server.herokuapp.com/#signin 如图：

grant_url ：api.twitter.com/oauth/acces…

二:代码部署

安装：

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>

三:结果:

信息:

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

一:开发者平台配置

二:代码部署

三:结果: