微信小程序:用户微信登录流程(附:流程图+源码)

news2025/7/9 6:30:16

目录

前言

一、微信小程序是什么?

二、业务流程 

        1、使用微信小程序登录的wx.login()方法

        2、后端使用登录凭证换取session_key和openid

        3、前端处理session_key、openid和token

尾言


前言

         随着微信小程序大规模的铺开和宣传,在生活中随处可见微信小程序的影子。在我们身边每个人都在使用微信app,拥有极大的用户群体,而微信小程序是一个基于微信开发出来的“即时APP”,无需下载安装,仅需要在微信中直接点击就可以进行使用,完全符合小程序诞生时的定义“即用即走”,因此它在很短的时间内得到了飞速的发展。那么小程序的登录功能是如何实现的呢,下文将详细介绍。


一、微信小程序是什么?

        小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”,的梦想,用户扫一扫或者搜一下即可打开应用

二、业务流程 

        小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系,下图为登录流程时序:

登录流程时序:

下面将对登录时序图进行详细讲解:

1.使用微信小程序登录的wx.login()方法

        在微信小程序页面或图像加载完成后即在onload()方法里调用wx.login()方法获取用户code。

代码如下(示例): 

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        //上述url地址为后端提供的微信地址,用于前端将code传入后端时所用。
        data: {
          code: res.code
        //res.code为通过wx.login拿到的code,code字段由后端定义,具体要求由后端规定
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

2.后端使用登录凭证换取session_key和openid

        

        当后端同学拿到code之后,将code和AppID+AppSecret对接微信接口服务换取session_key和openid和后端生成的token通过code数据交互接口传回前端。AppID和AppSecret相当于微信小程序的身份证,获取方法:登录微信小程序的管理系统——>开发管理——>开发设置。如图所示:


 3、前端处理session_key、openid和token

         前端拿到session_key、openid和token之后将session_key、openid和token存入缓存,再微信小程序后续的接口请求都带上token进行请求。存入微信缓存方法如下:

    
this.$storageSync.set("codegetOpen", res.data.codegetOpen)
this.$storageSync.set("codegetSess", res.data.codegetSess)
this.$storageSync.set("userToken", res.data.token)

//该代码段写在登录接口成功的回调函数里,res.data为后端返回的数据,具体根据返回时的数据结构不同取值

     

        接口如何请求携带token具体看你的微信小程序封装的网络请求。这里提供未封装的原生网络请求方法,代码如下:

wx.request({
  url: 'example.php', //仅为示例,并非真实的接口地址
  data: {
       
  },
  header: {
    'content-type': 'application/json' // 默认值
     Authorization:this.$storageSync.get("userToken"),//从缓存中拿到token并携带请求!
  },
  success (res) {
    console.log(res.data)
  }
})

尾言:

      好啦,这次微信小程序登录的流程就到这里结束啦,对了,我很高兴加入CSDN社区的大家庭,本人为本科在校大三计算机科学与技术的学生,目前在一家上市互联网厂实习,我主要的开发方向为前端方向,是一名初级的小前端,将来我将在CSDN上分享很多技术干活,以及在开发过程中遇到的一些问题,以及解决方案。要是有什么问题可以私信我,我看到一定会回复你们的呀

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue2常见面试题

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 ,vue 里面是怎么处理的?2、生命周期Vue 生命周期都有哪些?父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信(组件间传值)5、$nextTick6、修饰…

【微信小程序】自定义组件(二)

🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识,那么今天牛牛就来讲讲自定义组件的进阶知识吧,赶紧拿起小本本做笔记…

vue中三种for循环(含案例分析)

这里写目录标题三种for循环1.普通的for循环2.for in 循环3.for of 循环总结三种for循环 vue中的for循环有三种 :1.普通的for循环 ,2.for in 循环 ,3.for of 循环 它们三个各自有各自的特点和作用,下面我会用一个小案例来帮助大家理解它们三个的区别 (三…

【宜搭】低代码开发师高级认证实操题1难点指导

难度: 较难 知识点: 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写 在本文中,我将根据题目的每一点要求,对于我在实操过程中遇到的难点进行比较详细的介绍,供大家参考,希望能够对大家有所帮助…

Bootstrap从入门到精通(全)

目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式4. 表单4.1 控件4.2 布局5. 插件5.1 导航框5.2 下拉菜单前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通(全)css属性从入…

CSS6大种选择器(超详细!!!!!!)

文章目录一、常用的css基本选择器(4种)1、标签选择器2、类选择器3.id选择器区别:4、通配符选择器二、复合选择器 (2种)1、交集选择器2、并集选择器三、属性选择器(5种)四、关系选择器(4种)五、伪类选择器1、元素选择伪类选择器2、否定伪类选择器3、特殊应用的伪类六…

基于Java+SpringBoot+vue+elementui图书商城系统设计实现

博主介绍:✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取联系🍅精彩专栏推荐订阅👇&#x1f…

完美解决el-cascader回显失败问题

项目场景&#xff1a; 项目场景&#xff1a;接手了一些老项目&#xff0c;需要做一些日志相关的操作&#xff0c;从后台日志跳转到相应页面要带上原来的请求参数&#xff0c;涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件&#xff0c;赋值之后它…

前端与后端传递数据 — — JSON

前端与后端传递数据 — — JSON 1 前端传送JSON数据给后端 1.1 application/x-www-form-urlencoded默认格式 1.1.1 通过HttpServletRequest获取数据 /*** 通过request获取数据* param request* return*/PostMapping("/testDefaultWithNoAnno1")public String test…

自主Web服务器Http_Server

目录自主web服务器背景目标描述技术特点项目定位项目实现过程创建HttpServer基础框架TcpServer.hppHttpServer.hppLog.hppProtocol.hpp解析C端发来的HTTP报文MSG_PEEK标志位Util.hpp构建请求与响应类读取,解析请求构建响应读取请求解析请求构建响应stat系统函数发送响应sendfil…

使用uni-app开发App简易教程

使用uni-app开发App简易教程前言app端开发步骤1、 申请uniapp开发者账号2、登录后开始新建应用3、下载安装 HBuildder X 。4、新建项目5、开启webview&#xff0c;在pages-index里面写一点点代码6、配置mainifest.json7、打包h5工程配置在html中引入uniapp-sdk解决后退问题上架…

【vue2小知识】实现directive自定义指令的封装与全局注册

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;将我们的自定义指令directive统一管理并批量注册 目录 一、directive自定义指令介绍 二…

Cannot read properties of undefined (reading ‘validate‘)“

1、注意两个地方 1、ref前面 加冒号“&#xff1a;”&#xff0c;还是不加冒号。 2、this.$refs[value].validate()>&#xff08;&#xff09;&#xff0c;更改为this.$refs[value].validate()>(), 不排除this.$refs[value].validate()>(),有时候不会报错 2、示范代码…

解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supp…

npm sill idealTree buildDeps 安装踩坑指南(详细版)

背景&#xff1a; 已通过nvm安装node 18.8 需要运行 npx create-react-app demo01 首次提醒npm版本过低&#xff0c;但是更新npm失败&#xff0c;并且不再报错&#xff08;安装其他包同样不报错&#xff09; 且换源无果&#xff08;更换淘宝源、清除缓存没效果&#xff09;&am…

【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)

文章目录前言一、认识云IDE1.1、CSDN.开发云1.2、秘钥管理二、实战-使用云IDE2.1、初步实战springboot-demo&#xff08;clone默认模板代码&#xff09;2.1.1、新建工作空间2.1.2、启动springboot-demo项目2.1.3、编写一个helloworld接口2.2、运行前端工程项目2.2.1、初步尝试—…

Node.js卸载与重装,zip与msi安装详解

Node js卸载与重装&#xff0c;zip与msi安装详解 文章目录Node js卸载与重装&#xff0c;zip与msi安装详解卸载安装选择msi下载安装第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;选择zip压缩包安装&#xff08;选择msi安装的已可以看下这个&#xff09;第一步&#…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09;项目演示1、登录注册页面2、图片验证码3、修改 axios4、写到最后&#xff08;附源码&#xff09;系列内容参考链接基于 Vue3.x Vant U…

Vue3预览并打印PDF的两种方法

项目场景&#xff1a;后台接口请求数据&#xff0c;返回PDF文档的链接&#xff0c;在vue3页面可预览和打印该PDF。 在之前的Vue2项目中&#xff0c;预览并打印PDF用的是vue-pdf这个插件&#xff0c;但在vue3中是不支持的&#xff0c;只能换个插件了&#xff0c;于是经过测试&a…

jquery怎么给元素设置属性

设置方法&#xff1a;1、使用attr()方法&#xff0c;语法“$(selector).attr(属性名,值)”或“$(selector).attr({属性名:值;})”&#xff1b;2、使用prop()方法&#xff0c;语法“$(selector).prop(属性名,值)”。 1、使用attr()方法 attr() 方法设置或返回被选元素的属性值…