欢迎光临,了解微信小程序开发,就上易用通!

微信小程序云端解决方案教程三:会话管理场景

发布:2017-11-20 16:58浏览: 来源:网络 作者:tianshu

部署和运行整体架构1. 准备域名和证书2. 云主机和镜像部署3. 配置 HTTPS4. 域名解析5. 配置云存储 Redis6. 配置云数据库 MongoDB7. 启动一笔到底示例 Node 服务实现会话层实现源代码微信小程序示例 - 一笔到底微信小 ...

 
 
 
  • 部署和运行
    • 整体架构
    • 1. 准备域名和证书
    • 2. 云主机和镜像部署
    • 3. 配置 HTTPS
    • 4. 域名解析
    • 5. 配置云存储 Redis
    • 6. 配置云数据库 MongoDB
    • 7. 启动一笔到底示例 Node 服务
  • 实现
    • 会话层实现
  • 源代码
Tencent Cloud

微信小程序示例 - 一笔到底

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。

微信的定位并不是 HTML5,这里很多人都有误解。在一些实现上,并不能想当然地用 HTML5 的思路来思考。比如,微信的请求接口 wx.request并不支持 cookie 传递,所以会话层不能使用传统的 Session 方式。

这篇文章分享一个简单的画图应用,使用自己新鲜出炉的小程序会话管理能力来判断并当前用户的身份。

微信小程序云端解决方案教程三:会话管理场景(图2)

小程序非常简单,使用 Canvas 绘图后,把序列化的 actions 提交给服务器保存。下次加载的时候,再列出用户曾经绘制过的图。

部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

整体架构

微信小程序云端解决方案教程三:会话管理场景(图3)

1. 准备域名和证书

在微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:

  • 只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个
  • 网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个证书

域名注册好之后,可以登录微信公众平台配置通信域名了。

微信小程序云端解决方案教程三:会话管理场景(图4)

2. 云主机和镜像部署

一笔到底的服务器运行代码和配置已经打包成腾讯云 CVM 镜像,大家可以直接使用

腾讯云用户可以免费领取礼包,体验腾讯云小程序解决方案。

微信小程序云端解决方案教程三:会话管理场景(图5)

镜像已包含所有小程序的服务器环境与代码,需要体验其它小程序的朋友无需重复部署

3. 配置 HTTPS

镜像中已经部署了 nginx,需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

微信小程序云端解决方案教程三:会话管理场景(图6)

配置完成后,即可启动 nginx。

nginx

4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 HTTPS 服务。

在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的 CVM。

微信小程序云端解决方案教程三:会话管理场景(图7)

解析生效后,我们在浏览器使用域名就可以进行 HTTPS 访问。

微信小程序云端解决方案教程三:会话管理场景(图8)

5. 配置云存储 Redis

会话管理依赖 Redis 进行作为缓存管理,开发者可以选择自行搭建 Redis 服务或者直接购买云存储 Redis 服务

6. 配置云数据库 MongoDB

一笔到底小程序使用 MongoDB 来存储用户绘制的图像路径,要运行小程序开发者需要自行搭建 MongoDB 服务或者直接购买云数据库 MongoDB

7. 启动一笔到底示例 Node 服务

在镜像的 nginx 配置中(/etc/nginx/conf.d),已经把/applet/session的请求转发到 https://127.0.0.1:5757处理。我们需要把 Node 服务运行起来。Node 代码部署在目录/data/release/qcloud-applet-session下。

进入该目录:

cd /data/release/qcloud-applet-session

在该目录下有个名为config.js的配置文件(如下所示),根据注释将appIdappSecretredisConfigmongoConfig修改成自己的配置。

module.exports = {    port: '5757',    ROUTE_BASE_PATH: '/applet',    // 微信小程序 App ID    appId: '',    // 微信小程序 App Secret    appSecret: '',    // Redis 配置    // @see https://www.npmjs.com/package/redis#options-object-properties    redisConfig: {        host: '',        port: '',        password: '',    },    // MongoDB 配置    // @see https://www.qcloud.com/doc/product/240/3979    mongoConfig: {        username: '',        password: '',        host: '',        port: '',        query: '?authMechanism=MONGODB-CR&authSource=admin',        database: 'qcloud-applet-session',    },};

一笔到底示例使用 pm2 管理 Node 进程,执行以下命令启动 node 服务:

pm2 start process.json

实现

会话层实现

会话层实现包含两个部分:

  • 服务器端:https://github.com/CFETeam/weapp-session
  • 客户端:https://github.com/CFETeam/weapp-session-client

我们的 Demo 直接使用这两个仓库,可以快速地拥有会话层的能力。

会话层的实现和传统 Cookie 的实现方式类似,都是在 Header 上使用特殊的字段跟踪。一个请求的完整流程如下:

微信小程序云端解决方案教程三:会话管理场景(图9)

  1. 客户端(微信小程序)发起请求 request
  2. weapp-session-client 包装 request
    • 首次请求
      • 调用 wx.login() 和 wx.getUserInfo() 接口获得 coderawData 和 signature
      • requset 的头部带上 coderawData 和 signature
      • 保存 code 供下次调用
    • 非首次请求
      • request 的头部带上保存的 code
  3. 服务器收到请求 request,中间件从头部提取 coderawData 和 signature 字段
    • 如果 code 为空,跳到第 4 步
    • 如果 code 不为空,且 rawData 不为空,需要进行签名校验
      • 使用 codeappidapp_secret 请求微信接口获得 session_key 和 openid
        • 如果接口失败,响应 ERR_SESSION_KEY_EXCHANGE_FAILED
      • 使用签名算法通过 rawData 和 session_key 计算签名 signature2
      • 对比 signature 和 signature2
        • 签名一致,解析 rawData 为 wxUserInfo
          • 把 openid 写入到 wxUserInfo
          • 把 (code, wxUserInfo) 缓存到 Redis
          • 把 wxUserInfo 存放在 request.$wxUserInfo 里
          • 跳到第 4 步
        • 签名不一致,响应 ERR_UNTRUSTED_RAW_DATA
    • 如果 code 不为空,但 rawData 为空,从 Redis 根据 code 查询缓存的用户信息
      • 找到用户信息,存放在 request.$wxUserInfo 字段里,跳到第 4 步
      • 没找到用户信息(可能是过期),响应 ERR_SESSION_EXPIRED
  4. request 被业务处理,可以使用 request.$wxUserInfo 来获取用户信息(request.$wxUserInfo 可能为空,业务需要自行处理)

源代码

可从 Github 获取 https://github.com/CFETeam/weapp-session






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。