微信小程序之登录

article/2025/10/8 10:56:18

目录

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、获取手机号码

3.1、小程序端代码

3.2、云函数端js文件


        小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。详情查看:微信官方文档-小程序登录

1、登录流程时序

说明

  1. 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  2. 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key

之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份

注意事项

  1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥
  2. 临时登录凭证 code 只能使用一次

1.1、wx.login(Object object)

1.1.1、功能描述

        调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成

1.1.2、参数

属性类型默认值必填说明
timeoutnumber超时时间,单位ms
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

1.1.3、object.success 回调函数

属性类型说明
codestring用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 auth.code2Session,使用 code 换取 openid、unionid、session_key 等信息

1.2、auth.code2Session

        注意:这个作用于服务端,不要在客户端调用

        登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程

1.2.1、请求地址

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

1.2.2、请求参数

属性类型默认值必填说明
appidstring小程序 appId
secretstring小程序 appSecret
js_codestring登录时获取的 code
grant_typestring授权类型,此处只需填写 authorization_code

1.2.3、返回值

属性类型说明
openidstring用户唯一标识
session_keystring会话密钥
unionidstring用户在开放平台的唯一标识符,若当前小程序已绑定到微信开放平台帐号下会返回,详见 UnionID 机制说明。
errcodenumber错误码
errmsgstring错误信息

errcode 的合法值

说明
-1系统繁忙,此时请开发者稍候再试
0请求成功
40029code 无效
45011频率限制,每个用户每分钟100次
40226高风险等级用户,小程序登录拦截 。风险等级详见用户安全解方案

        我真的是晕倒了,如果你使用的是云开发自带的数据库来存储的话,其实你是不需要获取openid的行为的,但是我一开始不知道呀,弄着弄着发现其实这个是有的,所以就分了两个了,一个是获取微信头像、昵称和openid的,一个是使用自带的获取手机号码的

2、使用微信登录

工作步骤:

  1. wx.getUserProfile弹窗框体显示用户的头像和昵称
  2. 确定后wx.login获取code
  3. 发送命令到服务器获取openid以及账户信息

 2.1、小程序端js文件

