國際化的項目就會用用到一些第三方的登錄api,這次記錄一下 Twitter 的!

按步驟來:

要注冊Twitter 開發者賬號，這個要申請，審核時間要好幾天。不過國內的手機注冊的幾乎都過不了審核。看你運氣咯！

demo請狠狠的戳這里 http://download.lllomh.cn/cliect/

一:開發者平臺配置

去Twitter 的開發者平臺 新建一個App:

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

?

?

?

?

申請審核通過之后就可以成功創建app了 如下

?

設置:

其中的回調地址是非常重要的, 這個跟代碼中的對應,也要跟https://auth-server.herokuapp.com/代理中的對應才行,等下會說。

?

同時記得把 登錄開關打開:

?

然后再找到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/如圖：

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>

結果:

信息:

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。