Vue.js中Line第三方登录api的实现代码       这篇文章主要介绍了Vue.js中Line第三方登录api实现代码，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

注册Line账号就不说了,虽然麻烦,这就自己去想办法了!

demo 请狠狠的戳这里

一:开发者平台配置

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

顺便写好资料:

动态演示:

这要 用到的 就是2个:

Channel ID 跟 Channel secret  对应

'client_id' = '',
'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)
 },

const params = new URLSearchParams() linq.from(result.getPostable()).select(x = params.append(x.key, x.value)).toArray() const { data } = await axios.post('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 

clientSecret: '323128b6e64c13285e6d058ff7b1bbc8e', callbackUri: '/这里要跟开发者平台中填写的一致 // 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的实现代码的文章就介绍到这了,更多相关Line第三方登录api内容请搜索凡科以前的文章或继续浏览下面的

• 上一篇：广州凡科互联网科技股份有限公司招聘信用卡催
• 下一篇：没有了