小程序登录详解

article/2025/10/7 10:32:01

小程序登录简单分为以下几步:

  • 使用wx.login获取code值
  • 获取code值后再加 AppID appsecret code 传给后端
  • 后端调接口 拿到 seesion_key openid 返回 token
  • 前端存储token
    在这里插入图片描述

小程序登录的三个角色

  • 小程序
    • 用户使用客户端 由于小程序运行在微信之上 因此小程序可以通过API获取微信用户的身份信息
  • 开发服务器 小程序的后端服务器 用于用户提供服务
  • 微信接口服务 为开发者提供接口服务

小程序获取 code

在小程序中通过 wx.login() 获取登录凭证 code code由小程序内部自动生成 每次调用 wx.login() 获取的code 都不同 需要注意的是 code的有效期为为五分钟 且被微信接口验证一次就失效

发送code

小程序将code 发送给开发者服务器 在获取code后 使用wx.request() 将code 发送给开发者服务器

获取code

开发者服务器将 Appid (微信后台获取) AppSecret (微信后台获取) code
发送给微信接口 检验登录凭证 成功 返回 session_key和 openid等 其中 AppId是小程序的唯一标识 AppSecret 是小程序的密钥 对于微信接口服务而言 他们相当于小程序账号的id 和密码
微信接口返回: session_key 和 openid openid 是用户的唯一标识 seesion_key是对用户数据进行加密签名的密钥

注意: openid 并不等于微信用户的id 同一个微信用户在不同的appid小程序中的 oppenId 是不同的

开发者自定义状态

在用户登录成功后 开发者服务器将openid 和session_key 保存 然后生成一个自定义登录状态的 token (令牌)响应给小程序通过token可以查询到 小程序下次请求时只要携带token 就可以证明用户已经登录

客户端缓存

在这里插入图片描述
在这里插入图片描述

检测用户是否已经登录

一、
微信小程序可以使用wx.checkSession()检查登录状态是否过期就重新登录

