國際化的項(xiàng)目就會(huì)用用到一些第三方的登錄api,這次記錄一下 Twitter 的!

按步驟來:

要注冊(cè)Twitter 開發(fā)者賬號(hào)，這個(gè)要申請(qǐng)，審核時(shí)間要好幾天。不過國內(nèi)的手機(jī)注冊(cè)的幾乎都過不了審核。看你運(yùn)氣咯！

demo請(qǐng)狠狠的戳這里 http://download.lllomh.cn/cliect/

一:開發(fā)者平臺(tái)配置

去Twitter 的開發(fā)者平臺(tái) 新建一個(gè)App:

https://developer.twitter.com/en/apps

?

?

?

?

申請(qǐng)審核通過之后就可以成功創(chuàng)建app了 如下

?

設(shè)置:

其中的回調(diào)地址是非常重要的, 這個(gè)跟代碼中的對(duì)應(yīng),也要跟https://auth-server.herokuapp.com/代理中的對(duì)應(yīng)才行,等下會(huì)說。

?

同時(shí)記得把 登錄開關(guān)打開:

?

然后再找到api key 跟 api secret key:

?

代碼相關(guān):

這要 用到的 就是1個(gè)KEY 跟回調(diào)地址 url 滾上圖一樣（回到地址要跟上圖開發(fā)者平臺(tái)設(shè)置的一致 三個(gè)地方要一致,開發(fā)者平臺(tái), server.herokuapp代理平臺(tái),視圖代碼配置）:

API key:

       twitterApp:{
              twitter_api_key:'REm8aKjWsthmKXZoVIYXdNn1quy',//mytest  :5000
              callbackUri: 'http://localhost:5000/'
          },

接下來在 代理地址設(shè)置一下https://auth-server.herokuapp.com/如圖：

grant_url：https://api.twitter.com/oauth/access_token

?

二:代碼部署

安裝 ：

npm installhellojs

代碼：

<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>

結(jié)果:

信息:

?

總結(jié)

以上是生活随笔為你收集整理的Vue.js怎么实现推特Twitter登录?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。