微信扫码登录实战（附代码）

最新推荐文章于 2024-07-29 10:54:32 发布
最新推荐文章于 2024-07-29 10:54:32 发布
阅读量1.3w 收藏 21
点赞数 1
分类专栏： Java

来源：JAVA葵花宝典


导读：由于微信端流量比较足，所以扫码登录系统功能也受到了很多系统的青睐，本文就来详细的解开该技术的面纱。

演示效果

准备工作

1. 需要一个微信开放平台账号，并创建一个网站应用

点击查看该应用，将appid appSecret获取下来，我们后面会用到。

2. 本地启动ngrok,用来配合调试扫码登录授权回调

启动如下：

3. 将本地内网穿透的地址配置进网站应用里面的开发信息-授权回调域

本例所用到的技术

Spring-Boot

Thymeleaf

Httpclient

Json

本例学习要达到的目标

生成全屏网页二维码以及定制化二维码，后者可以进行二维码大小调整，页面布局自行调整，前者则是固定的页面和二维码

分析接入流程和实现功能

列出来的技术

实战

创建spring-boot项目 ，引入相关jar依赖

 

org.springframework.boot

spring-boot-starter-thymeleaf

 

org.springframework.boot

spring-boot-starter-web

 

org.apache.httpcomponents

httpclient

4.1

 

org.json

json

20160810

配置文件

spring.thymeleaf.prefix: classpath:/templates/

spring.thymeleaf.suffix: .html

#微信开放平台创建的网站应用的appsecret

appsecret=

#微信开放平台创建的网站应用的appid

appid=

scope=snsapi_login

#微信开放平台创建的网站 设置的授权回调域

domain=http://test.xcx.cxylt.cn/

server.port=8083

授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

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

1.第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；

2.通过code参数加上AppID和AppSecret等，通过API换取access_token；

3.通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作

简单来讲就是用户在页面生成二维码扫码后进入回调地址，回调地址可以获取code,通过code可以获取accessToken，通过accessToken则可以获取用户的全部信息

第一个二维码页面

后端代码，生成授权地址，让用户点击扫码登录

@RequestMapping("/")

publicStringindex(Model model) throws UnsupportedEncodingException {

StringoauthUrl ="https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

Stringredirect_uri = URLEncoder.encode(callBack,"utf-8"); ;

oauthUrl =  oauthUrl.replace("APPID",appid).replace("REDIRECT_URI",redirect_uri).replace("SCOPE",scope);

model.addAttribute("name","liuzp");

model.addAttribute("oauthUrl",oauthUrl);

return"index";

}

前端代码

<!DOCTYPE html>

 

 

 

 

hello!

点击扫码登录

编写授权后回调方法

@RequestMapping("/callBack")

publicStringcallBack(Stringcode,Stringstate,Model model) throws Exception{

logger.info("进入授权回调,code:{},state:{}",code,state);

//1.通过code获取access_token

Stringurl ="https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";

url = url.replace("APPID",appid).replace("SECRET",appsecret).replace("CODE",code);

StringtokenInfoStr =  HttpRequestUtils.httpGet(url,null,null);

JSONObject tokenInfoObject =newJSONObject(tokenInfoStr);

logger.info("tokenInfoObject:{}",tokenInfoObject);

//2.通过access_token和openid获取用户信息

StringuserInfoUrl ="https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";

userInfoUrl = userInfoUrl.replace("ACCESS_TOKEN",tokenInfoObject.getString("access_token")).replace("OPENID",tokenInfoObject.getString("openid"));

StringuserInfoStr =  HttpRequestUtils.httpGet(userInfoUrl,null,null);

logger.info("userInfoObject:{}",userInfoStr);

model.addAttribute("tokenInfoObject",tokenInfoObject);

model.addAttribute("userInfoObject",userInfoStr);

return"result";

}

回调后跳转页面，这个页面记录授权获取的信息

<!DOCTYPE html>

 

 

 

 

 

