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


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 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
react的hooks的用法详解
Oct 12 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
多人战的战术与战略
2020/03/04 星际争霸
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python如何进入交互模式
2020/07/06 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
学期自我鉴定范文
2013/10/01 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
承办会议欢迎词
2014/01/17 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python