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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript解析json实例详解
Nov 05 Javascript
angularJS 入门基础
Feb 09 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
node thread.sleep实现示例
Jun 20 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 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判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Django 连接sql server数据库的方法
2018/06/30 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
保荐人的岗位职责
2013/11/19 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
财产保全担保书范文
2014/04/01 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
思想道德自我评价2015
2015/03/09 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书