国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的!
按步骤来:
注册Line账号就不说了,虽然麻烦,这就自己去想办法了!
demo 请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417081951162505
一:开发者平台配置
去Line 的开发者平台 新建一个App:
https://developers.line.biz/en/
"text-align: center"> "text-align: center"> "text-align: center"> "htmlcode">
'client_id' => '5431649755', 'client_secret'=> '234b6e64c13285e6d058ff7b1bbc8e'
关键是这里的重定向地址要填(几乎所有第三方都要):
核心获取第三方的部分
壹:组件封装:
1,起始:这里就
const { code } = queryString.parse(window.location.search.replace('"htmlcode">async created() { const { code } = queryString.parse(window.location.search.replace('"htmlcode">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'结果:
Line第三方登录api
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。