Vue.js中Line第三方登录api的实现代码


Posted in Javascript onJune 29, 2020

国际化的项目就会用用到一些第三方的登录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的实现代码

动态演示:

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的实现代码

Vue.js中Line第三方登录api的实现代码

总结

到此这篇关于Vue.js中Line第三方登录api的实现代码的文章就介绍到这了,更多相关Line第三方登录api内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
vue实现列表滚动的过渡动画
Jun 29 #Javascript
element跨分页操作选择详解
Jun 29 #Javascript
vue实现数字滚动效果
Jun 29 #Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 #Javascript
Vue实现可移动水平时间轴
Jun 29 #Javascript
uniapp与webview之间的相互传值的实现
Jun 29 #Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
语义化 H1 标签
2008/01/14 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python实现单向链表详解
2018/02/08 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
协议书模板
2014/04/23 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python