当前位置:首页 > JS逆向 > 微信小程序实现用户登录功能 和相关知识点

微信小程序实现用户登录功能 和相关知识点

一叶知秋2024-05-11 09:19:54JS逆向4

一、微信小程序的登录流程

(1)重点:

获取微信提供的用户身份标识,从而使开发者服务器识别每一个用户的登录

(2)微信登录流程参与角色:

小程序、开发者服务器、微信接口服务

(3)具体流程:

1》wx.login()方法获取code

2》wx.request()将code发送给开发服务器

3》开发服务器校验登录凭证

4》开发者服务器自定义登录态(开发服务器为用户生成一个token,最后对token进行验证)

二、wx.login()方法

(1)作用

用于获取用户登录临时凭证(code)的方法

换取用户唯一标识(openid)和会话密钥(session_key)

(2)选项

timeout    【number】  超时时间,单位毫秒

success   【function】 接口调用成功的回调函数

fail           【function】  接口调用失败的回调函数

complete 【function】  接口调用完成的回调函数

(3)success回调函数执行后,其参数会接收到一个对象,对象属性为:

code        【string】     用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid、unionid、session_key 等信息

(4)代码示例

4-1》先在vscode中配置好一个简单的服务器代码并且启动服务器运行

如图:我的运行代码为index.js,运行它

const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()
app.use(bodyParser.json())

// 注意:小程序端的appid必须使用真实账号,如果使用测试账号,会出现login code错误
const wx = {
  appid: 'wxea2ce5e7a9ef0f24',
  secret: 'a299f7f4e6f40b8a808454c754ed36d3'
}

var db = {
  session: {},
  user: {}
}

app.post('/login', (req, res) => {
  console.log('login code: ' + req.body.code)
  var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code + '&grant_type=authorization_code'
  request(url, (err, response, body) => {
    console.log('session: ' + body)
    var session = JSON.parse(body)
    if (session.openid) {
      var token = 'token_' + new Date().getTime()
      db.session[token] = session
      if (!db.user[session.openid]) {
        db.user[session.openid] = {
          credit: 100
        }
      }
    }
    res.json({
      token: token
    })
  })
})

app.get('/checklogin', (req, res) => {
  var session = db.session[req.query.token]
  console.log('checklogin: ', session)
    // 将用户是否已经登录的布尔值返回给客户端
  res.json({
    is_login: session !== undefined
  })
})

app.get('/credit', (req, res) => {
  var session = db.session[req.query.token]
  if (session && db.user[session.openid]) {
    res.json({
      credit: db.user[session.openid].credit
    })
  } else {
    res.json({
      err: '用户不存在,或未登录。'
    })
  }
})

app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

4-2》在微信小程序开发者工具中的操作:
index.wxml
<navigation-bar title="用户登录" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <!-- wx.login方法的使用 -->
  <button bind:tap="getCode">获取code</button>
</scroll-view>
index.js
Page({
getCode:function(){
        wx.login({
          success:res=>{
            // res.code的值是用户登录的临时凭证,有效时间5分钟
              console.log("用户登录的临时凭证是:"+res.code);
              if(res.code){
                  wx.request({
                    url: 'http://127.0.0.1:3000/login',
                    method:'POST',
                    data:{ //客户端发送给服务器端要带过去的数据
                        code:res.code
                    }
                  })
              }else{
                  console.log('获取code失败');
              }
          }
        })

    },
})

vscode终端

三、 数据缓存API

(1)作用:

实现数据的本地存储和读取,以便用户在使用小程序时能够获得更好的体验。通过数据缓存API,开发者可以将一些不经常变动但需要频繁使用的数据,如用户登录状态、个性化设置等,存储在小程序的本地缓存中,从而减少与服务器的交互次数,提高小程序的响应速度和用户体验。

简而言之,就是可以实现数据的缓存,加快读取数据速度。在微信小程序里,我们的临时数据(eg:服务器将发送给客户端的token),都缓存在数据缓存中,提高下次打开的速度

(2)方法:

(2-1)异步方法:

wx.setStorage() 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。

wx.getStorage() 从本地缓存中异步获取指定的key的内容信息

wx.getStorageInfo() 异步获取当前storage的相关信息

wx.removeStorage() 从本地缓存中移除指定的key

(2-2)同步方法:

wx.setStorageSync() 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。

wx.getStorageSync() 从本地缓存中同步获取指定 key 的内容。

wx.getStorageInfoSync() 同步获取当前storage的相关信息

wx.removeStorageSync() 从本地缓存中移除指定的key

注意:单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

(3)wx.setStorage() 方法常用选项

key         【string】 本地缓存中指定的key,必填项

data        【any】需要存储到本地的数据。可以是string/object格式

success  【function】接口调用成功的回调函数

fail          【function】 接口调用失败的回调函数

complete【function】 接口调用完成的回调函数

(4)wx.getStorage() 方法常用选项

key          【string】 本地缓存中指定的key,必填项

success  【function】接口调用成功的回调函数

fail          【function】 接口调用失败的回调函数

complete【function】 接口调用完成的回调函数

(5)异步方法 与 同步方法 的区别:

5-1》异步:

不会阻塞当前任务

需要通过传入回调函数获取结果

发生错误时会执行回调函数fail() 或 使用Promise的.catch()方法来处理错误

5-2》同步:

会阻塞代码执行

可能会因为同步方法的调用顺序而导致复杂的逻辑嵌套和回调地狱

优点:代码结构清晰简单,容易理解和维护。 同步方法通常更容易调试,因为它们的执行顺序是确定的。

(6)代码示例:

先启动vscode中的服务器代码

index.wxml中:
<navigation-bar title="用户登录" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<!--wx.login的使用 -->
<button bind:tap="getCode">获取code</button>
<!-- 数据缓存API的使用 -->
  <button bind:tap="write">写缓存</button>
  <button bind:tap="read">读缓存</button>
</scroll-view>

index.js中:
Page({
write:function(){
        // 写缓存
        wx.setStorage({
            key:'username',
            data:'Zhangsan',
        })
    },
    read:function(){
        // 读缓存
        wx.getStorage({
            key:'username',
            success:res=>{
                console.log(res.data);
            }
        })
    },
})

 

四、头像昵称填写

(1)介绍:

用户登录小程序后,显示在页面中的头像和昵称。目前微信小程序不允许开发者在用户未同意授权而展示其头像昵称

(2)头像选择的使用方法:

将button组件的open-type属性值设为chooseAvatar。当用户同意选择头像后,再通过bindchooseavatar绑定方法进行代码编写

(3)昵称选择的使用方法:

将input的type属性值设置为nickname

(4)代码示例:

先启动vscode中的服务器代码
index.wxml中
<!--index.wxml-->
<navigation-bar title="用户登录" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <!-- wx.login方法的使用 -->
  <button bind:tap="getCode">获取code</button>
  <!-- 数据缓存API -->
  <button bind:tap="write">写缓存</button>
  <button bind:tap="read">读缓存</button>
  <!-- 头像昵称填写 -->
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}" mode=""/>
  </button>
  <input type="nickname" class="nickname"/>
</scroll-view>
index.js中:
// index.js
// 先将avatarUrl设置为一个常量
const defaultUrl='../../images/avatar.png'
Page({
data:{
        avatarUrl:defaultUrl
    },
onChooseAvatar:function(e){
        const {avatarUrl}=e.detail;
        this.setData({
            avatarUrl
        })

    }
})
images文件夹下的avatar.png图片为: 

 

点击头像,即可选择。昵称同样

五、app()函数

(1)介绍:

注册小程序。app()函数的参数是一个对象,通过该对象可以指定应用生命周期回调函数

App() 函数必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

(2)常用的应用生命周期回调函数:

onLauch() 监听微信小程序初始化

onShow()监听小程序启动或切前台

onError() 错误监听函数

onHide() 监听小程序切后台

onPageNotFound()页面不存在监听函数

(3)onLauch() 和onload()的区别:

onLauch() 监听整个微信小程序的启动。写在app.js里面。

onload()监听的是页面加载,写在某一个页面里面

(4)代码示例:

运行vscode服务器代码
list.wxml中:
<navigation-bar title="用户登录" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<!-- 头像昵称填写 -->
<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}" mode=""/>
  </button>
  <input type="nickname" class="nickname"/>
<!-- 获取用户积分 -->
<button  bind:tap="getScore">获取用户积分</button>
</scroll-view>

 list.js中:
// pages/list/list.js
const app=getApp(); //通过getApp()方法,能够获取App的实例,从而获取app.js文件中定义的公共数据globalData
const defaultUrl='../../images/avatar.png' // 先将avatarUrl设置为一个常量
Page({
    data: {
        avatarUrl:defaultUrl 
    },
    onChooseAvatar:function(e){
        const {avatarUrl}=e.detail;
        this.setData({
            avatarUrl
        })

    },
    getScore:function(){
        wx.request({
          url: 'http://127.0.0.1:3000/credit',
          data:{
              token:app.globalData.token,
          },
          success:res=>{
              console.log(res.data.credit);
          }
        })
    }

})
app.js中
// app.js
App({
    // 设置一个全局数据,用来保存token
    globalData:{
        token:null //保存token,token能在多个页面中访问
    },
    onLaunch:function(){//监听微信小程序初始化
        // this.login();
        this.checkLogin(res=>{
            console.log("is_login的值:"+res.is_login);
            if(!res.is_login){ //未登录过
                this.login();
            }
        });
    },
    login:function(){
        wx.login({ //获取用户登录临时凭证(code)
          success: (res) => {
              console.log('临时登录凭证:'+res.code);
              wx.request({
                url: 'http://127.0.0.1:3000/login',
                method:'POST',
                data:{
                    code:res.code
                },
                success:res=>{ //wx.request成功的回调
                    console.log("token:"+res.data.token);
                    this.globalData.token=res.data.token;
                    wx.setStorage({
                        key:"token",//本地缓存中指定的数据
                        data:res.data.token //需要存储到本地的数据。
                    })
                }
              })
          },
        })

    },
    checkLogin:function(callback){ //checkLogin检查登录状态,再去执行
        var token =this.globalData.token;
        if(!token){ //token值为空,证明没有登录
            // 再去读缓存,看看是否有token
            token=wx.getStorageSync("token"); //从缓存中同步取token
            //这句代码一定要得出结果方便我们后续的判断,于是使用同步去读取
            if(token){
                this.globalData.token=token; //将缓存里面的token放入globalData的token里面
            }else{
                callback({is_login:false}); //未登录
                return;
            }
        }
        wx.request({ //检查token的有效性
                url: 'http://127.0.0.1:3000/checklogin',
                data:{
                    token:token
                },
                success:res=>{
                    console.log(res);
                    callback({is_login:res.data.is_login});
                }
              })
    }
            
})
 微信小程序开发控制台:

wscode终端: 

扫描二维码推送至手机访问。

版权声明:本站部分文章来自互联网采集,请查看免责申明

本文链接:https://blog.yyzq.team/post/338155.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。