为了方便小程序应用使用微信登录态进行授权登录，微信小程序提供了登录授权的开放接口。乍一看文档，感觉文档上讲的非常有道理，但是实现起来又真的是摸不着头脑，不知道如何管理和维护登录态。本文就来手把手的教会大家在业务里如何接入和维护微信登录态。

接入流程

这里官方文档上的流程图已经足够清晰，我们直接就该图展开详述和补充。

首先大家看到这张图，肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端，微信第三方服务端也参与其中，那么微信服务端在其中扮演着怎样的角色呢？我们一起来串一遍登录鉴权的流程就明白了。

1. 调用wx.login生成code

wx.login()这个API的作用就是为当前用户生成一个临时的登录凭证，这个临时登录凭证的有效期只有五分钟。我们拿到这个登录凭证后就可以进行下一步操作：获取openid和session_key

wx.login({
    success: function(loginRes) {
        if (loginRes.code) {
            // example: 081LXytJ1Xq1Y40sg3uJ1FWntJ1LXyth
        }
    }
});

2. 获取openid和session_key

我们先来介绍下openid，用过公众号的童鞋应该对这个标识都不陌生了，在公众平台里，用来标识每个用户在订阅号、服务号、小程序这三种不同应用的唯一标识，也就是说每个用户在每个应用的openid都是不一致的，所以在小程序里，我们可以用openid来标识用户的唯一性。

那么session_key是用来干嘛的呢？有了用户标识，我们就需要让该用户进行登录，那么session_key就保证了当前用户进行会话操作的有效性，这个session_key是微信服务端给我们派发的。也就是说，我们可以用这个标识来间接地维护我们小程序用户的登录态，那么这个session_key是怎么拿到的呢？我们需要在自己的服务端请求微信提供的第三方接口https://api.weixin.qq.com/sns/jscode2session，这个接口需要带上四个参数字段：

从这几个参数，我们可以看出，要请求这个接口必须先调用wx.login()来获取到用户当前会话的code。那么为什么我们要在服务端来请求这个接口呢？其实是出于安全性的考量，如果我们在前端通过request调用此接口，就不可避免的需要将我们小程序的appid和小程序的secret暴露在外部，同时也将微信服务端下发的session_key暴露给“有心之人”，这就给我们的业务安全带来极大的风险。除了需要在服务端进行session_key的获取，我们还需要注意两点：

session_key和微信派发的code是一一对应的，同一code只能换取一次session_key。每次调用wx.login()，都会下发一个新的code和对应的session_key，为了保证用户体验和登录态的有效性，开发者需要清楚用户需要重新登录时才去调用wx.login()

session_key是有失效性的，即便是不调用wx.login，session_key也会过期，过期时间跟用户使用小程序的频率成正相关，但具体的时间长短开发者和用户都是获取不到的

function getSessionKey (code, appid, appSecret) {
    var opt = {
        method: \'GET\',
        url: \'https://api.weixin.qq.com/sns/jscode2session\',
        params: {
            appid: appid,
            secret: appSecret,
            js_code: code,
            grant_type: \'authorization_code\'
        }
    };
    return http(opt).then(function (response) {
        var data = response.data;
        if (!data.openid || !data.session_key || data.errcode) {
            return {
                result: -2,
                errmsg: data.errmsg || \'返回数据字段不完整\'
            }
        } else {
            return data
        }
    });
}

3. 生成3rd_session

前面说过通过session_key来“间接”地维护登录态，所谓间接，也就是我们需要自己维护用户的登录态信息，这里也是考虑到安全性因素，如果直接使用微信服务端派发的session_key来作为业务方的登录态使用，会被“有心之人”用来获取用户的敏感信息，比如wx.getUserInfo()这个接口呢，就需要session_key来配合解密微信用户的敏感信息。

那么我们如果生成自己的登录态标识呢，这里可以使用几种常见的不可逆的哈希算法，比如md5、sha1等，将生成后的登录态标识（这里我们统称为\'skey\'）返回给前端，并在前端维护这份登录态标识(一般是存入storage)。而在服务端呢，我们会把生成的skey存在用户对应的数据表中，前端通过传递skey来存取用户的信息。

可以看到这里我们使用了sha1算法来生成了一个skey：

