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

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

摘要

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

演讲嘉宾简介

白宦成 - 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

目录
相关文章
|
1月前
|
JSON 小程序 JavaScript
微信小程序入门实践
微信小程序入门实践
|
14天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
19天前
|
存储 小程序 开发者
如何提升微信小程序的应用速度
如何提升微信小程序的应用速度
|
1月前
|
关系型数据库 Serverless 分布式数据库
Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
22 3
|
1月前
|
小程序 JavaScript 容器
微信小程序入门学习02-TDesign中的自定义组件
微信小程序入门学习02-TDesign中的自定义组件
|
1月前
|
JSON 小程序 前端开发
微信小程序开发入门学习01-TDesign模板解读
微信小程序开发入门学习01-TDesign模板解读
|
1月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
|
1月前
|
存储 小程序 开发工具
一篇文入门微信小程序开发环境搭建
一篇文入门微信小程序开发环境搭建
|
2月前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
112 1