微信授权登录01-PC端

目录

## 前言

1.准备工作

1.1 网站域名

1.2 微信开放平台

2.授权授权登录开发

2.1 前端开发

2.1.1 发起授权登录跳转至扫码页面

2.1.2 扫码成功后回调处理

2.2 后端开发

2.2.1  根据code查询用户信息

2.2.2 自动注册登录

## 后记


## 前言

最近整了个AI助手网站,手机号注册登录时需要填手机号验证码什么的有点麻烦,于是考虑加个微信授权登录。PC端这里实现的效果是点击“微信登录”按钮,然后跳转扫码授权页面,打开手机微信扫码后自动登录网站。开发过程中踩了一些坑这里简单记录下:

1.准备工作

1.1 网站域名

需要有个外网可访问的已备案域名,在微信开放平台申请创建网站应用时使用。

1.2 微信开放平台

需要在微信开放平台注册账号,然后在管理中心-网站应用页面创建网站应用,这里需要填写自己网站的相关信息发起申请,一般1天左右会出结果是否通过。通过之后拿到AppID --前端跳转微信授权时用。

开放平台地址: 微信开放平台

2.授权授权登录开发

2.1 前端开发

2.1.1 发起授权登录跳转至扫码页面

微信登录按钮点击事件:

//微信登录
const wxLogin = function () {let protocol = window.location.protocol;let host = window.location.host;let redirect_uri = protocol + '//' + host + '/login'; //扫码后的回调地址let appId = 'xxxxx'; //开放平台AppIDlet wxUrlStart = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=';let wxUrlEnd = '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect';let allUrl = wxUrlStart + encodeURIComponent(redirect_uri) + wxUrlEnd;window.location.replace(allUrl);
}

2.1.2 扫码成功后回调处理

扫码成功后会自动跳转至自定义的回调地址redirect_uri,并带上开放平台返回的code,拿到这个code去后台查询用户信息进行后续自动注册登录操作。

//获取微信授权重定向后的codelet code = getUrlParam('code');if (code) {//微信授权自动注册登录httpPost('/api/user/wxLogin', {code: code}).then((res) => {setUserToken(res.data)router.push('/chat')}).catch((e) => {ElMessage.error('登录失败,' + e.message)})} //页面重定向获取URL中参数值
const getUrlParam = function(queryName) {const queryString = window.location.search;const params = new URLSearchParams(queryString);const value = params.get(queryName);return value ? decodeURIComponent(value) : null;
}

2.2 后端开发

2.2.1  根据code查询用户信息

先拿code获取AccessToken,再拿AccessToken获取用户的openid、昵称等信息,其中openid是用户唯一标识,可以拿来注册登录用。

需要用到的接口地址:

获取AccessToken:https://api.weixin.qq.com/sns/oauth2/access_token

获取用户信息:https://api.weixin.qq.com/sns/userinfo

具体代码开发可参考官方接口文档:网站应用微信登录开发指南

2.2.2 自动注册登录

拿到用户openid后即可作为用户唯一标识进行注册登录操作。

## 后记

至此开发工作已完成,在域名对应的服务器上部署启动项目,测试功能OK即可。

最后提一下自己的小站,支持多种AI对话及MJ绘画功能,欢迎体验交流:小麦AI智能助手

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

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

相关文章

React 学习-5

React 条件渲染: 与js中的写法一致 注意:在 JavaScript 中,true && expression 总是返回 expression,而 false && expression 总是返回 false。 因此,如果条件是 true,&& 右侧的元素就会被渲…

BL120协议Modbus RTU和Modbus TCP互转

Modbus网关BL120是一款专注于Modbus协议之间相互转换的通信设备。Modbus网关BL120支持多种下行采集协议,包括Modbus RTU和Modbus TCP,同时在上行转发协议方面同样支持Modbus RTU和Modbus TCP。Modbus网关为Modbus RTU和Modbus TCP协议的相互转换提供了稳…

回炉重造java----单列集合(List,Set)

体系结构: 集合主要分为两种,单列集合collection和双列集合Map,区别在于单列集合一次插入一条数据,而双列的一次插入类似于key-value的形式 单列集合collection 注:红色的表示是接口,蓝色的是实现类 ①操作功能: 增加: add()&am…

SRS流媒体服务器在Linux下的安装

目录 一、安装 1、切换到管理员权限 2、先安装基础依赖环境 3、下载SRS源文件

引领AI数据标注新纪元:景联文科技为智能未来筑基

在人工智能蓬勃发展的今天,数据如同燃料,驱动着每一次技术飞跃。在这场智能革命的浪潮中,景联文科技凭借其深厚的专业实力与前瞻性的战略眼光,正站在行业前沿,为全球的人工智能企业提供坚实的数据支撑。 全国布局&…

智能座舱语音助手产品方案

一、用户调研与痛点分析 1.目标用户分析 用户画像 性别女性年龄50地域2-3线城市职业退休或退居二线教育中专、 大专、 本科财务家庭财务管理者爱好享受生活、 照顾家庭标签有闲有小钱二、产品定位与卖点提炼 购车目的 愉悦自我, 专属于自己的座驾: 家…

