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 hashtable 修正版 下载
Dec 30 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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防注
2007/01/15 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
React如何避免重渲染
2018/04/10 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Django 路由控制的实现代码
2018/11/08 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
公司委托书格式
2014/08/01 职场文书
2015年敬老院工作总结
2015/05/18 职场文书