async getUserProfile(e) {wx.getUserProfile({desc: '用于获取用户个人信息',success: function (detail) {wx.login({success: res => {var code = res.code; //登录凭证wx.cloud.callFunction({name: "getCurrentUserInfo",data: {encryptedData: detail.encryptedData,iv: detail.iv,code: code,userInfo: detail.rawData}}).then(res => {console.log("res: ",res);var openid = res.result.openid;var status = res.result.status;var phone = res.result.phone;console.log("openid: ",openid);console.log("status: ",status);console.log("phone: ",phone);console.log("nickName: ",detail.userInfo.nickName);if(phone==undefined){console.log("需要绑定手机号");}else{console.log("授权成功");}}).catch(res => {console.log("res3: ",res);})}});},fail: function () {wx.showModal({content: '取消授权将会影响相关服务,您确定取消授权吗?',success (res) {if (res.confirm) {wx.showToast({title: '已取消授权',duration: 1500})} else if (res.cancel) {this.getUserProfile()}}})}})}

2.2、云函数端js文件

cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
let user_id;
let user_uid;
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()let code = event.code;//获取小程序传来的codelet encryptedData = event.encryptedData;//获取小程序传来的encryptedDatalet iv = event.iv;//获取小程序传来的ivlet userInfo = JSON.parse(event.userInfo) //获取个人信息let appid = "xxxxxxxxx";//自己小程序后台管理的appid,可登录小程序后台查看let secret = "xxxxxxxxx";//小程序后台管理的secret,可登录小程序后台查看let grant_type = "authorization_code";// 授权(必填)默认值let url = "https://api.weixin.qq.com/sns/jscode2session?grant_type="+grant_type+"&appid="+appid+"&secret="+secret+"&js_code="+code;const stat = await new Promise((resolve, reject) => {request(url, (err, response, body) => {if (!err && response.statusCode == 200) {let _data = JSON.parse(body)let UserCount = 0;user_id = _data.openiduser_uid = _data.unioniddb.collection('Account').where({user_id: _data.openid // 填入当前用户 openid}).count().then(res => {UserCount = res.total;if(UserCount == 0){/* 插入当前列表 */db.collection('Account').add({data: {user_id: _data.openid,nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,gender: userInfo.gender,phone: ''}}).then(res => {resolve("Insert success!");}).catch(res => {reject("Insert fail!");})}else if(UserCount == 1){/* 更新当前列表 */db.collection('Account').where({user_id: _data.openid // 填入当前用户 openid}).update({data: {nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,gender: userInfo.gender}}).then(res => {resolve("Update success!");}).catch(res => {reject("Update fail!");})}else if(UserCount > 1){/* 删除所有此id的并且重新添加 */db.collection('Account').where({user_id: _data.openid // 填入当前用户 openid}).remove().then(res => {db.collection('Account').add({data: {user_id: _data.openid,nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,gender: userInfo.gender,phone: ''}})resolve("Remove and insert success!");}).catch(res => {reject("Remove fail!");})}})}})})const CurrentPhoneObject = await db.collection('Account').where({user_id: user_id // 填入当前用户 openid}).get()const CurrentPhone = CurrentPhoneObject.data[0].phoneconsole.log("CurrentPhone: ",CurrentPhone);console.log("stat: ",stat);console.log("user_id: ",user_id);console.log("user_uid: ",user_uid);return {status: stat,CurrentPhone: CurrentPhone,openid: user_id,unionid: user_uid}
}

3、获取手机号码

        因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。另外,新版本接口不再需要提前调用wx.login进行登录。

<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

3.1、小程序端代码

 async getPhoneNumber(res) {console.log(res)const errMsg = res.detail.errMsgif (errMsg != "getPhoneNumber:ok"){wx.showToast({title: '授权失败',icon: 'error'})return}const cloudId = res.detail.cloudIDconst cloudIdList = [cloudId]wx.showLoading({title: '获取中',mask: true})const cloudFunRes = await wx.cloud.callFunction({name: "getPhoneNumber",data: {cloudIdList}})console.log("cloudFunRes: ",cloudFunRes)const jsonStr = cloudFunRes.result.dataList[0].jsonconst jsonData = JSON.parse(jsonStr)const phoneNumber = jsonData.data.phoneNumberconsole.log(phoneNumber)this.setData({userPhone: phoneNumber})wx.hideLoading({success: (res) => {},})},

3.2、云函数端js文件

const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event) => {const wxContext = cloud.getWXContext()const openid = wxContext.OPENIDconst appid = wxContext.APPIDconst unionid = wxContext.UNIONIDconst enc = wxContext.ENVconst cloudIdList = event.cloudIdListtry {const result = await cloud.openapi.cloudbase.getOpenData({openid: openid,cloudidList: cloudIdList})const jsonStr = result.dataList[0].jsonconst jsonData = JSON.parse(jsonStr)const phoneNumber = jsonData.data.phoneNumberconsole.log("phoneNumber: ",phoneNumber)return result} catch (err) {return err}
}

主要代码来自博主:https://blog.csdn.net/yancy_peng/article/details/121308428


http://chatgpt.dhexx.cn/article/6V3a3eJY.shtml

相关文章

微信小程序 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…

微信小程序登录注册界面

微信小程序登录注册界面demo,存在不足之处,请指教! 界面图片&#xff1a; 1.js代码&#xff1a; Page({/*** 页面的初始数据*/data: {current:1,codeText:获取验证码,counting:false,},// 登陆注册监听click(e){let index e.currentTarget.dataset.code;this.setData({cur…

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

首先是未登录时的界面&#xff0c;提示用户登录之后使用全部的功能。 用户点击登录&#xff0c;调用API拿到用户的信息并在页面中显示出来&#xff0c;同时将用户的信息保存在本地。向后端发送POST请求&#xff0c;拿到code&#xff0c;拿到token&#xff0c;并保存在本地&…

(一)微信小程序云开发之登录界面设计

最近在开发微信小程序&#xff0c;现阶段采用的云开发的方式。云开发与使用本地服务器开发还存在着一定的差异。本地服务器的开发后续记录。这里并没有记录微信小程序的云开发项目的创建方式。 先对微信小程序简单的登录界面做出实例。 1、登录界面UI 2、代码 2.1wxml login…

微信小程序开发(2)—— 简单的页面登陆实现

微信小程序开发&#xff08;2&#xff09; 二、简单的登陆实现&#xff08;非授权登录&#xff09;新建文件夹进入login.wxml界面进入login.wxss进入login.js进入json进入app.json效果图 二、简单的登陆实现&#xff08;非授权登录&#xff09; 新建文件夹 文件夹内新建js、wx…

微信小程序简洁登录页面(附源码)

文章目录 1.登录页面2.用户不存在3.代码3.1 login.wxml3.2 login.css3.3 login.js 4*斜体样式*.总结 1.登录页面 登录的具体流程 1.当用户输入密码和账号后首先检验账号和密码是否为空 2.若不为空&#xff0c;则将输入的账号发送到后端&#xff0c;首先判断账号是否存在 3.若账…

接口压力测试脚本

performance.py #构造性能测试基类 import re import time import requests import threading #初始化url、method&#xff08;默认get&#xff09;、header&#xff08;默认为空字典&#xff09;等参数, #这里Performance类重写父类threading.Thread的__init__方法,会覆盖父类…

超实用压力测试工具-ab工具

写在前面 在学习ab工具之前&#xff0c;我们需了解几个关于压力测试的概念 吞吐率&#xff08;Requests per second&#xff09; 概念&#xff1a;服务器并发处理能力的量化描述&#xff0c;单位是reqs/s&#xff0c;指的是某个并发用户数下单位时间内处理的请求数。某个并发用…

接口压测测试

Jmeter测试接口&#xff08;包括登陆操作&#xff09; 创建HTTP Request先登录参考&#xff1a; http://blog.csdn.net/ab_2016/article/details/78249686 注意&#xff1a;勾选FollowRedirects 自动重定向Redirect Automatically&#xff1a;HttpClient接收到请求后&#x…

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

【接口压测】

感悟 最近在做的项目中,需要去做核心接口的压测工作,初次在实际项目中进行接口压测,本人属实有点慌张. 在经历了几周的时间,自己的压测脚本,从最初的单线程,变成多线程,最后又通过协程的方式去实现. 接口压测,首先需要去选择一款适合自己的压测工具,jmeter,loadrunner,locust等…

Postman 接口压力测试

第一步&#xff1a;点击Collections中的 按钮新增一个Collection 第二步&#xff1a;新增一个 request 第三步&#xff08;可选&#xff09;&#xff1a;可以分别对 collection 和 request 进行重命名 第四步&#xff1a;修改 request 中的 RequestBody 以及 URL&#xff0c;…

常用的接口测试工具有哪些?

点击上方“朱小厮的博客”&#xff0c;选择“设为星标” 后台回复"加群"&#xff0c;加入新技术群 来源&#xff1a;8rr.co/nxMW Poster 这是火狐浏览器的一个插件&#xff0c;如果你想调试服务器&#xff0c;发出HTTP请求&#xff0c;Poster操作简单&#xff0c;你先…

接口测试工具

一、Apifox和Postman各自的定义 1、Postman是一款支持http协议的接口调试与测试工具&#xff0c;其主要特点就是功能强大&#xff0c;使用简单且易用性好 。无论是开发人员进行接口调试&#xff0c;还是测试人员做接口测试&#xff0c;postman都是我们的首选工具之一 。 2、A…

api接口压力测试

可借助Apache组件进行压力测试 E:\phpStudy\Apache\bin\ab.exe 使用于http请求 E:\phpStudy\Apache\bin\abs.exe 使用于https请求 出现如下图就是请求成功的&#xff0c;执行命令 abs.exe -c 60 -n 1000 https://test.shop.cn/user/login 用于GET请求&#xff0c;并发60&…

一个简单的接口压力测试

最近接到一个需求&#xff0c;对一个微信公众号上的一个登录进行压力测试&#xff0c;看是否存在压力问题。 刚拿到需求有点瞢&#xff0c;1.这个程序不是公司的开发做的&#xff0c;是第三方做的2.没有问题说明&#xff0c;只能自己想把法。 好吧&#xff0c;领导要求完成任务…

API 接口压力测试

1、下载siege的安装包&#xff0c;我用的是siege-4.0.4.tar.gz 版本的。 下载地址&#xff1a;http://download.joedog.org/siege/ cd siege-4.0.4 ./configure make sudo make install 2、测试 post接口 siege -c 100 -t 10s -b http://192.168.***.***:7027/predict P…

ab一款好用的压力测试工具

一、介绍 ab 命令会创建很多的并发访问线程&#xff0c;模拟多个访问者同时对某一 URL 地址进行访问。它的测试目标是基于 URL 的&#xff0c;因此&#xff0c;既可以用来测试 Apache 的负载压力&#xff0c;也可以测试 nginx、lighthttp、tomcat、IIS 等其它 Web 服务器的压力…

强大的接口测试与压力测试工具——postmanjmeter

对于系分的项目&#xff0c;我使用了postman做接口测试&#xff0c;用jmeter做压力测试。下面来谈谈这两个工具的使用方法。 Postman postman是一款很方便的接口测试工具&#xff0c;有app也有chrome插件&#xff0c;它可以模拟用户发起的各类HTTP请求&#xff0c;然后获得相应…