你好，授权成功!

 

 

通过code换取access_token 结果:

 

 

通过access_token获取用户信息 结果:

 

自定义二维码页面

后端路由

@RequestMapping("/1")

publicStringindex1(Model model) throws UnsupportedEncodingException {

Stringredirect_uri = URLEncoder.encode(callBack,"utf-8"); ;

model.addAttribute("name","liuzp");

model.addAttribute("appid",appid);

model.addAttribute("scope",scope);

model.addAttribute("redirect_uri",redirect_uri);

return"index1";

}

前台页面

<!DOCTYPE html>

 

 

 

 

 

hello!

 

 

varobj =newWxLogin({

self_redirect:true,

id:"login_container",

appid: [[${appid}]],

scope: [[${scope}]],

redirect_uri: [[${redirect_uri}]],

state:"",

style:"",

href:""

});

两个页面结果页和回调地址都是一致的，这里只是提供两种做法。

源码获取：

https://github.com/pengziliu/spring-boot-2.0-leaning

扩展阅读

扫码登录实现原理

干货 | 京东购物车的 Java 架构实现及原理！

Spring MVC+Spring+Mybatis实现支付宝支付功能（图文详解）

微信公众号：javafirst

扫码关注免费获取更多资源 

Java面试：
关注
专栏目录
微信扫码关注公众号登录功能php实战分享
09-27 353
可以使用轮询或者长连接的方式通过ticket刷新用户扫码状态，检测到已扫描刷新登录状态，用户成功和公众号关联。配置接口，需要是线上能正确收到微信推送消息的地址，关注如果有关注、扫码、收到消息等事件都会推送到该地址。配置接口，需要是线上能正确收到微信推送消息的地址，关注如果有关注、扫码、收到消息等事件都会推送到该地址。此接口地址需要对应微信后台配置的服务器地址，下面示例只添加了关注 扫码，更多方法参考微信官方文档。前端拿到二维码地址后，将二维码展示给页面，二维码过期需要刷新二维码或者提示已过期。
微信扫描二维码登录网站代码示例
12-18
请先下载  snoopy 类 复制代码 代码如下: <?php /**  *  微信公众平台PHP-SDK  *  Wechatauth为非官方微信登陆API  *  用户通过扫描网页提供的二维码实现登陆信息获取  *  主要实现如下功能:  *  get_login_code() 获取登陆授权码, 通过授权码才能获取二维码  *  get_code_image($code=”) 将上面获取的授权码转换为图片二维码  *  verify_code() 鉴定是否登陆成功,返回200为最终授权成功.  *  get_login_cookie() 鉴定成功后调用此方法即可获取用户基本信息  *  s
微信小程序+JAVA实现微信支付
最新发布
student_zz的博客
07-29 3999
时隔两年再次回归 本文主要讲的是小程序实现微信支付功能，后台采用JAVA。 一.准备工作 1.小程序 2.微信商户号 1.商户号申请 这里对小程序的申请不做赘述。 如果没有微信商户号的同学，点击该链接https://pay.weixin.qq.com/，按照下属步骤进行商户号申请。 扫码之后点击"成为商家"，这里主要有个人个体工商户和企业，按照事实填写，然后按照步骤填写就行了。 主要需要营业执照，法人信息，公账信息等。 2.微信商户号关联小程序 点击"产品中心"的"开发配置"，点击"新增授权申请单"。
微信扫码登录
Allen_kai_hui的博客
06-07 1153
微信扫码登陆
微信扫码登录（java）
zip7986的博客
03-03 3563
操作流程：在微信的登录界面上，用户可以选择“扫码登录”选项。此时，系统会生成一个二维码，并提示用户使用另一台设备（如手机）打开微信扫一扫功能进行扫描。在另一台设备上打开微信扫一扫功能后，将摄像头对准二维码进行扫描，微信会自动识别并验证二维码的有效性。验证成功后，登录设备将显示用户的微信账号信息，用户只需点击确认登录按钮即可完成登录过程。应用场景：微信扫码登录广泛应用于各种场景，如电脑端微信登录、网页版微信登录、小程序登录等。此外，许多第三方应用也支持微信扫码登录功能，方便用户快速登录并授权访问相关信息。
第三方网站---站内扫码绑定微信---登录页扫码登录（附代码）
我是谁不重要的博客
04-25 5303
参考博客 https://www.cnblogs.com/0201zcr/p/5133062.html 官方文档 https://open.weixin.qq.com/cgi-bin/showdocument? action=dir_list&t=resource/res_list&verify=1&id=open1419316505&t...
C# aps.net MVC web微信三方扫码登录与授权登录
05-02
【C# ASP.NET MVC Web微信三方扫码登录与授权登录】是一个关于使用C#编程语言、ASP.NET MVC框架，实现微信第三方登录功能的项目。在这个项目中，开发者将学习如何集成微信API，允许用户通过微信账号进行扫码登录或...
Vue项目实战+PHP接口开发（微信扫码关注实现自动登陆）
06-19
本项目以微信扫码关注公众号实现 网站自动登陆这一功能为载体，将会讲解如下主要核心知识点： 前端你将学习到： 一、vue-cli4进行前端项目的创建 二、如何使用vuex进行登陆信息的管理与同步 三、如何使用axios...
微信扫码登录实战项目
08-21
关于微信扫码登录实战项目，我可以提供一些基本的指导和建议。以下是一些步骤和注意事项： 1. 获取微信开发者账号：在开始之前，你需要注册一个微信开发者账号。访问微信公众平台（https://mp.weixin.qq.com/）并...
详解java实现简单扫码登录功能(模仿微信网页版扫码)
08-26
主要介绍了java实现简单扫码登录功能(模仿微信网页版扫码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java 实现微信扫码登录方法（提供前端及后端核心代码）
gdgztt的专栏
12-26 2171
Java 实现微信扫码登录方法（提供前端及后端核心代码）
java简易微信扫码登录
qq_41833449的博客
11-26 970
微信扫码登录准备工作流程项目结构和代码：最终效果注： 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 准备工作 1、微信测试账号 2、外网能够访问的地址，用于微信扫码成功之后回调 流程 1、微信测试账号添加网页授权获取用户基本信息，并修改回调地址（微信测试账号页面） ...
手把手教程用Java实现微信公众号扫码登录功能
黑夜开发者的博客
03-28 4472
微信现今是我们必不可少的社交工具了，围绕微信这个生态实际上有很多东西可以做，今天就通过`Java SpringBoot`项目来用微信公众号参数二维码实现扫码登录。实现的方式很多，今天介绍一下我的思路。
java实现公众号扫码登录和扫码关注（详细）
real_wang_的博客
01-24 5032
java后端公众号扫码登录和扫码关注登录，详细步骤，一看就懂。
java实现微信二维码登录（公众号）
weixin_45441597的博客
03-14 1765
要设置推送消息的url接口和token，目的：之前关注过公众号或者扫码后关注公众号，微信会调用我们这里填写的url接口（像回调，但微信文档说的是推送消息，很多事件都会用到这个接口）如果你想要通过openId获取unionId等用户信息，可以调用下面的方法（测试号没办法获取unionId）3.接收推送消息的代码，就是我们配置url和token的内容调用的接口(放入前面的controller中)2.使用微信公众平台的二维码登录（对接公众号）1.使用微信开放平台的二维码登录（对接微信）2.生成二维码的代码。
微信扫码登录-java
墙上的向日葵。
01-12 672
步骤：1.微信开放平台注册2.完善开发者信息3.申请创建4.填写对应信息 然后坐等审核通过申请创建网站应用 授权回调地址 必须是域名 不能用ip 不能带端口。
Java实现微信公众号扫码登录
PengLes
02-22 2953
Java实现微信公众号扫码登录
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值