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

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

按步骤来:

注册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,组件使用:

除了 那个 三个参数,其他的一些 就看着修改整合吧

记得安装 这个插件所需的插件:

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

结果:

​

​