bitmap requires a valid src attribute

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、问题记录四、 推…

ncnn 算子操作描述

ncnn 算子操作描述,具体查询见 ncnn/docs/developer-guide/operators.md at master Tencent/ncnn GitHub 都是从上述地方copy过来的,做备份。 具体如下:(针对有些算子 用pytorch 实现了用例,可以对比学习&#xf…

Java学习笔记网站技术博客汇总

江南一点雨网站 https://www.javaboy.org/ 个人博客 https://yanbingzn.github.io/ CS-Notes 面试笔记 https://www.cyc2018.xyz/ JavaGuide(Java学习&面试指南) https://javaguide.cn/home.html SpringMVC 教程 https://springmvc.javaboy…

C++运算符重载(操作符重载)

运算符重载 1. 运算符重载基础1.1 运算符重载语法1.2 运算符重载细节补充1.3 更多的运算符重载 2. 重载单目运算符3. 如何直接输入输出对象类型——重载运算符 << 和 >>3.1 单个对象实现 cou <<3.2 多个对象实现 cout<<3.3 右移运算符 输入 cin >&g…

Excel-VBA报错01-解决方法

【已删除的部件:部件/xl/vbaProject.bin。(Visual Basic for Applications(VBA))】 1.问题复现&#xff1a; Win10 &#xff1b;64位 &#xff1b;Office Excel 2016 打开带有宏的Excel文件&#xff0c;报错&#xff1a;【已删除的部件&#xff1a;部件/xl/vbaProject.bin。…

KBU1010-ASEMI新能源专用KBU1010

编辑&#xff1a;ll KBU1010-ASEMI新能源专用KBU1010 型号&#xff1a;KBU1010 品牌&#xff1a;ASEMI 封装&#xff1a;KBU-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;10A 功率(Pd)&#xff1a;中小功率 芯片个数&#xff1a;4…

pandas数据清洗和统计实例

步骤&#xff1a; 统计每一个列的标签个数去除或者填充某一列NaN值遍历某一列分组统计在DataFrame中插入行在DataFrame中追加行 pandas读取Json数据或csv数据 以一个json数据为例&#xff0c;只要json每一个object都一致就可以&#xff1a; # 读取json或csv df_f pd.read_…

抖店选品都怎么选品?什么样的产品更吸引人,更具有购买力?

大家好&#xff0c;我是电商花花。 抖店选品一直都是我们无货源商家的核心问题&#xff0c;不管是出单、还是爆单&#xff0c;店铺想要有销量的前提下都是选品。 很多人一上来就是就是选品&#xff0c;没有选品经验还瞎选品&#xff0c;结果到最后选了一堆出单的产品&#xf…

回声消除原理

回声消除原理 回声消除是一种音频处理技术&#xff0c;用于消除声学空间中发生的回声。其基本原理如下&#xff1a; 1. 远端信号估计 捕获远端扬声器发出的信号&#xff08;通常通过麦克风&#xff09;。使用自适应滤波器估计远端信号&#xff0c;即回声信号。 2. 回声信号…

用wordpress建外贸独立站的是主流的外贸建站方式

WordPress因其易用性、灵活性和强大的功能支持&#xff0c;成为了外贸企业首选的网站建设平台。 从技术和功能角度来看&#xff0c;WordPress提供了丰富的主题和插件&#xff0c;这些都是构建专业外贸网站所必需的。例如&#xff0c;有专门为外贸网站设计的主题和插件&#xf…

【栈】Leetcode 验证栈序列

题目讲解 946. 验证栈序列 算法讲解 在这里就只需要模拟一下这个栈的出栈顺序即可&#xff1a;使用一个stack&#xff0c;每次让pushed里面的元素入栈&#xff0c;如果当前栈顶的元素等于poped容器中的当前元素&#xff0c;因此就需要让栈顶元素出栈&#xff0c;poped的遍历…

一篇文章帮你搞定微软云计算证书Renew

IT证书都有过期的时间&#xff0c;像AWS是3年有效期&#xff0c;谷歌是2年&#xff0c;微软是1年&#xff0c;那这些证书到期该怎么Renew更新呢&#xff1f; 小李哥最近的微软AZ-204证书要到期了&#xff0c;到期前半年就会收到Microsoft发来提醒邮件。大家在这半年内任何时间都…

500行代码实现贪吃蛇(2)

文章目录 3. 贪吃蛇的具体实现 3. 贪吃蛇的具体实现 首先&#xff0c;我们要让整个程序适应本地化 int main() {//修改适配本地中文环境setlocale(LC_ALL, "");return 0; }蛇身节点的创建 //蛇身结点的定义 typedef struct SnakeNode {int x; int y;struct SnakeN…

Unity 性能优化之LOD技术(十)

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 LOD技术效果一、LOD技术是什么&#xff1f;二、LODGroup组件介绍三、LODGroup组件使用步骤添加组件添加模型 四、Project Settings中与LOD组件相关参数总结 L…