微信用户访问小程序的登录过程
白羽 2018-08-09 来源 :网络 阅读 1330 评论 0

摘要:本文将带你了解微信用户访问小程序的登录过程,希望本文对大家学微信有所帮助

        本文将带你了解微信用户访问小程序的登录过程,希望本文对大家学微信有所帮助


概述当你开发完了一个小程序并部署上线后,某个微信用户第一次访问这个小程序的时候,会弹出一个授权界面,用户可以选择是否使用微信登录,如果选择是,则直接进入到小程序。当你第二次进入该小程序的时候,你会发现授权界面不会弹出来了,直接就进入小程序了。这个过程看起来非常的简单,但其实实现起来相当的麻烦和繁琐。涉及到会话、安全、验证等各种各样的问题。下面笔者介绍一下实现这个登录过程的思路。微信提供小程序登录流程图我们可以从 登录流程时序 找到这张图。想完全看懂张图,需要了解很多东西。我们先来看看微信提供的几个接口。小程序接口介绍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.getUserInfogetUserInfo 这个接口用于在微信平台获取用户信息。注意,如果微信用户第一次访问小程序,是弹出一个授权界面的。当用户授权后,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(//xxxxxValidateToken(code ));
        if (userinfo) {
           //说明登录成功,直接进入小程序的主界面。
        }
     }
     else {
        //说明小程序本地没有token,这个时候需要弹出授权界面,让微信用户决定是否访问小程序,如果用户选择是的话。
        const  weixinuserinfo = wx.getUserInfo();//会弹出授权界面,微信提供的
        if (weixinuserinfo ){
           //生成或者验证token
           const userinfo = wx.request(//xxxxxValidateToken(code ));

          const token = userinfo.getToken();
          //将token存储到小程序本地
          wx.setStorageSync('xxxxxtoken', token )
        }
     }       
}上面的伪代码中,会调用应用服务器(我们的应用服务器)的//xxxxxValidateToken(code )方法。这个方法的实现逻辑大概如下:1、先验证这个微信用户是否存在,可以调用微信提供的 jscode2session 方法,该方法会返回一个openid。我们必须在业务代码里,将这个openid保存到数据库,并和userid关联起来。2、判断是否是新的用户,如果是,则生成token和生成新的一个用户信息存储到数据库。如果不是新的用户,则验证token。这个流程走完后,小程序就可以通过 wx.request 方法,带上token,真正的访问应用服务器的业务方法,获取业务数据。token的生成和校验见过有些公司是直接将userid和openid,加密后返回给小程序。也见过用userid和password加密后返回给小程序。如果是选择第二种方式的话,验证token的逻辑大概如下:先解密,获取userid和password,并根据userid从数据库中获取到用户密码,跟从token中解密出来的password进行比对,如果相等,则校验通过。总结现在再回头看看微信提供登录路程图,是否好理解一些了。    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程