微信用户访问小程序的登录过程详解


Posted in Javascript onSeptember 20, 2019

概述

当你开发完了一个小程序并部署上线后,某个微信用户第一次访问这个小程序的时候,会弹出一个授权界面,用户可以选择是否使用微信登录,如果选择是,则直接进入到小程序。当你第二次进入该小程序的时候,你会发现授权界面不会弹出来了,直接就进入小程序了。

这个过程看起来非常的简单,但其实实现起来相当的麻烦和繁琐。涉及到会话、安全、验证等各种各样的问题。下面笔者介绍一下实现这个登录过程的思路。

微信提供小程序登录流程图

微信用户访问小程序的登录过程详解

我们可以从登录流程时序 找到这张图。想完全看懂张图,需要了解很多东西。我们先来看看微信提供的几个接口。

小程序接口介绍

wx.login()

这个方法是小程序端发起的,如果是使用腾讯团队推出的小程序组件化开发框架的wepy的话,伪代码如下:

wepy.login()
   .then(res => {
   const code = res.code
 })

这样子就可以从微信平台获取一个code,这个code是临时登录凭证,用于获取openid的。

wx.request()

这个也是小程序端发起的,用于请求开发者服务器(也即是我们的应用服务器)上的接口,调用的伪代码如下:

wepy.request({
     url: `xxurl`,
     data: {
     //入参
     },
    })
    .then(res => {
     //从res中获取应用服务器返回的数据
    })

获取openid的接口

当某个开发主体开发了一个小程序后,当用户访问这个小程序的时候,微信平台会为这个用户分配一个openid。如下接口:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

这个微信接口一般是我们的应用服务器发起调用的,而不是小程序端发起的。

wx.getUserInfo

getUserInfo这个接口用于在微信平台获取用户信息。注意,如果微信用户第一次访问小程序,是弹出一个授权界面的。当用户授权后,getUserInfo才能调用并返回用户数据。

这个四个接口在使用微信访问小程序的时候都会用到的。

基于token保持会话和登录认证

小程序虽然不支持cookie的机制,但是支持在header里设置token。

这个token是应用服务器生成的。

header: {
    'xxxxtoken': token,
 }

当小程序调用应用服务器接口的时候,必须带上这个token,应用服务端则对这个token进行解析和认证。当然如果是第一次访问小程序,只能由应用服务器先生成token。 笔者打算用伪代码来表达使用token后,整个登录的过程,因为用文字或者图比较难表达。

const code = wx.login();
if (code ) {//code存在
//从小程序的本地中获取toten
const token = wx.getStorageSync('xxxxxtoken')
   if (token ) {//小程序本地存有token,无需弹出授权界面
    //直接传入code字段,调用应用服务器的验证token的方法,如果校验成功,需要返回用户信息。
    const userinfo = wx.request(http://xxxxxValidateToken(code ));
    if (userinfo) {
      //说明登录成功,直接进入小程序的主界面。
    }
   }
   else {
    //说明小程序本地没有token,这个时候需要弹出授权界面,让微信用户决定是否访问小程序,如果用户选择是的话。
    const weixinuserinfo = wx.getUserInfo();//会弹出授权界面,微信提供的
    if (weixinuserinfo ){
      //生成或者验证token
      const userinfo = wx.request(http://xxxxxValidateToken(code ));

     const token = userinfo.getToken();
     //将token存储到小程序本地
     wx.setStorageSync('xxxxxtoken', token )
    }
   }    
}

上面的伪代码中,会调用应用服务器(我们的应用服务器)的

http://xxxxxValidateToken(code )

方法。这个方法的实现逻辑大概如下:

1、先验证这个微信用户是否存在,可以调用微信提供的jscode2session方法,该方法会返回一个openid。我们必须在业务代码里,将这个openid保存到数据库,并和userid关联起来。

2、判断是否是新的用户,如果是,则生成token和生成新的一个用户信息存储到数据库。如果不是新的用户,则验证token。

这个流程走完后,小程序就可以通过wx.request方法,带上token,真正的访问应用服务器的业务方法,获取业务数据。

token的生成和校验

见过有些公司是直接将userid和openid,加密后返回给小程序。也见过用userid和password加密后返回给小程序。如果是选择第二种方式的话,验证token的逻辑大概如下:

先解密,获取userid和password,并根据userid从数据库中获取到用户密码,跟从token中解密出来的password进行比对,如果相等,则校验通过。

总结

现在再回头看看微信提供登录路程图,是否好理解一些了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现随机化快速排序的实例代码
Aug 01 Javascript
jsonp原理及使用
Oct 28 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 #Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 #Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 #Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
js实现移动端轮播图
2020/12/21 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python解析xml文件操作实例
2014/10/05 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python图像读写方法对比
2020/11/16 Python
python实现经典排序算法的示例代码
2021/02/07 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书