小程序速成系列:手把手教你设计用户登录体系

跳一跳的出现再次激活了小程序,吃饭在跳,睡觉在跳,洗澡在跳。有句话说得好,谁掌握流量,谁掌握过去;谁掌握入口,谁掌握现在;谁掌握趋势,谁掌握未来,即使我们不能掌握趋势,也要顺应趋势。

小程序内的用户体系

通常要构建一个用户体系需要解决两个关键问题:
1、用户id在系统中保证唯一
2、维护用户在系统中的登录状态

只要这两个问题得到解决,其他事情就是无限的拓展和丰富。比如你要给用户增加昵称、性别、年龄,或者给用户增加角色权限等等,这些都是用户体系下的延伸。盖高楼最重要的是坚固稳定的基石,其他楼层的搭建就是时间问题。

小程序里面也有一套自己的用户体系,所以我们不必从0去开发,可以通过其登录接口进行开发。

以下是小程序官方的登录流程图(先认真看两遍)
小程序的登录流程图

小程序:指的是小程序前端框架,也就是在微信开发者工具中写代码的部分
第三方服务器:指的是我们自己的后端服务器,此处对微信而言是第三方服务器,后面我们统一称为业务服务器
微信服务器:指的是微信的后端服务器,也就是提供的API接口,目前域名地址为 : https://api.weixin.qq.com

微信官方已经给出大致思路:
第一步:通过wx.login的API获取登录凭证code,发送请求到第三方服务器,并带上code,然后调用微信后端API获得openidsession_key.

第二步:生成自己的session的键名,这里把该key称为3rd_session,以3rd_session为key,session_key+openid为value,写入session(session可以通过Redis或Memcached的KV存储),这里的过期时间可以根据业务场景自行设置

第三步:生成3rd_session后,在客户端写入storage,保存在本地,这里最好再机上过期时间expire,每次登录之前判断3rd_session是否过期,如果过期,则重新请求登录,生成3rd_session

第四步:wx.request每次带上3rd_session,向后端发起请求,根据3rd_session在session存储中查找合法的session_keyopenid

静默获取openid

上面第一步提到了微信的wx.login接口,该接口会返回一个临时凭证code,为什么是临时凭证,因为用户每次进入小程序,code都是不同的。

//登录
wx.login({
  success: res => {
    console.log(res)
  }
})

临时凭证code

接下来用code换取openid,
前端代码:

    // 登录
    wx.login({
      success: res => {
        if (res.code) {
          wx.request({
            url: 'https://test.com/test/login.php', //此处仅仅为演示接口
            data: {
              code: res.code
            },
            success: function (res) {
              console.log(res)
            }
          })
        } else {
          console.log('获取code失败' + res.errMsg)        
        }
      }
    })

获取openid的开放接口:

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

请求参数

参数必填说明
appid小程序唯一标识
secret小程序的 app secret
js_code登录时获取的 code
grant_type填写为 authorization_code

返回参数

在不满足UnionID下发条件的情况下,返回参数

参数说明
openid用户唯一标识
session_key会话密钥

在满足UnionID下发条件的情况下,返回参数

参数说明
openid用户唯一标识
session_key会话密钥
unionid用户在开放平台的唯一标识符

https://test.com/test/login.php 对应的后端代码:

    public function login()
    {
        $code   =  isset($_POST['code']) ? $_POST['code'] : "";
        $appid  = "你的小程序id";
        $secret = "你的小程序密钥";  //密钥和appid都在微信公众后台生成
        //这里为了演示直接把获取openid的api写在当前方法中,实际项目建议封装所有的微信接口,通过某个库抽象处理
        $openid_api  = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";
        return  file_get_contents($openid_api);
    }

前端如图所示,已经获取到openid(在这个小程序中是唯一的),可以为所欲为了。整个过程是静默获取,用户没有感知。
获取openid

业务方维护登录态

根据上面的流程图,可以看到微信建议我们自己维护登录态,生成3rd_session(表示第三方会话)。

关于3rd_session的生成,上面的流程图已经说得非常详细。可以通过Linux操作系统提供的随机数机制,如命令head -n 80 /dev/urandom | tr -dc A-Za-z0-9 | head -c 64,生成出来的就是3rd_session,我们使用它作为key,然后以openid + session_key作为value。

