Tips:本文中代码使用的是Vue2,逻辑是相通的,并不影响使用其他前端语言开发。
一、创建项目
登录Line开发者后台(需要梯子),创建属于我们的应用
填写项目名称
创建 Line Login
这里勾选App类型和自己填写其他必要的信息
上面一步创建好后可以在 Basic settings 中把 Channel ID 和 Channel secret 保存好,后续代码中需要使用。
然后进入 Line Login 中填写我们的项目回调地址,如果有多个,直接换行输入即可,这里需要填写正确,后面代码中也需要用到。
二、Line 登录
这里简单写了个demo,Line SDK不需要导入任何代码,直接开发即可。
1、点击登录时验证用户并发出授权申请
点击登录按钮时使用以下代码发出授权申请(全程使用梯子)
const line_auth = 'https://access.line.me/oauth2/v2.1/authorize';
const auth_params = {
response_type: 'code',
client_id: this.config.channel_id,
redirect_uri: window.location.href, // 在LINE Developers Console上注册的回调 URL 的 URL 编码字符串。您可以添加任何查询参数。
state: 'STATE', // 用于防止跨站点请求伪造的唯一字母数字字符串. 您的网络应用应为每个登录会话生成一个随机值。这不能是 URL 编码的字符串。
scope: 'profile openid email' // 向用户请求的权限,查询范围可以看官网(https://developers.line.biz/en/docs/line-login/integrate-line-login/#scopes)
};
// 这里使用了第三方库qs来处理参数
const paramsString = qs.stringify(auth_params);
window.location.href = `${line_auth}?${paramsString}`;
当页面替换成line的授权链接后,会提示用户授权
当授权完毕后会通过回调地址回到咱们的页面,并携带上 code 和 state 参数。
这是授权后重定向的url = http://192.168.0.96:8081/?code=TVdyoTp51ikDXwQJHfZQ&state=STATE
2、使用 Web 应用程序获取访问令牌
由于页面是重定向回来的,所以我们可以在页面的生命周期函数中判断是否为line登录,我这里只做了简单的判断,实际上可以根据自己的需求加上更多的限制。
created() {
// 由于line登录在回调地址会携带code和state参数,所以我们可以使用这个判断
if (this.$route.query.code && this.$route.query.state) {
console.log('line 登录');
this.getLineToken();
}
}
获取访问令牌(官网地址),下面是具体代码
const params = {
grant_type: 'authorization_code', // 固定值
code: this.$route.query.code, // 从 LINE 平台收到的授权码
client_id: this.config.channel_id,
client_secret: this.config.channel_secret,
redirect_uri: window.location.origin + window.location.pathname // 与授权请求redirect_uri中指定的值相同
};
const resp = await axios({
url: 'https://api.line.me/oauth2/v2.1/token',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: params
});
// 通过resp处理后续逻辑
access_token 就是我们需要的访问令牌了,访问令牌在颁发后 30 天内有效,有效的管理令牌可以减少很多重复的授权登录操作,具体可以看官网。
3、从 ID 令牌获取个人资料信息
调用下面的接口获取用户的资料,获取资料的权限取决于 第1步 中 scope 的值
await axios({
url: 'https://api.line.me/oauth2/v2.1/userinfo',
headers: {
Authorization: `Bearer ${this.access_token}`
}
});
三、Line 分享
Line 分享比较简单,直接在url中拼接你想要分享的内容
const content = '这里是分享内容';
window.open(`https://line.me/R/msg/text/?${content}`);
如果还需要更多的功能可以查看Line的开发者文档。
Demo地址,我使用的node版本是 v.16.17.1(代码需要在 config 中填入您申请的 ID 和 secret)