小程序云应用入门实操系列课程第四讲 - 云应用的使用二:用户登录

简介: 云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要分享小程序云应用开发中微信登录的实践部分,分别从服务端和小程序端学习用户登录的具体代码逻辑和操作。

摘要

云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要分享小程序云应用开发中微信登录的实践部分,分别从服务端和小程序端学习用户登录的具体代码逻辑和操作。

演讲嘉宾简介

白宦成 - Linux 中国开发组组长,阿里云 MVP;CSDN 专家,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。

个人小程序作品

运维密码小程序:2017年2月上线
配色助手小程序:2018年4月上线
Linux 小程序:2019年2月上线。

个人授课:

极客学院《微信小程序入门实战(仿 V2EX)》
极客学院《微信小程序进阶实战之分答应用开发》
网易云课堂《微信小程序初级工程师微专业》

系列课程大纲

  • 云应用的价值
  • 云应用的控制介绍
  • 云应用的使用一:Node.js初始化
  • 云应用的使用二:用户登录

本次直播视频精彩回顾,戳这里!
https://yq.aliyun.com/articles/700439

以下内容根据演讲嘉宾视频分享整理而成。

本次的分享主要围绕以下三个方面:

一.登录业务逻辑
二.服务端用户登录
三.小程序端用户登录

登录业务逻辑

用户登录时序图

云应用获取用户的云 ID(在微信中称为 OpenID),目前的小程序平台,无论微信小程序还是支付宝小程序都不会直接返回 OpenID,而是授权 code,通过 code 去找服务端,由服务端获取 OpenID 以后再发送给客户端,以此来保证安全性,即 OpenID 要放到服务端去获取,而不是在客户端获取。如下图,首先,手机通过微信或者支付宝小程序获取到 code,(注意 code 并不是 OpenID,code 在每一次请求都会变,所以不需要存储 code),将获取到的 code 交给云应用(服务端),云应用获取到code以后,请求微信接口,将微信接口换到 OpenID,再将 OpenID 存到数据库中,这样便创建了一个用户。拿到 OpenID 以后,就有了唯一的用户身份标识,可以用 OpenID 创建身份用户。数据库中有了用户以后,可以为当前用户生成登录信息。 比较简单做法是直接将 OpenID 作为用户身份信息的验证,但一般不推荐,而是会在后端重新创建 token(js web toke),将 token 发送给小程序端。如果请求被截取,对方拿到的也只是 token,无法知道用户真正的 OpenID,相对而言更加安全。获取到 js web token 以后,返回给小程序,小程序将 json web token 存到本地,每一次请求都会把 token 带上去。服务端在每次请求时将 token 提取出来,解析得到 token 所对应的用户。这是目前最常用的用户鉴权方法。

_1

以微信小程序为例,如果想要获取 OpenID,需要调用 code2Session 接口。通过 wx.login()方法获取临时凭证 code,传到服务器返回 js,通过 js 获取 authcode,通过 authcode 拿到 OpenID,即用户唯一标识。有了用户标识,就可以完成具体开发工作。

服务端用户登录

文档:打开 egg.js 官网,egg.js 提供了非常多的常用工具代码示例,如常用的 HttpClient 请求,用户可以直接调用 HttpClient 发送请求。

编写调用:首先,需要获取 APPID 和 Secretkey。登录小程序后台,找到开发设置,在开发设置中可以获取 APPID 及 APPSecret。

2

逻辑编写:使用 vscode 打开项目文件。编写登录的路由,在 app 里有 router.js 文件,其中默认定义了一些路由,开发者需要定义一些其它路由。如果定义的是微信小程序的 login,可以设置路由 router.get (“/wechat/login”,
controller.wechat.login);,路由请求到/wechat/login时请求的对象路由是 controller 目录中 wechat.js 中的 login 的方法。

多平台:如果是做支付宝小程序,只需要修改路由 router.get(“/alipay/login”
,controller.alipay.login);新建文件 alipay.js,编写支付宝的 login 方法。对于多端的支持使用类似的方法。

3

编写方法:新建文件 wechat.js, 定义 controller,async 以及 login 方法。定义参数 appid 和 secret key;定义 url 地址(egg.js文档中的示例),需要对地址发送 get 请求;接下来需要将 jscode 换成通过请求拿到的 code。如何获取请求呢?egg.js 文档中 controller 部分提示可以以 Query 形式获取 Http 请求的参数。Let query = this.ctx.query; 通过 query.code替换 url 地址中的 jscode;拼接完 url 以后返回,this.ctx.body=url,返回 url。

4

HttpClient 发送请求:发送 get 请求,复制文档中代码,将 url 作为地址,将 result 返回在 body 中输出。如果 app 提醒没有 define,可以使用 this.app。

5

先返回 result.data,可以看到返回了 code 部分。

6

微信登录接入:首先打开微信小程序开发者工具,创建一个新项目。

7

在项目中调用 login 方法,如下图,在 app.js 里面打印出 console.log(res.code)。然后 request,请求的 url 地址是前面的127.0.0.1.7001/wechat/login?code=?,在后面将 res.code 加进去。在 success 回调当中处理结果,打印结果 res.data。

8

这时就拿到了 OpenID 及 SessionID。OpenID 是用户唯一标识,SessionID 是密钥,在数据解密的时候需要用到,所以需要将 OpenID 及 SessionID 都保存下来。

9

小程序端用户登录

服务端做完用户登录以后,可以拿到 result.data.openid,即具体的 OpenID。

创建用户:有了 openid 以后,创建一个 User Table,新建用户 new User,传入 openid=result.data.openid。如此便创造了一个新的用户,user.id 就是用户在数据库当中对应的 id。开发者需要使用 user.id 创建 token。

