Vue.js中Line第三方登入api的實現程式碼

阿新 • • 發佈：2020-06-30

國際化的專案就會用用到一些第三方的登入api,這次記錄一下Line 的!

按步驟來:

註冊Line賬號就不說了,雖然麻煩,這就自己去想辦法了!

demo 請狠狠的戳這裡 http://download.lllomh.com/cliect/#/product/J417081951162505

一:開發者平臺配置

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

https://developers.line.biz/en/

Vue.js中Line第三方登入api的實現程式碼

順便寫好資料:

Vue.js中Line第三方登入api的實現程式碼

動態演示:

Vue.js中Line第三方登入api的實現程式碼

這要用到的就是2個:

Channel ID 跟Channel secret 對應

'client_id'  => '5431649755','client_secret'=> '234b6e64c13285e6d058ff7b1bbc8e'

關鍵是這裡的重定向地址要填(幾乎所有第三方都要):

Vue.js中Line第三方登入api的實現程式碼

二:程式碼部署

核心獲取第三方的部分

壹:元件封裝:

1,起始:這裡就

const { code } = queryString.parse(window.location.search.replace('?',''))

      if(!code) return

這裡頁面回撥重新整理的時候發現url 有這個code 這個值的話就執行獲取 token 的方法,反之不執行:

async created() {
      const { code } = queryString.parse(window.location.search.replace('?',''))

      if(!code) return

      const result = await this.getToken(code)

      const { data } = await this.getProfile(result.token)

      if(this.friendRequired) {
        const flag = await this.checkFriend(result.token)

        if(!flag) {
          this.error = this.friendErrorTest
        }
      }

      if(!this.error) {
        const response = Object.assign(data,result.getPostable())
        this.$emit('result',response)
      }
    },

async getToken(code) {
        const result = new OAuthRequest({
          code: code,clientId: this.clientId,clientSecret: this.clientSecret,redirectUri: this.callbackUri
        })
        const params = new URLSearchParams()
        linq.from(result.getPostable()).select(x => params.append(x.key,x.value)).toArray()

        const { data } = await axios.post('https://api.line.me/oauth2/v2.1/token',params)
        console.log(data,"data")// 這裡拿到返回的第三方的結果個人資訊
        return new OAuthResult(data)
      },

貳:元件封裝:

1,元件使用:

除了那個三個引數,其他的一些就看著修改整合吧

<template>
 <div id="app">
   <line-login-button
       :client-id="clientId"
       :client-secret="clientSecret"
       :callback-uri="callbackUri"
       @result="result"
       add-friend
       friend-required></line-login-button>
   1232131
 </div>
</template>

<script>
  import LineLoginButton from './components/LineLoginButton'

  export default {
    data() {
      return {
        clientId: '2323649755',clientSecret: '323128b6e64c13285e6d058ff7b1bbc8e',callbackUri: 'http://localhost:8080' //這裡要跟開發者平臺中填寫的一致
      }
    },// created() {
    //   this.clientId = process.env.VUE_APP_LINE_CLIENT_ID
    //   this.clientSecret = process.env.VUE_APP_LINE_CLIENT_SECRET
    //   this.callbackUri = process.env.VUE_APP_LINE_CALLBACK_URL
    // },components: {
      LineLoginButton
    },methods: {
      result(res) {
        console.log(res)
      }
    }
  }

</script>

<style>
#app {
 font-family: 'Avenir',Helvetica,Arial,sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
#nav {
 padding: 30px;
}

#nav a {
 font-weight: bold;
 color: #2c3e50;
}

#nav a.router-link-exact-active {
 color: #42b983;
}
</style>

記得安裝這個外掛所需的外掛:

import queryString from 'querystring'
  import axios from 'axios'
  import OAuthRequest from '../Entities/OAuthRequest'
  import linq from 'linq'
  import OAuthResult from '../Entities/OAuthResult'

結果:

Vue.js中Line第三方登入api的實現程式碼