[陈同学i前端] CAS实践 | 微信小程序登陆认证

charlex
691 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

前言

大家好，我是陈同学，一枚野生前端开发者，感谢各位的点赞、收藏、评论

自2017年微信小程序能力的上线以来，众多的技术人员参与到小程序生态的建设当中，而在进行小程序开发的时候，我们通常需要提供用户登陆的能力，微信小程序平台本身有一套生态内部的登陆认证能力，我们可以根据文档进行快速接入微信用户体系

但若我们开发的小程序服务于一个独立的组织，而组织内部存在一套CAS用户中央认证系统，我们便需要进行额外开发以提供内部用户认证能力

CAS（Central Authentication Service）：中央认证服务，一种独立开放指令协议，目标是为Web应用系统提供一种可靠的单点登录方法

本节文章我们就来聊聊在微信小程序应用中CAS实践中的那些事

本文阅读成本与收益如下：

阅读耗时：5mins

全文字数：3k+

预期效益

  • 学习微信小程序用户登陆流程
  • 学习微信小程序接入CAS认证的流程

微信小程序原生登陆认证

微信小程序生态当中许多基础能力均通过对外暴露wx的公共API的形式给到外部开发者进行使用

微信登陆能力也不例外，主要涉及到的API有：

  • wx.login
  • wx.checkSession

流程

使用小程序登陆认证能力

  • 小程序侧调用wx.login接口，在success回调函数中拿到code字符串
  • 将code通过请求发向我们自己开发的后台业务服务
  • 后台业务服务通过code字符串以及当前小程序的appid、appsecret向微信服务器发送用户信息换取请求，微信服务器响应中包含用户的openid以及session_key
  • 拿到用户的openid以及session_key后我们便可以自定义用户登录态
  • 最后再将后台业务服务的登录态标识返回给小程序，小程序保存到本地当中，登陆流程结束

登陆流程走完后，在登录态有效期内的用户请求行为均需要在请求上写入登录态信息，以确保后台业务服务明确用户身份

微信登陆流程图：

20221006205203

实现

在小程序项目当中调用登陆接口

wx.login({
  success (res) {
    if (res.code) {
      // 将请求发送到后台业务服务
      wx.request({
        url: 'https://xx.test.edu.cn/app1/wxlogin',
        data: {
          code: res.code
        },
        success(resp) {
            console.log(resp);
            if (resp.error_code == 0) {
                wx.setStorageSync('access_token', resp.token);
            }
        }
      });
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
});

后台业务服务

$appid = 'APPID';
$appsecret = 'SECRET';
$client_code = $_GET['code'];
$resp = curl_get('https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$appsecret.'&js_code='.$client_code.'&grant_type=authorization_code');
if ($resp['errcode'] == 0) {
    saveUserInfo($resp); // 持久化用户信息到数据库
    $xx_token = hash("sha1", bin2hex(random_bytes(64))); // 颁发一个TOKEN字符串
    Cache::set($xx_token, json_encode($resp), 3600); // 缓存用户信息数据
    header('Content-Type:application/json; charset=utf-8');
    $data = array('error_code'=>0,'token'=>$xx_token);
    exit(json_encode($data));
}

微信小程序CAS登陆认证

接入微信登陆认证机制后，我们便可以开始结合组织中的中央认证服务进行用户身份认证

流程

前提：完成首次微信登陆流程

  • 用户输入CAS登陆凭证
  • 将登陆凭证发送到中央认证服务
  • 提取中央认证服务响应中的token字符串
  • 将token字符串发给后台业务服务
  • 后台业务服务通过token到中央认证服务拉取用户信息
  • 后台业务服务将返回的用户信息与当前用户的微信openid绑定
  • 返回响应到小程序

CAS认证流程图：

20221007001412

实现

let appid = 'APPID';
request.post(`https://cas.test.edu.cn/home/Oauth/getToken/appid/${appid}.html`, {
  username: 'username',
  password: 'password',
}, {
    "content-type": "application/x-www-form-urlencoded",
    'Accept': 'application/json, text/javascript, */*; q=0.01',
    'X-Requested-With': 'XMLHttpRequest',
    'Cookie': 'last_appid=ggtx; last_oauth_appid=ggtx'
})
.then((response) => {
  console.log(response);
  let resData = JSON.parse(response);
  request.post('client/bindUserCasInfo', { // 发送请求到后台业务服务
    token: res.info,
  }).then((response) => {
    console.log(response);
  });
});

讲到最后

本节文章主要介绍了基于微信小程序用户体系以及CAS中央认证机制的小程序用户身份认证

谢谢大家，我们下节再见！！！

感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力

本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利

参考

小程序用户信息获取公告

avatar
文章
阅读
粉丝