web微信扫码登录

article/2025/9/13 2:42:30

微信web扫码登录的大致流程,最后有源码基本是够用了,后续登录这一块会继续完善,会加上shiro、redis,前端准备用react来做,搞个全套的

开始之前我们先来看几个问题,有兴趣的可以了解下欢迎发表评论提出意见

1.为什么网站应用要使用微信登录?

用户开发者
方便(不用忙于记录自己的各种账号密码)能够收集用户的相关信息(大数据时代没数据怎么分析)
txbb的社交平台基本人人持有,你可能不用微博,但不用微信估计够呛完善的API,微信开放平台了解下

看下面几个图感受下掌控社交平台的力量
在这里插入图片描述
在这里插入图片描述

2.微信登录的原理是什么

微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统
那这里有童鞋要问了这个OAuth2.0是什么东西?
OAuth普及:
OAuth2.0是OAuth协议的延续版本,但不向前兼容OAuth 1.0(即完全废止了OAuth1.0)。 OAuth 2.0关注客户端开发者的简易性。要么通过组织在资源拥有者和HTTP服务商之间的被批准的交互动作代表用户,要么允许第三方应用代表用户获得访问的权限。同时为Web应用,桌面应用和手机,和起居室设备提供专门的认证流程。2012年10月,OAuth 2.0协议正式发布为RFC 6749。
实际上就是:
OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用,以微信为例,大多数是你的对外开放信息比如微信头像,昵称等,支付密码什么的想都不要想。
怎么实现的呢:
token这个东西就出来了,可以吧它理解为虎符,皇帝把这个虎符给你,你就可以调用对应权利的士兵。
也由此产生了认证和授权的过程:
这个过程设计三方,

服务提供方用户客户端
例如微信网站应用
存储受保护的资源,如照片,视频,联系人列表存放在服务提供方的受保护的资源的拥有者要访问服务提供方资源的第三方应用,通常是网站,如提供照片打印服务的网站。在认证过程之前,客户端要向服务提供者申请客户端标识

过程如下:
用户想操作存放在服务提供方的资源。
用户登录客户端向服务提供方请求一个临时令牌。
服务提供方验证客户端的身份后,授予一个临时令牌。
客户端获得临时令牌后,将用户引导至服务提供方的授权页面请求用户授权。在这个过程中将临时令牌和客户端的回调连接发送给服务提供方。
用户在服务提供方的网页上输入用户名和密码,然后授权该客户端访问所请求的资源。
授权成功后,服务提供方引导用户返回客户端的网页。
客户端根据临时令牌从服务提供方那里获取访问令牌。
服务提供方根据临时令牌和用户的授权情况授予客户端访问令牌。
客户端使用获取的访问令牌访问存放在服务提供方上的受保护的资源。

3.微信登录开发流程是什么?

首先做好准备工作

  1. 进入微信开放平台并且注册账号
  2. 创建一个网站应用并且审核通过,这时候你会获取AppID和AppSecret

微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

  1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
  2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;
  3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

再看这个图:
在这里插入图片描述
是不是有点感觉了,说了这么多到底怎么实现啊!别急看下边

4.具体开发流程是什么?

第一步:请求CODE
下面代码其实就是带着你的appId去给微信要code。
为什么要这个appId呢?确认你的身份。
这个redirect_uri是什么呢?微信确认你的身份后要把code给你,可以看下图step 4;
例如:redirect_uri: http://192.168.1.53:8080/wx/login
成功之后就会进入这个里了
在这里插入图片描述
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

/*** 回调地址处理* @return*/
@RequestMapping("/getLoginUrl")
public ApiResponse getLoginUrl() {//加密state进行验证 回调地址当天有效 防止恶意攻击byte[] encrypt = AesUtil.encrypt(PWD_MD5 + DateUtils.getYYYYMMdd(), AesUtil.PASSWORD_SECRET_KEY, 16);String url = null;try {url = String.format(AUTHORIZATION_URL, appid, URLEncoder.encode(redirect_uri, "GBK"), SCOPE, AesUtil.parseByte2HexStr(encrypt));} catch (UnsupportedEncodingException e) {log.debug("编码格式--->{},错误", e.getMessage());}return ApiResponse.OK(url);
}