10

创建 token:一般创建 token 会需要工具,Node.js 中的工具叫 Passport。Passport 一般会给一个方法,传入 user,给出一个 token,将 token 返回给小程序端就可以了。比如,最后返回的 token 是“123”。

11

小程序端可以使用 this.globalData.token=res.data.token;在 app 实例中存一个 token。

12

Storage 中存 token:但是在 app 实例中,用户一旦退出 token 就没有了。可以使用 wx.setStorage 设置key:’token’,data:res.data.token, 把数据存在 storage 里。下一次小程序进行登录时,可以获取到 storage 中的 token,有了 token 就不需要再去请求服务器了。

13

在下次登录时,可以在登录最开始做一个 check,let token=wx.getStorageSync(‘token’),如果 token 存在,就不执行操作,下图中需要设置没有t oken 时候,将 request 放在if条件判断里。即首先检查有没有token,如果有,if就不执行,如果没有 token,就会进入执行,请求获取 OpenID,如果获取成功,就会设置 OpenID。然后把 OpenID 给到当前用户的 globaldata,存在 storage 里,如此就完成了小程序端的登录部分。

14

部署新版本

代码写完以后,压缩成 zip 包。进入 aliyun 后台,登录小程序,进入小程序后台。点击近期的 Node.js 项目,演示环境,点击发布,选择部署新版本,点击上传文件,选择 Node.js 找到 aliyunzhibo,找到归档,上传,版本号叫 Vlogin,(表示 login 方法),点击发布。

交流讨论

扫码加入 阿里云小程序云支持群 一起交流讨论技术问题 更多直播等你观看

_jpeg

更多资讯

关注 ALI繁星计划 公众号 第一时间获取最新小程序云干货

_2019_05_09_2_03_05

目录
相关文章
|
9月前
|
开发框架 人工智能 Java
破茧成蝶:阿里云应用服务器让传统 J2EE 应用无缝升级 AI 原生时代
本文详细介绍了阿里云应用服务器如何助力传统J2EE应用实现智能化升级。文章分为三部分:第一部分阐述了传统J2EE应用在智能化转型中的痛点,如协议鸿沟、资源冲突和观测失明;第二部分展示了阿里云应用服务器的解决方案,包括兼容传统EJB容器与微服务架构、支持大模型即插即用及全景可观测性;第三部分则通过具体步骤说明如何基于EDAS开启J2EE应用的智能化进程,确保十年代码无需重写,轻松实现智能化跃迁。
695 42
|
10月前
|
开发框架 人工智能 Cloud Native
破茧成蝶:阿里云应用服务器让传统J2EE应用无缝升级AI原生时代
一场跨越20年的技术对话:在杭州某科技园的会议室里,一场特殊的代码评审正在进行。屏幕上同时展示着2005年基于WebLogic开发的供应链系统和2025年接入DeepSeek大模型的智能调度方案——令人惊叹的是,二者的核心业务代码竟保持着惊人的一致性。"我们保住了20年积累的238个核心业务对象,就像修复传世名画时保留了每一笔历史痕迹。"企业CTO的感慨,揭开了阿里云应用服务器助力传统系统智能化转型的奥秘。
284 13
|
小程序 JavaScript
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
612 0
|
缓存 小程序 前端开发
【微信小程序】wx.login实现用户登录
【微信小程序】wx.login实现用户登录
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
1513 7
|
云安全 安全 云计算
云安全的应用与合规性:构建安全可靠的云应用和满足合规性要求
本篇深入探讨了在云环境中构建安全可靠的应用和满足合规性要求的重要性。我们首先介绍了安全的软件开发生命周期(SDLC),强调了在需求分析、设计、编码、测试、部署和运维阶段嵌入安全性的关键步骤。示例代码展示了如何在每个阶段融入安全实践。
666 1
云安全的应用与合规性:构建安全可靠的云应用和满足合规性要求
|
存储 人工智能 运维
应用无影企业级办公综合解决方案,新康众实现750+门店云上高效管理
新康众已经率先应用无影企业级办公综合解决方案,突破分支门店IT设备管理难度大,IT运维管理效率低,门店设备安全隐患大,门店业务数据泄露风险大等痛点,快速构建了安全高效的门店信息化体系,实现全国门店设备的统一远程运维和管理,IT运维成本减少70%,新店设备部署时间从1到2小时降至10分钟。
766 0
应用无影企业级办公综合解决方案,新康众实现750+门店云上高效管理
|
人工智能 架构师 搜索推荐
在线教育≠在线观看:风变科技应用无影打造自动化实训教学模式
本期云谷创新谈由阿里云市场部银超和阿里云无影解决方案架构师皮剑联席主持,对谈风变科技联合创始人兼CTO/COO吴亮亮,就“自动化教学技术”话题,一起探讨:自动化教学背后的底层逻辑;云电脑如何帮助在线教学实现类真人、类线下教学;行业技术服务商与云服务商怎么看待技术赋能教育过程中的其他可能性?
593 0
在线教育≠在线观看:风变科技应用无影打造自动化实训教学模式
|
JSON 前端开发 小程序
微信小程序入门05-用户登录注册接口开发
微信小程序入门05-用户登录注册接口开发
|
存储 弹性计算 Kubernetes
云原生-ZK集群及ZK云应用(ZK镜像制作、镜像上传、部署ZK应用、挂载持久化存储卷NAS)
云原生-ZK集群及ZK云应用(ZK镜像制作、镜像上传、部署ZK应用、挂载持久化存储卷NAS)
652 0
云原生-ZK集群及ZK云应用(ZK镜像制作、镜像上传、部署ZK应用、挂载持久化存储卷NAS)

热门文章

最新文章