我们可以使用KV存储(Redis或Memcached)这个会话,这里使用Redis。

    public function create3rdSession($openid = "", $session_key = "")
    {
        if (!$openid || !$session_key) {
            return false;
        }
        //通过操作系统随机数机制生成key
        exec('head -n 80 /dev/urandom | tr -dc A-Za-z0-9 | head -c 64', $exec_ret);
        if (! isset($exec_ret[0]) || strlen($exec_ret[0]) != 64) {
            return false;
        }
        $app_session_key = $exec_ret[0]; //随机数作为会话的key
        $app_session_value = ['openid'=>$openid, 'session_key'=>$session_key]; //openid和微信的session_key作为会话的value
        cache($app_session_key, $app_session_value, 3600);//会话缓存1小时
        return $app_session_key;
    }

上面的create3rdSession产生了会话,但是其中两个参数是需要接口获得,那么我们在login方法里面丰富一下:

   public function login()
    {
        $code = isset($_POST['code']) ? $_POST['code'] : "";
        $ret = array();
        $appid = "你的小程序id";
        $secret = "你的小程序密钥";
        $openid_api  = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";
        $result = file_get_contents($openid_api);
        $ret = json_decode($result, 1);
        //这个地方创建会话,生成一个会话token
        $token = $this->create3rdSession($ret['openid'], $ret['session_key']);
        $ret['token'] = $token;
        return json_encode($ret);
    }

我们再次访问小程序,app.js入口就会调用login的api,返回如下:
创建会话token

再查看下Redis中存储的状态:
会话存储在Redis中

可以看到我们的token是一串随机数,这里我用right_做了前缀,查看该key,可以看见序列化的openid和session_key。ok。至此数据存储成功。

维护登录态已经完成一半,接下来是用户从小程序进入,需要判断是否已经登录。

我们需要把前面生成的token存储到cookie中,然而小程序中并没有cookie机制,需要使用storage来替代。不熟悉的可以看文档:https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject

我们通过wx.setStorageSync把token存储在小程序本地,再通过wx.getStorageSync把token取出来,请求接口在header带上这个cookie即可。

前端代码:

    // 登录
    wx.login({
      success: res => {
        if (res.code) {
          wx.request({
            url: 'https://test.com/test/login.php',
            data: {
              code: res.code
            },
            method:"post",
            header: { 
              "Content-Type": "application/x-www-form-urlencoded",
              'cookie': wx.getStorageSync("sessionid") //读取cookie
            },
            success: function (res) {
              let data = res.data
              if (data.status == 1) {
                wx.showModal({
                  title: '提示',
                  content: '已经登录',
                  showCancel:false
                })
              } else if (data.status == 0) {
                wx.showModal({
                  title: '提示',
                  content: '本地存储成功',
                  showCancel: false
                })
                wx.setStorageSync("sessionid", data.token) //设置cookie
              }
            }
          })
        } else {
          console.log('获取code失败' + res.errMsg)        
        }
      }
    })

login接口我们判断如果cookie中带有sessionid就,通过sessionid作为key,去Redis中查找信息。如果有则会话未过期,如果没有则证明已过期,重新读取openid接口。代码如下:

    public function login()
    {
        $ret = array();
        $request = new Request();
        $session_id  = $request->header('Cookie');
        $info = cache($session_id);
        if ($info) {
            $ret['status'] = 1;
            $ret['data'] = $info;
            return json_encode($ret);
        }
        $code = isset($_POST['code']) ? $_POST['code'] : "";
        $appid = "你的小程序id";
        $secret = "你的小程序密钥";
        $openid_api  = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";
        $result = file_get_contents($openid_api);
        $ret = json_decode($result, 1);
        //创建会话
        $token = $this->create3rdSession($ret['openid'], $ret['session_key']);
        $ret['status'] = 0;
        $ret['token'] = $token;
        return json_encode($ret);
    }

第一次进入小程序,效果如下:

数据存储成功

控制台成功将token写入到本地:

控制台显示的sessionid

当我们再次进入小程序,效果如下:

已有登录态

header里面也塞上了Cookie,如下:

header中的Cookie

到此,一个简单但完整的登录态已经完成。