const crypto = require(\'crypto\');

return getSessionKey(code, appid, secret)
    .then(resData => {
        // 选择加密算法生成自己的登录态标识
        const { session_key } = resData;
        const skey = encryptSha1(session_key);
    });
    
function encryptSha1(data) {
    return crypto.createHash(\'sha1\').update(data, \'utf8\').digest(\'hex\')
}

4. checkSession

前面我们将skey存入前端的storage里，每次进行用户数据请求时会带上skey，那么如果此时session_key过期呢？所以我们需要调用到wx.checkSession()这个API来校验当前session_key是否已经过期，这个API并不需要传入任何有关session_key的信息参数，而是微信小程序自己去调自己的服务来查询用户最近一次生成的session_key是否过期。如果当前session_key过期，就让用户来重新登录，更新session_key，并将最新的skey存入用户数据表中。

checkSession这个步骤呢，我们一般是放在小程序启动时就校验登录态的逻辑处，这里贴个校验登录态的流程图：

下面代码即校验登录态的简单流程：

let loginFlag = wx.getStorageSync(\'skey\');
if (loginFlag) {
    // 检查 session_key 是否过期
    wx.checkSession({
        // session_key 有效(未过期)
        success: function() {
            // 业务逻辑处理
        },
    
        // session_key 过期
        fail: function() {
            // session_key过期，重新登录
            doLogin();
        }
    });
) else {
    // 无skey，作为首次登录
    doLogin();
}

本文转载自 小程序资讯站，为你提供更多 小程序开发教程以及 小程序测评

微信小程序开发实现登陆教程相关推荐

  1. 微信小程序开发1.简易教程

    微信小程序 简易教程 一.基础: 第一章 起步 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 跟随这个教程,开始你的小程序之旅吧! 申请账号 点击 https:/ ...

  2. android开发小项目实例_微信小程序开发的实例教程

    一.注册小程序帐户 1.进入微信公众平台,注册一个小程序帐号,并根据提示填写相应的信息. 2.成功注册后,进入主页,然后在小程序发布过程->小程序开发和管理->配置服务器中单击" ...

  3. 微信小程序开发超详细教程

    分享一个我的公众号,最近突然想玩公众号,之前做过一段时间前端开发,考虑到现在应用程序越来越多,未来社会一定是一个充满"只有你想不到,没有你做不到"的App的世界!而微信小程序又给我 ...

  4. 微信小程序开发全案精讲-刘刚-专题视频课程

    微信小程序开发全案精讲-4467人已学习 课程介绍         微信小程序开发全案精讲是一套以案例为主线的课程,课程总共九章,第一章回顾基础知识,后面八章全部是以典型的案例作为讲解,选取了美食类: ...

  5. 视频教程-微信小程序开发全案精讲-微信开发

    微信小程序开发全案精讲 负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure RP8原型设计图解 ...

  6. 微信小程序开发教程7：实现小程序登陆功能

    平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...

  7. 微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 华为云物联网平台微信小程序开发教程2.0【完整详细教程】

    一.简介   在之前曾发布过一篇文章"华为云物联网平台的微信小程序开发",在最近接到部分用户私信在使用开发过程中出现的问题,例如API访问的"401"现象等问题 ...

  9. 微信小程序开发优秀教程及文章合集第一期

    2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...

最新文章

  1. 1.75亿美元！吴恩达第三锤：宣布成立AI基金AIFund
  2. python 发邮件-带附件-文本-html
  3. DailyRollingFileAppender-设置文件大小和备份数
  4. javascript之变量
  5. Android之Lollipop DevicePolicyManager学习（上）
  6. 5 高可靠，构建RabbitMQ集群架构
  7. 递归法：计算m个A，n个B可以组合成多少种排列问题？
  8. typecho图标_使你的Typecho支持Emoji表情
  9. 为Python IDLE 添加清屏（Ctrl + L ）快捷工具（附带解决错误的方法）
  10. 汽车故障码（P C B U)格式解析
  11. php paypal ipn,PHP 开发详解：PayPal Instant Payment Notification (IPN)
  12. 深度学习 再次爆发_如何教自己再次学习
  13. 小明医声发布，看AI技术秀得飞起
  14. miui android系统 流量,小米4 MIUI6系统怎么设置流量功能?小米4 MIUI6流量管理设置?...
  15. Linux常用命令详解(两万字超长文)
  16. 豆瓣电影数据可视化大屏
  17. echarts详细说明
  18. php脚本的执行过程（编译与执行相分离）
  19. RH358访问基于块的网络存储--自动化配置iSCSI initiator
  20. 团队目标由一致到分歧的案例

热门文章

  1. L1-SVD实现DOA
  2. 相机内参、畸变、外参说明
  3. “疫”不容辞，王老吉药业携南北医药致敬最美逆行者
  4. informatica 学习日记整理
  5. 二代锐龙服务器芯片,让锐龙再次翱翔：AMD二代Ryzen处理器性能解析
  6. IJCAI论文 | 基于改进注意力循环控制门，品牌个性化排序升级系统来了
  7. 计算机 - - - 使用peU盘重装系统(待完善)
  8. PAT (Advanced Level) Practice 1053 Path of Equal Weight (30 分)
  9. 中国计算机信息系统集成行业协会：信息安全服务资质等级划分，你了解吗
  10. 全国税收调查数据 （1）涵盖范围 全国税收调查数据收录了与税务相关的年度数据，时间跨度为2007年至2016年。该数据库具体涵盖增值税、增值税出口退税、消费税、营业税、房产税、城镇土地使用税、