hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

在微信小程序中用户登录和登录状况保护_微信小程序

2020-06-29小程序ki4网9°c
A+ A-

更新申明:

由于微信小程序官方对相干API的改版,所以登录这块功用流程有一些更改,因而近来再次更新了另一篇文章(附视频申明和完整示例代码),人人可与本文一同举行浏览参考:

微信小程序接口改版后的登录和会话坚持流程

供运用户登录以及保护用户的登录状况,是一个具有用户体系的软件运用广泛须要做的事变。像微信如许的一个社交平台,假如做一个小程序运用,我们大概很少会去做一个完整离开和舍弃衔接用户信息的纯东西软件。

让用户登录,标识用户和猎取用户信息,以用户为中心供应效劳,是大部份小程序都邑做的事变。我们本日就来相识下在小程序中,怎样做用户登录,以及怎样去保护这个登录后的会话(Session)状况。

在微信小程序中,我们大抵会涉及到以下三类登录体式格局:

  • 自有的账号注册和登录
  • 运用其他第三方平台账号登录
  • 运用微信账号登录(即直接运用当前已登录的微信账号来作为小程序的用户举行登录)

第一和第二种体式格局是如今Web运用中最罕见的两种体式格局,在微信小程序中一样能够运用,然则须要值的注重的是,小程序中没有Cookie的机制,所以在运用这2种体式格局前,请确认你们或第三方的API是不是须要依靠Cookie;另有小程序中也不支持HTML页面,那些须要运用页面重定向来举行登录的第三方API就须要革新,或不能用了。

我们本日重要来讨论一下第三种体式格局,即怎样运用微信账号举行登录,由于这类体式格局和微信平台连系最严密,用户体验比较好。

登录流程

援用小程序官方文档的登录流程图,全部登录流程基础以下图所示:

该图中,“小程序”指的就是我们运用小程序框架写的代码部份,“第三方效劳器”平常就是我们本身的背景效劳程序,“微信效劳器”是微信官方的API效劳器。

下面我们来逐渐剖析一下这个流程图。

步骤1:在客户端猎取当前登录微信用户的登录凭据(code)

在小程序中登录的第一步,就是先猎取登录凭据。我们能够运用wx.login()要领并获得一个登录凭据。

我们能够在小程序的App代码中提议登录凭据要求,也能够在其他任何Page页面代码中提议登录凭据要求,重要依据你小程序的实际须要。

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('猎取用户登录凭据:' + code);
        } else {
          console.log('猎取用户登录态失利:' + res.errMsg);
        }
      }
    });
  }
})

步骤2:将登录凭据发往你的效劳端,并在你的效劳端运用该凭据向微信效劳器调换该微信用户的唯一标识(openid)会话密钥(session_key)

起首,我们运用wx.request()要领,要求我们本身完成的一个背景API,并将登录凭据(code)照顾过去,例如在我们前面代码的基础上增添:

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('猎取用户登录凭据:' + code);

          // --------- 发送凭据 ------------------
          wx.request({
            url: 'https://www.my-domain.com/wx/onlogin',
            data: { code: code }
          })
          // ------------------------------------

        } else {
          console.log('猎取用户登录态失利:' + res.errMsg);
        }
      }
    });
  }
})

你的背景效劳(/wx/onlogin)接着须要运用这个通报过来的登录凭据,去挪用微信接口调换openid和session_key,接口地点花样以下所示:

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

这里是我运用了Node.js Express构建的背景效劳的代码,仅供参考:

router.get('/wx/onlogin', function (req, res, next) {
  let code = req.query.code

  request.get({
    uri: 'https://api.weixin.qq.com/sns/jscode2session',
    json: true,
    qs: {
      grant_type: 'authorization_code',
      appid: '你小程序的APPID',
      secret: '你小程序的SECRET',
      js_code: code
    }
  }, (err, response, data) => {
    if (response.statusCode === 200) {
      console.log("[openid]", data.openid)
      console.log("[session_key]", data.session_key)

      //TODO: 生成一个唯一字符串sessionid作为键,将openid和session_key作为值,存入redis,超时时刻设置为2小时
      //伪代码: redisStore.set(sessionid, openid + session_key, 7200)

      res.json({ sessionid: sessionid })
    } else {
      console.log("[error]", err)
      res.json(err)
    }
  })
})

这段背景代码胜利实行的话,就能够获得openid和session_key。这个信息就是当前微信账户在微信效劳器那里的登录态了。

然则,为了平安方面的缘由,请不要直接运用这些信息作为你小程序的用户标识和session标识回传到小程序客户端中去,我们应该在效劳器端做一层本身的session,将这个微信账号登录态生成一个session id并保护在我们本身的session机制中,然后把这个session id派发到小程序客户端作为session标识来运用。

关于怎样在效劳器端做这个session机制,我们如今平常采纳键值对存储东西来做,比方redis。我们为每一个session生成一个唯一的字符串作为键,然后能够将session_key和openid作为值,存入redis中,为了平安,存入的时刻还应设置一个超时的时刻。

步骤3:在客户端保留sessionid

开发Web运用的时刻,在客户端(浏览器)中,我们通常将session id存放在cookie中,然则小程序没有cookie机制,所以不能采纳cookie了,然则小程序有当地的storage,所以我们能够运用storage来保留sessionid,以供后续的背景API挪用所运用。

在以后,挪用那些须要登录后才有权限的接见的背景效劳时,你能够将保留在storage中的sessionid掏出并照顾在要求中(能够放在header中照顾,也能够放在querystring中,或是放在body中,依据你本身的须要来运用),通报到背景效劳,背景代码中猎取到该sessionid后,从redis中查找是不是有该sessionid存在,存在的话,即确认该session是有用的,继承后续的代码实行,不然举行错误处理。

这是一个须要session考证的背景效劳示例,我的sessionid是放在header中通报的,所以在这个示例中,是从要求的header中猎取sessionid:

router.get('/wx/products/list', function (req, res, next) {
  let sessionid = req.header("sessionid")
  let sessionVal = redisStore.get(sessionid)

  if (sessionVal) {
    // 实行其他营业代码
  } else {
    // 实行错误处理
  }
})

好了,经由过程微信账号举行小程序登录和状况保护的简朴流程就是如许,相识这些知识点以后,再基于此举行后续的开发就会变得更轻易了。

别的,腾讯前端团队也开源了他们封装的相干库Wafer,能够自创和运用。

  • 效劳端SDK: wafer-node-session
  • 小程序端SDK: wafer-client-sdk

谢谢浏览我的文章,若有疑问或写错的地方请不吝留言见教。

一斤代码的《微信小程序》相干教程文章
一斤代码的《从编程小白到全栈开发》系列教程文章

引荐教程:《Vue.js教程引荐:最新的5个vue.js视频教程精选》

以上就是在微信小程序中用户登录和登录状况保护的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
在微信小程序中用户登录和登录状况保护_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>