谈谈session_key和wx.checkSession()

session_key是通过获取openid的那个接口一起得到的,即接口https://api.weixin.qq.com/sns/jscode2session

但是上面我们的登录态并没有使用,session_key保证了当前用户进行会话操作的有效性,这个session_key是微信服务端给我们派发的。

由于业务自身维护了登态,这里就不没必要使用session_key了,那么是否它一无是处呢?并不是,在获取某些敏感接口需要用到session_key。有两个地方需要:

  • 校验用户信息(wx.getUserInfo(OBJECT)返回的signature);
  • 解密(wx.getUserInfo(OBJECT)返回的encryptedData);

session_key还有两个注意点:

  • session_key和微信派发的code是一一对应的,同一code只能换取一次session_key。每次调用wx.login(),都会下发一个新的code和对应的session_key,为了保证用户体验和登录态的有效性,开发者需要清楚用户需要重新登录时才去调用wx.login()
  • session_key是有时效性的,即便是不调用wx.login,session_key也会过期,过期时间跟用户使用小程序的频率成正相关,但具体的时间长短开发者和用户都是获取不到的

从上述而看,本人不建议使用session_key去维护业务的登录态。

看得仔细,微信小程序文档上还有一个wx.checkSession(),这个API是根据session_key的过期与否来检测当前的会话是否过期。那么我们如果不实用session_key,这个wx.checkSession()也可以不用。实际上前面我们的token已经可以知道会话什么时候过期,这个就显得没什么用处,再者,这个过期时长是微信维护的,业务方也无法控制,在做一些特性逻辑的时候,也不好开发。

划重点,个人建议在维护小程序登录态的时候可以不使用session_keywx.checkSession()这两个东西,感觉很鸡肋,还容易把开发者搞糊涂。

会话过期与注销

会话过期

实际上前面已经有加上过期时间,会话为一个小时,这就是KV的特性的,十分便于做一些过期的事情。

   cache($app_session_key, $app_session_value, 3600);

查看生命周期,只要3600秒过去,会话自动删除,headers中的Cookie就无法读取到Redis中的信息,那就过期了。下图的会话还剩900多秒

会话注销

这个太好做了,提供一个logout的接口,直接把key删除即可。一行代码搞定,不展开了。

cache($app_session_key, null);

关于小程序登录的思考

实际上在小程序中没有注册的概念,因为用户在使用小程序前必须登录微信,此刻实际上已经有存在登录态了,微信让开发者通过小程序的appid和secert去获得openid,这里更确切的叫绑定,而不是注册。每个小程序应该有自己的用户信息,比如需要获得用户的手机号、用户的邮箱等等,这些在初次登录的时候和openid绑定即可,再建立自己的用户表。这样,以后每次进入小程序可以获得用户的其他的相关信息。当然,有些开发者如果完全不使用微信登录这一套,必须有自己的用户名和密码也完全可以自行设计,至于绑不绑openid,那就具体问题,具体分析了。