wx.checkSession({success:function(){// 登录态未过期}fail:function(){// 登录状态过期wx.login()}
})

注意:wx.getUserInfo() 获取用户信息 wx.getUserInfo() 来获取用户信息 在获取用户信息前 需要调用wx.login 接口 只有用户登录状态 才能获取到用户相关信息

二、

  • token 保存在缓存中 下次启动小程序时 应该判断缓存中是否存在token 并且判断 该token是否过期
app.jscheckLogin:function(callback){var token = this.globalData.tokenif(!token){// 从数据缓存中取tokentoken = wx.getStorageSync('token')if(token){this.globalData.token = token}else{callback({is_login:false})return}}login(){wx.request({  //未登录 重新登录url:".../login",data:{},success:res=>{callback({is_login:true})return}}})}
}onLaunch:function(){// 用于在小程序启动检查用户是否已经登录 如果没有登录则执行登录操作this.checkLogin(res=>{if(!res.is_login){this.login()}})
}

获取用户信息

小程序获取信息有两种方式
一、使用 opne-data 组件 他不需要用户收授权 就可以显示用户的头像 呢陈 性别等方式 适合只展示的情况
二、通过单击按钮 提示用户授权 获取用户信息数据
在小程序早期版本中 微信授权通过wx.getuseInfo() 弹出的 如果在小程序启动时就通过wx.getuserInfo() 申请权限 用户体验会大打折扣 因此新版本中 需要用户主动点击按钮才会弹出 在为其添加 open-type属性 还需绑定bindgetUserInfo属性绑定函数

注意 在用户已经授权后 授权数据会被记录下来 下次启动小程序无需要再次申请授权 若要在启动判断是否授权 可以在 app.js onLouch()函数通过如下代码实现

	wx.getSetting() 用于获取用户当前的设置 可以获取小程序已经向用户获取的权限 res.authSetting[]

如果需要清除授权 可以单击微信开发工具的工具栏的清缓存按钮

开发数据校验与解密

场景: 开发者服务器想要获取用户信息 则需要在小程序端通过wx.request() 将获取到的用户信息发送给开发者服务器 如果我伪装小程序客户端向开发者服务器发送用户信息 开发这服务器就会接收虚假信息 此时就存在一个问题 开发者服务器无法辨别

	wx.getUserInfo(){success:res=>{// res =>// errMsg 错愕信息// userInfo 用户信息对象 不包含 opneid等敏感信息// rawData 不包括敏感信息的原始数据子符串 用于计算签名// signature 使用sha1(rawData  +session_key)得到的字符串 用于校验用户的信息 // encryptedData 包括敏感数据在内的完整用户信息的加密数据// iv 加密算法的初始向量}}
	openID  //用户在当前AppId小程序下的唯一idunionId //同一个微信开放平台账号下的用户唯一idwatermark  // 数据水印  用于校验数据的有效性appid  // 敏感数据归属 appid 开发者可校验次参数与自身的appid 是否一致timestamp: 0 //敏感数据获取的时间戳 开发者可以用于数据时效性校验

注意: session_key 是用户的会话密钥 需要存储在服务器中 调取用户信息等微信接口时 需要用这个会话密钥 才能解密获取相关的数据 为了自身的数据安全 不应该把session_key 下发到小程序 小程序每次调用wx.login() 时会自动生成新的session_key 导致原来的session_key时效


http://chatgpt.dhexx.cn/article/YnJFhBxQ.shtml

相关文章

一个好看的小程序登录页面

文章目录 前言一、效果图二、实现代码 前言 写一个挺好看的小程序页面&#xff0c;发出来记录一下 一、效果图 登录页面&#xff1a; 注册页面&#xff1a; 通过点击注册和登录按钮切换两个页面淡入淡出效果 二、实现代码 wxml: <!--pages/login/login.wxml--> &…

微信小程序的简单登录

这种在前台直接获取openid的方式已经不可以用了&#xff0c;各位想了解新的登录请去http://blog.csdn.net/m0_37992327/article/details/73469087&#xff0c;不过下面的一些东西还是对大家有帮助的&#xff0c;有兴趣的可以看一下&#xff0c;尤其是ssl证书的申请方式。 最近…

微信小程序登录界面

软件安装 这个就不讲了&#xff0c;没安装的可以自行百度安装一下 创建小程序 点击确认后创建完成&#xff0c;然后 创建登录页 然后点击app.json&#xff0c;将pages中的路径改掉 将pages中的路径修改之后&#xff0c;直接保存&#xff0c;会自动生成login文件夹及下边的文件…

微信小程序实现简单登录界面和登录功能

微信小程序实现简单登录界面和登录功能 问题背景 客户端开发和学习过程中&#xff0c;登录功能是一个很常见的场景。本文将介绍&#xff0c;微信小程序开发过程中是如何实现登录界面和登录功能的。 问题分析 话不多说&#xff0c;直接上代码。 (1)index.js文件&#xff0c;代码…

小程序简单的登录界面

造轮子系列复制粘贴&#xff0c;不多说 <view class""><view class"logo h400 flex jc-ai-center"><image src"../../assets/images/yh.png"></image></view><view class"ipt-wrap"><view cla…

微信小程序登录

前段时间发布了一个微信小程序的简单登录&#xff0c;那段时间我一直在忙着项目&#xff0c;有一天&#xff0c;我清闲下来准备进入小程序群里面看一下来着&#xff0c;刚好有人问问题了&#xff0c;我一看这哥们的问题好像是我写的东西啊&#xff0c;我感觉是时候秀一波了&…

小程序微信小程序设计登录页面

Page({data: {phone: ,password: ,success: false,text: },// 获取输入账号 phoneInput: function (e) {this.setData({phone: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录 login: function () {var t…

微信小程序登录页面的实现

微信小程序登录页面 实现在进入微信小程序首页前的登录验证页面&#xff0c;这里有两种方法&#xff0c;但其实原理都是一样的。 1. 在首页中加入一个弹窗作为登录窗口&#xff0c;效果如下图&#xff1a; (1)index.wxml 登录窗口代码如下&#xff1a; <view class"…

微信小程序实战(一)---实现登录界面

昨天小程序第一天公测&#xff0c;就下载个小程序自带IDE玩了玩&#xff0c;看了看API&#xff0c;撸出了个登录界面给大家分享下。 下面是主界面和代码。 index.wxml <view class"container"><view class"usermotto"><text class"us…

微信小程序云开发 之 登录注册界面 详细教程

文章目录 前言一、前期的准备&#xff08;很重要&#xff09;1.程序的需求2.微信开发者文档3.数据库的设计 二、小程序设计阶段1.选择开发方式2.云开发第一步&#xff1a;注册微信小程序&#xff0c;获取小程序的 AppID第二步、创建小程序项目 第三、登录界面的设计1.登录2.注册…

微信小程序的登录界面实现

微信小程序的登录界面实现 <view class"container"><view class"wrapper"><view class"left-top-sign">LOGIN</view><view class"welcome">欢迎回来&#xff01;</view><view class"inp…

微信小程序 如何实现登录

业务流程&#xff1a; 1&#xff1a;首先需要一个按钮触发事件 2&#xff1a;调用微信小程序的登录接口wx.login&#xff0c;拿到code 3&#xff1a;调用微信小程序的获取用户信息的接口wx.getUserProfile&#xff0c;拿到用户的个人信息 4&#xff1a;拿到的个人信息调用后…

小程序登录流程

用户登录是一个系统的必备功能。而小程序的登录流程和Web端又有一些不同&#xff0c;主要是要与微信服务器进行通信验证。下面我们就来看下小程序具体的登录流程。 1.通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息&#xff0c;调用wx.getUserInfo 读取用户…

微信小程序之登录页-------实例

最近在学习微信小程序&#xff0c;下面提供自己做的微信小程序登录页面&#xff0c;仅供参考。 效果图&#xff1a; 目录结构&#xff1a; 图片&#xff1a; name.png key.png 下面是代码&#xff1a; login.wxml&#xff1a; <!--pages/login/login.wxml--> <vie…

微信小程序的登录流程

基本流程&#xff1a; 1、调用 wx.login() 获取 临时登录凭证code &#xff0c;并回传到开发者服务器。 2、调用 auth.code2Session 接口&#xff08;本接口应在服务器端调用&#xff09;&#xff0c;换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识 UnionID&…

微信小程序实现登录页面

wxml文件&#xff1a; <view class"container"> <view class"login-icon"> <image class"login-img" src"../../img/loginLog.jpg"></image> </view> <view class"login-from"> <!…

微信小程序入门(登录页面)

1.首先前往开发者工具下载安装开发工具&#xff1a; 2.安装后微信扫码&#xff0c;并填写自己的AppID选择自己的项目目录后登录&#xff1a; 登陆后点击工具上的编译按钮&#xff0c;可以在工具的左侧模拟器界面看到这个小程序的表现&#xff0c;也可以点击预览按钮&#xff0c…

微信小程序之登录注册界面的实现

初步分析&#xff0c;程序一共有两个界面即&#xff1a;登录界面和注册界面。 但是注册的时候由于不同的注册方式应该有不同的界面支持&#xff0c;故在本程序中我们要写两个注册界面和一个登录界面&#xff0c;两个注册界面分别位手机注册界面和企业用户注册界面。 在微信小程…

微信小程序之登录

目录 1、登录流程时序 1.1、wx.login(Object object) 1.1.1、功能描述 1.1.2、参数 1.1.3、object.success 回调函数 1.2、auth.code2Session 1.2.1、请求地址 1.2.2、请求参数 1.2.3、返回值 2、使用微信登录 2.1、小程序端js文件 2.2、云函数端js文件 3、获取手机…

微信小程序 16 登录界面

16.1 登录界面 html <view class"container"><view class"wrapper"><view class"left-top-sign">LOGIN</view><view class"welcome">欢迎回来&#xff01;</view><view class"input-con…