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

 更新时间:2020-06-29 15:45:06   作者:佚名   我要评论(0)

国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的!
按步骤来:
注册Line账号就不说了,虽然麻烦,这就自己去想办法了!
demo 请狠狠的戳这里 http://dow

国际化的项目就会用用到一些第三方的登录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,组件使用:

除了 那个 三个参数,其他的一些 就看着修改整合吧

<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的实现代码的文章就介绍到这了,更多相关Line第三方登录api内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • vue.js的vue-cli脚手架中使用百度地图API的实例
  • 详解vue.js下引入百度地图jsApi的两种方法
  • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

相关文章

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

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

    国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的! 按步骤来: 注册Line账号就不说了,虽然麻烦,这就自己去想办法了! demo 请狠狠的戳这里 http://dow
    2020-06-29
  • 浅谈java是如何做资源回收补救的

    浅谈java是如何做资源回收补救的

    学习java的过程,我们经常谈论一个对象的回收,尤其是资源类型,如果没有显示的关闭,对象就被回收了,说明出现了资源泄漏。java本身为了防止这种情况,做了一些担保
    2020-06-29
  • UnityWebRequest前后端交互实现过程解析

    UnityWebRequest前后端交互实现过程解析

    一、技术概述 1、描述这个技术是做什么? 是Unity一套网络工具库,用于进行Http请求 2、学习该技术的原因? 项目需要,防止使用C#原生的网络库,加快开发速
    2020-06-29
  • vue实现列表滚动的过渡动画

    vue实现列表滚动的过渡动画

    本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码,供大家参考,具体内容如下 效果图 失帧比较严重,在手机上效果更佳。 原理分析 这个滚动页面由两个部分布
    2020-06-29
  • python中如何写类

    python中如何写类

    类的定义 Python中,定义类是通过class关键字,例如我们定义一个存储学生信息的类: class Student(object): pass class后面紧接着是类名,即Student,类名通常是
    2020-06-29
  • 解决tensorflow/keras时出现数组维度不匹配问题

    解决tensorflow/keras时出现数组维度不匹配问题

    一、环境 Ubuntu 16.04 tensorflow 1.4.0 keras 2.1.3 二、训练数据时报错: ValueError: Error when checking target: expected model_2 to have shape (None, 3)
    2020-06-29
  • 微信小程序实现导航栏和内容上下联动功能代码

    微信小程序实现导航栏和内容上下联动功能代码

    &#8195;&#8195;今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start)。 github地址:https://
    2020-06-29
  • 解决keras使用cov1D函数的输入问题

    解决keras使用cov1D函数的输入问题

    解决了以下错误: 1.ValueError: Input 0 is incompatible with layer conv1d_1: expected ndim=3, found ndim=4 2.ValueError: Error when checking target: expec
    2020-06-29
  • python打开文件的方式有哪些

    python打开文件的方式有哪些

    python下打开文件超级简单,不用导入任何包,直接输入 f = open('your_file.txt','r') 就可以打开一个文件进行操作。第二个参数为对文件的操作方式,'w'是写文件
    2020-06-29
  • python怎么自定义捕获错误

    python怎么自定义捕获错误

    异常捕捉: try: XXXXX1 raise Exception(“xxxxx2”) except (Exception1,Exception2,……): xxxx3 else: xxxxx4 finally: xxxxxxx5 1.raise
    2020-06-29

最新评论