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 相关文章推荐
js验证表单大全
Nov 25 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js 通用订单代码
Dec 23 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP 函数执行效率的小比较
2010/10/17 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jQuery简单实现banner图片切换
2014/01/02 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python jieba库用法及实例解析
2019/11/04 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
大学生个人事迹材料
2014/01/21 职场文书
三方协议书范本
2014/04/22 职场文书
小学班主任培训方案
2014/06/04 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
golang操作rocketmq的示例代码
2022/04/06 Golang
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS