Vuejs中Line第三方登录api实现亲测可用

国际化的项目就会用用到一些第三方的登录 api, 这次记录一下 Line 的!

按步骤来:

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

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

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

顺便写好资料:

动态演示:

这要用到的就是 2 个:

Channel ID 跟 Channel secret 对应

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

关键是这里的重定向地址要填 (几乎所有第三方都要):

核心获取第三方的部分

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'

结果:

Vuejs中Line第三方登录api实现亲测可用

一: 开发者平台配置

二: 代码部署

壹: 组件封装:

贰: 组件封装: