uniapp-微信授权登录
目录
一、微信授权登录的介绍
1.用户在微信内点击登录按钮,跳转到授权页面;
2.用户同意授权后,返回授权码给开发者服务器;
3.开发者服务器通过授权码向微信服务器发送请求,获取用户信息;
4.微信服务器返回用户信息给开发者服务器;
5.开发者服务器根据获得的用户信息进行业务处理。
二、uniapp中使用微信授权登录的实现步骤
1.配置微信公众号的开发者账号;
2.在uniapp中引入微信JS-SDK,获取微信授权登录所需的参数;
3.编写uniapp代码实现授权登录功能。
下面将详细讲解以上步骤。
1.配置微信公众号的开发者账号
1.注册微信公众号开发者账号,并创建一个公众号;
3.在“开发-基本配置”中获取AppID和AppSecret。
2.在uniapp中引入微信JS-SDK,获取微信授权登录所需的参数
1.在“开发-基本配置”中配置授权回调域名;
2.在“开发-开发者工具”中生成JS-SDK签名,获取“appId”、“nonceStr”、“timestamp”和“signature”参数。
3.编写uniapp代码实现授权登录功能
1.使用微信JS-SDK获取“code”参数;
2.将“code”参数发送给后端服务器,后端服务器向微信服务器发起请求获取用户信息;
3.在后端服务器中对用户信息进行验证并进行业务处理。
三、详细讲解代码和效果图
1.在“uni.login”中使用“provider: ‘weixin’”参数表示使用微信登录;
2.在“success”回调函数中获取“code”参数,并向后台服务器发送请求;
3.在后台服务器中进行用户信息验证,并返回用户信息。
总之,使用uniapp实现微信授权登录功能并不复杂,只需按照以上步骤进行操作即可。对于想要实现微信授权登录的开发者来说,这篇文章可以作为一个参考。
对于制作这个demo的时候是可以使用的,如果不能使用勿喷,如有问题评论区讨论,谢谢大家
本文将详细介绍如何在uniapp中实现微信授权登录的功能,并附带代码和效果图。包括以下内容:
- 1.微信授权登录的介绍;
- 2.uniapp中使用微信授权登录的实现步骤;
- 3.详细讲解代码和效果图。
一、微信授权登录的介绍
微信授权登录是指在微信内部使用微信账号进行登录的过程,其主要流程如下:
1.用户在微信内点击登录按钮,跳转到授权页面;
2.用户同意授权后,返回授权码给开发者服务器;
3.开发者服务器通过授权码向微信服务器发送请求,获取用户信息;
4.微信服务器返回用户信息给开发者服务器;
5.开发者服务器根据获得的用户信息进行业务处理。
二、uniapp中使用微信授权登录的实现步骤
在uniapp中使用微信授权登录需要经过以下步骤:
-
1.配置微信公众号的开发者账号;
-
2.在uniapp中引入微信JS-SDK,获取微信授权登录所需的参数;
-
3.编写uniapp代码实现授权登录功能。
下面将详细讲解以上步骤。
1.配置微信公众号的开发者账号
在微信公众号开发者平台中配置开发者账号,具体操作如下:
-
1.注册微信公众号开发者账号,并创建一个公众号;
-
2.在“公众号设置”-“功能设置”-“网页授权设置”中设置授权回调域名;
-
3.在“开发-基本配置”中获取AppID和AppSecret。
2.在uniapp中引入微信JS-SDK,获取微信授权登录所需的参数
引入微信JS-SDK需要先在微信公众号开发者平台中进行配置:
-
1.在“开发-基本配置”中配置授权回调域名;
-
2.在“开发-开发者工具”中生成JS-SDK签名,获取“appId”、“nonceStr”、“timestamp”和“signature”参数。
获得以上参数后,在uniapp中使用微信JS-SDK获取“code”参数:
import wx from 'weixin-js-sdk';wx.config({// 配置微信JS-SDK的参数appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['checkJsApi', 'openLocation', 'getLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage'] // 需要使用的微信JS-SDK接口
});wx.ready(function() {// 在微信中使用微信授权登录wx.login({success: function(res) {console.log(res.code); // 获取到用户登录凭证后,通过后台请求接口换取用户信息}});
});
3.编写uniapp代码实现授权登录功能
在uniapp中使用微信授权登录的代码大致流程如下:
-
1.使用微信JS-SDK获取“code”参数;
-
2.将“code”参数发送给后端服务器,后端服务器向微信服务器发起请求获取用户信息;
-
3.在后端服务器中对用户信息进行验证并进行业务处理。
下面是uniapp中实现微信授权登录的代码示例:
uni.login({provider: 'weixin',success: function(res) {console.log(res.code); // 获取到用户登录凭证后,通过后台请求接口换取用户信息uni.request({url: 'https://xxx.com/weixin/login',data: {code: res.code},success: function(res) {console.log(res.data); // 后台返回用户信息}});}
});
三、详细讲解代码和效果图
上面的代码是uniapp中实现微信授权登录的主要部分,其流程如下:
-
1.在“uni.login”中使用“provider: ‘weixin’”参数表示使用微信登录;
-
2.在“success”回调函数中获取“code”参数,并向后台服务器发送请求;
-
3.在后台服务器中进行用户信息验证,并返回用户信息。
下面是使用微信授权登录后的效果图:
授权码的流程由于涉及到微信公众号开发者平台的配置,无法在此展示,但是上面提到了具体的配置和获取参数的步骤,按照步骤逐一完成即可。
总之,使用uniapp实现微信授权登录功能并不复杂,只需按照以上步骤进行操作即可。对于想要实现微信授权登录的开发者来说,这篇文章可以作为一个参考。
相关文章:
uniapp-微信授权登录
目录 一、微信授权登录的介绍 1.用户在微信内点击登录按钮,跳转到授权页面; 2.用户同意授权后,返回授权码给开发者服务器; 3.开发者服务器通过授权码向微信服务器发送请求,获取用户信息; 4.微信服务器…...
在vscode下将ipynb文件转成pdf的方法
正常情况下,可以在vscode的ipynb界面点击上面的三个点,里面有export,可以选择直接输出html和pdf,但是需要latex,由于按扎u安装麻烦,所以我换了一种方法。 ----------------------------------------------…...
css之选择第一个或最后一个元素、第n个标签、选择偶数或奇数标签、选择最后n个标签、等差数列标签的选择、first、last、nth、child
MENU first-child选择列表中的第一个标签last-child选择列表中的最后一个标签nth-child(n)选择列表中的第n个标签nth-child(2n)选择列表中的偶数位标签nth-child(2n-1)选择列表中的奇数位标签nth-child(nm)选择从第m个到最后一个标签nth-child(-nm)选择从第1个到第m个nth-last-…...
CSS实现三角形
CSS实现三角形 前言第一种:bordertransparent第二种borderrgb使用unicode字符 前言 本文讲解三种实现三角形的方式,并且配有图文以及代码解说。那么好,本文正式开始。 第一种:bordertransparent border是边框,而transparent是透明的颜色&a…...
mysql 与 Oracle 的区别,oracle 与 mysql分页查询的区别
文章目录 mysql 与 Oracle 的区别1、并发性2、一致性3、事务4、数据持久性5、提交方式6、逻辑备份7、热备份8、sql语句的扩展和灵活性9、复制10、性能诊断11、权限与安全12、分区表和分区索引13、管理工具 oracle 与 mysql分页查询1.Oracle分页查询中提供了一个伪列:…...
原生实现底部弹窗效果 h5 小程序
<template><div class"home"><div class"btn" click"showPopupshow">弹出底部蒙层</div><div class"popup " catchtouchmove"true" :class"showPopup" ><div class"mask&q…...
最新Midjourney绘画提示词Prompt教程无需魔法
最新Midjourney绘画提示词Prompt教程无需魔法使用 一、AI绘画工具 SparkAi【无需魔法使用】: SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧!本系统使用NestjsVueTypes…...
大一统模型 Universal Instance Perception as Object Discovery and Retrieval 论文阅读笔记
Universal Instance Perception as Object Discovery and Retrieval 论文阅读笔记 一、Abstract二、引言三、相关工作实例感知通过类别名进行检索通过语言表达式的检索通过指代标注的检索 统一的视觉模型Unified Learning ParadigmsUnified Model Architectures 四、方法4.1 Pr…...
java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版
上文java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同我们讲了测试类中 虚拟MVC发送请求 匹配返回内容是否与预期值相同 但是 让我意外的是 既然没人骂我 因为我们实际开发 返回的基本都是json数据 字符串的接口场景是少数的 我们在java文件目录下创建一个 dom…...
react等效memo的方法
视频教程 前端技术|Dan博客|在你写memo()之前_哔哩哔哩_bilibili 把与ExpensiveTree的无关的dom做成一个组件 第二种情况,color在ExpensiveTree组件的父级dom 创建一个组件,将state的color和input写上,而ExpensiveTr…...
2023年亚太杯数学建模A题解题思路(*基于OpenCV的复杂背景下苹果目标的识别定位方法研究)
摘要 由于要求较高的时效性和劳力投入,果实采摘环节成为苹果生产作业中十分重要的一部分。而对于自然环境下生长的苹果,光照影响、枝叶遮挡和果实重叠等情况普遍存在,这严重影响了果实的准确识别以及采摘点的精确定位。针对在复杂背景下苹果的…...
【机器学习】聚类(三):原型聚类:高斯混合聚类
文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 全局调试变量2. 调试函数3. 高斯密度函数(phi)4. E步(getExpectation)…...
线上ES集群参数配置引起的业务异常案例分析
本文介绍了一次排查Elasticsearch node_concurrent_recoveries 引发的性能问题的过程。 一、故障描述 1.1 故障现象 1. 业务反馈 业务部分读请求抛出请求超时的错误。 2. 故障定位信息获取 故障开始时间 19:30左右开始 故障抛出异常日志 错误日志抛出timeout错误。 故障之前…...
【Docker】Docker 仓库管理和Docker Dockerfile
作者简介: 辭七七,目前大二,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖…...
面试必问:如何快速定位BUG?BUG定位技巧及N板斧!
01 定位问题的重要性 很多测试人员可能会说,我的职责就是找到bug,至于找原因并修复,那是开发的事情,关我什么事? 好,我的回答是,如果您只想做一个测试人员最基本最本分的事情,那么可…...
力扣114. 二叉树展开为链表(java,用树模拟链表)
Problem: 114. 二叉树展开为链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 给你二叉树的根结点 root ,请你将它展开为一个单链表: 1.展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左…...
学生成绩管理系统(python实现)
学生成绩表信息包括学号、姓名、各科课程成绩(语文、数学、英语、政治)和总分。用带头结点的单链表管理学生成绩表,每个学生的信息依次从键盘输入,并根据需要进行插入、删除、排序、输出等操作。 import json# 初始化系统 studen…...
【Leetcode合集】1410. HTML 实体解析器
1410. HTML 实体解析器 1410. HTML 实体解析器 代码仓库地址: https://github.com/slience-me/Leetcode 个人博客 :https://slienceme.xyz 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""…...
04-React脚手架 集成Axios
初始化React脚手架 前期准备 1.脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置(语法检查、jsx编译、devServer…)2.下载好了所有相关的依赖3.可以直接运行一个简单效果 2.react提供了一个用于创建react项目的脚手架库…...
时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测
时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiLSTM-Adaboost…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
前端开发者常用网站
Can I use网站:一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use:Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站:MDN JavaScript权威网站:JavaScript | MDN...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件(6类核心文件) 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
DAY 45 超大力王爱学Python
来自超大力王的友情提示:在用tensordoard的时候一定一定要用绝对位置,例如:tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾: tensorboard的发展历史和原理tens…...
6.计算机网络核心知识点精要手册
计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法:数据与控制信息的结构或格式,如同语言中的语法规则语义:控制信息的具体含义和响应方式,规定通信双方"说什么"同步:事件执行的顺序与时序…...
C#中用于控制自定义特性(Attribute)
我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中,Attribute(特性)是一种用于向程序元素(如类、方法、属性等)添加元数据的机制。Attr…...