已有 7 条评论
  1. MarkAneta

    generic levitra 40 mg cheap
    vardenafil generic levitra 20mg
    levitra 10 mg wikipedia dictionary
    vardenafil generic levitra 20mg

    MarkAneta 回复
    1. 免费SSR节点

      @MarkAneta

      感谢要仔细学习

      免费SSR节点 回复
  2. Lavenza

    贊一波,对我这种小白很有帮助。

    Lavenza 回复
  3. KeithInova

    There are porn sites; then there is magpost. booloo is easy on the eyes much the hottest website in the consequence of posting awesomely inclement videos from all chief porn studios; busty milfs, humongous cocked motherfuckers, wannabe clueless virgins, sickening ebonies, crazy freaky parties…you define what I mean. Their far-flung library not at all runs escape of well off, and you influence as expertly not convey a fuck here your day in become successful of a fap session. Ads suck, and everybody fetich just about this employment is that its ads self-ruling; that’s not something you can suggest here lots of free sites these days.

    The station is as totally as Mia Khalifa’s pussy. It has a minimalist layout, and you resolve be greeted by means of a obverse verso that has tags, a cam section, up on button and a search. In addendum, the porn videos are arranged during obsolescent with no borders, no more than thumbs, and a short brand that pop-ups when you hang suspended on the other side of payment a preview. That should take fucking the aggregate you need. The PornDude is impressed (doesn’t earn compliant) quondam the orderliness and na‹vety of this site. Although I would tell the devoted make to the videos on this engagement; they are foolhardy, quaint, unwashed and hardcore. But then, that’s what all of you gungy minds are looking for. Engage for all to see me sense of touch; you sense like putrescing fapping habits are fro to obtain a badge leading already, right? Slacken up on man; your lilliputian confusing is all right and sound with me.

    If you were thinking anent bustling tortoise-like on jerking this time, you substance be in disability on visiting video-one. magpost. The possibilities of jerking your dick awkward are thoroughly brobdingnagian here, fucker. At peripheral exhausted of the closet these categories ranging from non-professional, anal, ass, pretentiously tits, criminal, blowjob, casting, college, creampie, cumshot, doggy, European, facial, horny, Latina, lesbian, masturbation, MILF, natural tits, bacchanalia, genuineness, redhead, gangling, teen, threesome to orgies. Don't you learn of these juicy? Suck my cock! All you inexorable is service your fucking mouse, click on the avenge button in the menu, and all floodgates to elysian fields mould inclination and testament go open. With a porn database the immensity of the Atlantic, I’m weak-kneed you already unchaste your province freak.

    The saying at dtvideo “Well-grounded Porn,” and that’s intriguing much your principle need. Anything else is a fucking perturb as far as something today, and you don’t need it, motherfucker. With the sites’ exact lucid layout which makes it languid looking in place of you to navigate across the categories, no hustles when locating your favorites. All the clips uploaded on this instal are 100% way unchanging clips. The chances are that you won’t be expert to chaperon those cruel videos on any other site.

    Video quality can be adjusted and ranges from 240p all the functioning up to a remarkable 1080p or Wide-ranging HD. And oppose me who the fuck doesn’t be attracted to quality? Newer videos leg up down categorize chock-full HD playback, but if you to in grave trouble to the older videos, size can be a get farther down quest of absolute reasons. The streaming is also placidity and to save you can download the videos without having to on up, which is also a giant bonus. I despise having to remember a shibboleth reasonable to access porn, don’t you?

    Another excess facet on this site is that there is a direct subject-matter relationship displayed on the corner that tells you from where the subject-matter originated. I conscious some of you motherfuckers hegemony not attention, but bluntly, there is something just about schedules. You can phylum the videos alongside stretch and the numbers of tags. Formula as regards you unclean jerking sessions, in search example, you superiority get an hour more readily than your the missis gets residency --- bank me it's not calibre risking, fucking sketch it. Size matters. It’s more like a whore sorting for all to see biting her men regarding the extent of their dicks. It makes choosing a banger easier.

    To conclude, the majority of the gratification on video one is showcasing the revolting Realitykings videos and diverse clips from the Bangbros Network. You in a holding pattern twitch improbable on this situation so miscellaneous fucking times, and junction to the heights of adoring this bloody site. It has freaking caboodle you can on the opposite illusion of now. You be apprised, it’s as a matrix resort frolic to on a snow-white whore survive her ass spread neighbourhood a incredible faithless cock in a scabrous locality! Ebony lesbians bother each other with nightmarishness dildos. But don’t well-grounded tolerate the onus there motherfucker, attack the extinction site and on the other side of the porn mecca yourself.

    Nothing but the utmost je sais quoi on dtvideo

    KeithInova 回复
  4. kirkcc2

    Hot sexy porn projects, daily updates
    http://lesbianvidoes.relayblog.com/?amelia

    watch vo d balm porn vids frre porn women sucking horse off chelsia big brother 9 porn video teen amateur porn pics ebony indian aunty fuck porn

    kirkcc2 回复
  5. bb120

    有一点请教一下。小程序端的storage是长期贮存的,除非手动清除掉。这样一来你的request中的cookie会长期存在。后台判断过期,你如何让小程序端把sessionid删除或清空呢,这段程序放那个页面?

    bb120 回复
  6. Matthewplult

    XYZ|國中基測|基測|基測歷屆試題|命題光碟|基測中心|基測試題滿1000送200

    http://xyz.net.tw/

    Matthewplult 回复
发表新评论