这上边 ApiResponse.OK(url),这里是返回这个url给前端,打开是个微信二维码如图:
在这里插入图片描述
用户微信扫码授权后就会根据重定向地址到如下代码:

 /*** 登录回调地址处理* @param request* @param response* @param code* @param state* @return* @throws IOException*/@RequestMapping("/login")public Object weChatLogin(HttpServletRequest request, HttpServletResponse response, String code, String state) throws IOException {if (StringUtils.isNotEmpty(code) && StringUtils.isNotEmpty(state)) {// 验证state防止跨站请求伪造攻击String decrypt = AesUtil.decrypt(AesUtil.parseHexStr2Byte(state), AesUtil.PASSWORD_SECRET_KEY, 16);if (!decrypt.equals(PWD_MD5 + DateUtils.getYYYYMMdd())) {return ApiResponse.ERROR(SYSTEM_ERROR.getCode(), STATE_ERROR.getMsg(), state);}String responseContent = HttpClientUtils.getInstance().sendHttpGet(String.format(ACCESS_TOKEN_URL, appid, secret, code));if (StringUtils.isEmpty(responseContent)) {return ApiResponse.ERROR(FAILED.getCode(), FAILED.getMsg(), "获取ACCESS_TOKEN失败");}JSONObject parseObject = JSONObject.parseObject(responseContent);AccessToken accessToken = JSONObject.toJavaObject(parseObject, AccessToken.class);if (accessToken != null) {// 根据OPENID查询用户是否存在// SysUserEntity user = weChatLoginService.getUserByOpenId(accessToken.getOpenid());// 增加日志
//                if (user == null) {
//                    // 重定向到绑定账号页面
//                    response.sendRedirect(redirect_bindWeChat + accessToken.getOpenid());
//                } else {
//                     //存在则把当前账号信息授权给扫码用户
//
//                    // 拿到openid获取微信用户的基本信息
//                    String res = HttpClientUtils.getInstance().sendHttpGet(String.format(GET_UNIONID_URL, accessToken.getAccess_token(), accessToken.getOpenid()));
//                    if (StringUtils.isEmpty(res)) {
//                        return null;
//                    }
//                    JSONObject object = JSONObject.parseObject(res);
//                }}}return null;}

这里就不过多说了感觉都能看明白,就说下下图这个:
在这里插入图片描述

由于是有账号密码登录这种情况的,微信扫码初次登录库里是肯定没有的所以有两种:
1.需要绑定账号,即把openId关联已有账号如下:

/*** 微信绑定账号* @param* @return*/
@PostMapping("/bindWeChat")
public ApiResponse bindWeChat() {//把openId绑定给用户return ApiResponse.OK(Boolean.TRUE);
}

2.以当前获取的用户信息创建账号

最后一步点击进入我的gitHub可以查看源码,至此结束

step 1

点击进入微信开放平台

step 2

在这里插入图片描述

step 3

等待审核通过
在这里插入图片描述

step 4

设置域名或ip+port
在这里插入图片描述

step 5

GitHub地址

gitee地址


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

相关文章

使用码上登录实现微信扫一扫登录

微信扫一扫登录测试 码上登录开发和使用登录的时序图准备工作后台开发前端显示 码上登录 码上登录是一个小程序,对个体开发者提供了免费的微信扫一扫登录入口,因为微信开发者需要企业认证,没办法在个人网站上做测试。码上登录相当于一个桥接…

微信扫码登录的一种开发思路

微信扫码授权登录流程: 用户在显示二维码的页面用手机扫码授权页面跳转到指定地址,URL上带有参数code前端通过code向服务端请求用于权限认证的token前端后续请求在请求头带上token作为身份标识 需要解决的问题 按照上述的流程,前端最简单的…

java集成微信扫码登录

具体流程可以看微信官网的扫码登录文档 地址:https://open.weixin.qq.com/cgi-bin/showdocument?actiondir_list&tresource/res_list&verify1&idopen1419316505&token&langzh_CN 一、 前期准备 1、注册 微信开放平台:https://open…

企业微信扫码登录

企业微信扫码登录步骤: 1.首先在要放置二维码的页面提供一个盒子用于防止生成的二维码 2.在当前页面将企业微信提供的js进行引入 3.调用提供的方法实例, 4.要获得扫码成功之后的code和state值,调用服务,就能查到当前用户的token&…

扫描微信二维码实现快速登录

一、什么是二维码 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。二维条码/二维码…

个人网站如何使用微信扫一扫登录---SpringBoot项目

文章目录 前言一、码上登录是什么?二、使用步骤1.登录前准备,获取SecretKey2.前端发起登录请求3.后端调用“码上登录”服务器3.1. 配置文件3.2. 发起请求3.3.返回的参数 4.前端显示二维码5、扫一扫登录6 、登录成功后接收用户信息7、通知前端登录成功并返…

微信扫码登录是如何实现的?

网页版微信刚推出时,无数人被它的登录方式惊艳了一下,不需要输入用户名密码,打开手机微信扫一扫,便自动登录。从原理上讲,二维码只能是一段文本的编码,如何用它实现快捷登录的呢? 打开网页版微…

Python 最强 IDE 详细使用指南!

本文经机器之心(微信公众号:almosthuman2014)授权转载,禁止二次转载 选自RealPython,作者:Jahongir Rahmonov 机器之心编译,参与:魔王 PyCharm 是一种 Python IDE,可以帮…

用 Python 给全球女神颜值排个序

点击上方“码农突围”,马上关注,每天上午8:50准时推送 这里是码农充电第一站,回复“666”,获取一份专属大礼包 真爱,请设置“星标”或点个“在看” 作者 | 数据森麟 来源 | 数据森麟(ID: shujusenlin&#…

官宣:Python 3.8正式发布!来看看有哪些新功能

点击上方“码农突围”,马上关注,每天上午8:50准时推送 这里是码农充电第一站,回复“666”,获取一份专属大礼包 真爱,请设置“星标”或点个“在看” 来源:.python.org 编辑:肖琴,转自…

人工智能可以产生自主意识吗?

作者:人民邮电出版社 链接:https://www.zhihu.com/question/372639666/answer/1343242547 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 「既然人类对自己存在的认知来源于“感知”和“记忆…

CET6 历年真题原词复现 核心词汇 做题技巧 听力拿分技巧汇总(这篇文章是英语四六级考试最后的版本,谢谢大家一路陪伴)

话不多说直接进入 这次是最后一次 也是最用心的一次关于CET6的整理,CET4很简单,我认为没有必要去整理或者帮助各位同学,cet4只是cet6的前置任务罢了,但要是你说你考完cet4就收手了,不考了,不考6级了。我只…

这一款神器,助你秒级定位线上问题!

点击上方“Github中文社区”,关注 触达Github项目来源:https://my.oschina.net/leejun2005/blog/1524687 背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。 尤其是在周末或大半夜,突然群里有人反馈线上机器…

前端工程师高手说说CSS学习中的瓶颈

一、何为瓶颈? “瓶颈”指瓶子的颈部,相对狭窄。这是很传神的一个词,因为狭窄,因此难以突破;但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才&#xff0…

线上服务 CPU 100%?一键定位 so easy!

转自:大数据之路, 链接:my.oschina.net/leejun2005/blog/1524687 背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。 尤其是在周末或大半夜,突然群里有人反馈线上机器负载特别高,不熟…

线上服务 CPU 100% ?一键定位 so easy!

来源:my.oschina.net/leejun2005/blog/1524687 背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。 尤其是在周末或大半夜,突然群里有人反馈线上机器负载特别高,不熟悉定位流程和思路的同学可能登上服务器一…

牛逼的故障诊断工具!秒级定位线上问题

背景 经常做后端服务维护或开发的同学,或多或少都遇到过CPU 负载特别高的问题。尤其是在周末或大半夜(有没有同感,平时不出问题,一到休息或下班时间频繁出故障,有的文末点个在看示意一下),突然群…

推荐一款神器,助你秒级定位线上问题!

来源:my.oschina.net/leejun2005/blog/1524687 背景 经常做后端服务开发的同学,或多或少都遇到过 CPU 负载特别高的问题。 尤其是在周末或大半夜,突然群里有人反馈线上机器负载特别高,不熟悉定位流程和思路的同学可能登上服务器一…

最牛逼的故障诊断工具!秒级定位线上问题

点击下方公众号「关注」和「星标」 回复“1024”获取独家整理的学习资料! 背景 经常做后端服务维护或开发的同学,或多或少都遇到过CPU 负载特别高的问题。尤其是在周末或大半夜(有没有同感,平时不出问题,一到休息或下班…

WheelView地区选择三级联动详解

1. 效果 最近需要做一个地区选择的功能,但是在网上和github上找了很久都没找到满意的,然后朋友推荐了一个给我,我花了点时间把代码大致看懂并改成我想要的,并写上我的理解。效果如图: 2. 注意 a. 首先我们要明白…