这篇文章主要介绍了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,组件使用:
除了 那个 三个参数,其他的一些 就看着修改整合吧
1232131
记得安装 这个插件所需的插件:
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的实现代码的详细内容,更多请关注0133技术站其它相关文章!