Vue2中使用Line Login(登录)与Line Share(分享)

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）