最近网站PC端集成微信扫码登录,踩了不少坑,在此记录下实现过程和注意事项。

本文目录

一、微信开放平台操作步骤1.创建“网站应用”2.获取AppID和AppSecret二、开发指南三、开发实战1、pom.xml引入jar包2、配置文件添加对应的配置3、初始化配置4、控制层核心代码四、运行效果1.构造pc端链接2.微信扫描生成的二维码3.获取微信用户信息

一、微信开放平台操作步骤

微信开放平台地址:https://open.weixin.qq.com

一定要注意,网站集成微信登录需要在微信开放平台操作,它和微信公众平台不一样,虽然双方最后的用户唯一标识都是openId,但是是不互通的。如果开发平台想和公众平台相互通,两个平台得互相绑定,然后获取唯一识别的unionId。

下面说下在开放平台上的操作步骤:

1.创建“网站应用”

由于到对接PC网站登录,所以创建“网站应用”,操作截图如下:

新建网站应用截图

2.获取AppID和AppSecret

等微信审核通过后,会分配对应的AppId,AppSecret需要管理员扫描生成,生成后截图如下:

查看AppId截图

二、开发指南

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

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

三、开发实战

项目中使用了开源项目WxJava,WxJava源码地址(https://github.com/Wechat-Group/WxJava);

先新建要给Spring Boot项目,具体可以参考文章我之前的文章《Spring Boot入门-快速搭建web项目》;

新建好项目后,继续按照下面步骤操作即可。

1、pom.xml引入jar包

<!-- 微信登录jar -->
<dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>3.3.0</version>
</dependency>

2、配置文件添加对应的配置

配置appId和appSecret,application.yml内如下:

wx:mp:configs:- appid: wx1*********secret: ***********token: aesKey: msgDataFormat:

3、初始化配置

WxMpProperties.java代码如下:

@Data
@ConfigurationProperties(prefix = "wx.mp")
public class WxMpProperties {private List<MpConfig> configs;@Datapublic static class MpConfig {/*** 设置微信公众号的appid*/private String appId;/*** 设置微信公众号的app secret*/private String secret;/*** 设置微信公众号的token*/private String token;/*** 设置微信公众号的EncodingAESKey*/private String aesKey;}}

WxMpConfiguration.java代码如下:

@Slf4j
@Configuration
@EnableConfigurationProperties(WxMpProperties.class)
public class WxMpConfiguration {private static Map<String, WxMpService> mpServices = Maps.newHashMap();public static Map<String, WxMpService> getMpServices() {return mpServices;}@Autowiredprivate WxMpProperties properties;@Autowiredprivate WxMpInRedisConfigStorageMy configStorage;@PostConstructpublic void initServices() {// 代码里 getConfigs()处报错的同学,请注意仔细阅读项目说明,你的IDE需要引入lombok插件!!!!final List<WxMpProperties.MpConfig> configs = this.properties.getConfigs();if (configs == null) {throw new RuntimeException("大哥,拜托先看下项目首页的说明(readme文件),添加下相关配置,注意别配错了!");}mpServices = configs.stream().map(a -> {//redisconfigStorage.setAppId(a.getAppId());configStorage.setSecret(a.getSecret());configStorage.setToken(a.getToken());configStorage.setAesKey(a.getAesKey());WxMpService service = new WxMpServiceImpl();service.setWxMpConfigStorage(configStorage);log.info("配置的appId={}",a.getAppId());return service;}).collect(Collectors.toMap(s -> s.getWxMpConfigStorage().getAppId(), a -> a, (o, n) -> o));}
}

4、控制层核心代码

@Slf4j
@Controller
@RequestMapping("/redirect/{appid}")
public class WxRedirectController {/*** 获取用户信息**/@RequestMapping("/getUserInfo")public void getBase(HttpServletRequest request, HttpServletResponse response, @PathVariable String appid, @RequestParam("code") String code) {WxMpService mpService = WxMpConfiguration.getMpServices().get(appid);try {WxMpOAuth2AccessToken accessToken = mpService.oauth2getAccessToken(code);log.info("accessToken={}", JSON.toJSONString(accessToken));WxMpUser wxMpUser = mpService.oauth2getUserInfo(accessToken, null);log.info("wxMpUser={}", JSON.toJSONString(wxMpUser));} catch (Exception e) {log.error("获取用户信息异常!", e);}}
}

四、运行效果

1.构造pc端链接

https://open.weixin.qq.com/connect/qrconnect?appid=wx12345678redirect_uri=http%3a%2f%2fwww.test.com%2fredirect%2fwx12345678%2fgetUserInfo&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

打开上面链接后截图如下:

2.微信扫描生成的二维码

微信扫描后手机端截图如下:

微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到

http://www.test.com/redirect/wx12345678/getUserInfo?code=CODE&state=STATE

3.获取微信用户信息

控制层代码可以接收到上code和state参数,根据这两个参数可以获取微信用户信息,请求过来后打印用户信息的日志如下:

[http-nio-8104-exec-2] INFO  c.t.m.s.c.WxRedirectController - accessToken={"accessToken":"24_vWnvRSV9vmR7qOqhJKRoER93bhsPg","expiresIn":7200,"openId":"oRXsdsUh6scaKof3D1I4d3c","refreshToken":"24_WmknxCn9ff2Pl2xhLFw-kY96p6zgiqFJy8LMIOP_CaMZOHEM","scope":"snsapi_login","unionId":"oJxUkwfFOSyu1oC6oF2h6pTI"}
[http-nio-8104-exec-2] INFO  c.t.m.s.c.WxRedirectController - wxMpUser={"city":"","country":"","headImgUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4ibeAsuoVIf3qr4QxjnNWh4Q1WiawCFNfzkGMzVqubPOnr0hA3Micwsu1LtblQ7phImdYSC2nic6OUicQ/132","language":"","nickname":"阿白","openId":"oRXsdsUh6scaKof3D1I4d3c","privileges":[],"province":"","sex":0,"sexDesc":"未知","unionId":"oaDUkwVfCpMJOSyu1oC2oF2h6pTI"}

到此PC网站集成微信登录已经全部实现完成了,有问题欢迎留言沟通哦!

热门内容:
  • 为什么强烈推荐 Java 程序员使用 Google Guava 编程!

  • IntelliJ IDEA 2020.3 重大特性

  • 用了3年CAT,这次我想选择SkyWalking,老板反手就是一个赞!

最近面试BAT,整理一份面试资料《Java面试BAT通关手册》,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。
明天见(。・ω・。)ノ♡

利用WxJava实现PC网站集成微信登录功能,核心代码竟然不超过10行相关推荐

  1. 网站集成QQ登录功能

    原文:网站集成QQ登录功能 最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能 ...

  2. 微信开放平台---网站授权微信登录功能(附带源码)

    1 微信开放平台:https://open.weixin.qq.com/ 2 微信官方教程:https://open.weixin.qq.com/cgi-bin/showdocument?action ...

  3. php asp.net core,ASP.NET Core集成微信登录的实例图解

    这篇文章主要介绍了ASP.NET Core集成微信登录的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 工具: Visual Studio 2015 update 3 Asp.Net Co ...

  4. 网站集成第三方登录-微信登录

    网站集成第三方登录-微信登录 课程介绍 1. 第三方登录引入介绍; 2. 网站微信登录原理(重点);oauth2 3. 网站微信登录具体步骤(重点); 4. 常见疑问解答; 5. 功能实现 ...

  5. 企业微信H5_身份验证,PC网站企业微信扫码授权登录

    企业微信H5_身份验证,PC网站企业微信扫码授权登录 文章目录 一.扫码登录配置 1. 企业微信扫码登录接入流程 2. 企业微信扫码登录接入流程拆解 3. 开启网页授权登录 二.实战演练 2.1. 用 ...

  6. 网站使用微信登录接口,所踩的坑...

    一.如何开通微信公众号.微信开发平台.授权认证.接口权限申请等等,这些不在本文描述,请参考官方资料. 二.假设已顺利完成第一步的工作,现在需要在自己开发的网站(PC端.移动端,注意两者略有不同,下文有 ...

  7. Android集成微信登录

    Android集成微信登录是比较常见的了,此次我把自己集成的过程总结出来,供大家学习参考. 1.首先需要你去微信开放平台申请对应的APPID,地址https://open.weixin.qq.com/ ...

  8. 在哪里能收到python实例代码-python实现网站微信登录的示例代码

    最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 python实现网站微信登录的示例代码 微信现在提供两种登录接入方式 移 ...

  9. PC网站接入微信登陆流程四:后端处理登陆后的code,和获取微信登陆用户的信息

    1.文档在这里 ==>> 授权后接口调用(UnionID) 2.前端登陆成功后,需要提交code给后端,后端接受到请求后,进行处理,下面的例子均为Python版本 第一步:通过code获取 ...

最新文章

  1. 构建linux下的web服务器
  2. 评定星级的前端显示js
  3. 中断锁与信号量的一种使用场景
  4. PUTTY、Xshell远程连接Linux与PUTTY、Xshell密匙认证
  5. M2 Spec: an update of M1 Spec
  6. WIFI无线传输模块使用 ESP8266芯片方案接入云平台的方法
  7. FinalTest 基于web的登录口令修改设计
  8. 【转】pthread mutex 基本用法
  9. 量子是什么?为什么可以用来给通信加密?
  10. 动态规划求解限时采药问题(洛谷P1048题题解,Java语言描述)
  11. 深度学习后时代,图灵奖得主Bengio研究核心是什么?
  12. Netty实现原理分析
  13. postgresql 并发访问_PostgreSQL并发控制(显式锁定)
  14. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十四:SD卡模块
  15. 部分beamforming知识汇总
  16. 求点连通度,边连通度
  17. EXCEL中怎样提取部分特定的文本?
  18. Clion远程Linux开发调试环境搭建
  19. 《戏妻族语不正》胡曾
  20. 2014年AVAYA IP Office 合作伙伴大会在北京举行,协作成长,乐在德云

热门文章

  1. 爬虫与浏览器的区别,爬虫产生(出自简书)
  2. scrapy模拟用户登录
  3. 软件工程网络15结对编程作业
  4. ORACLE 用户权限管理
  5. 【bzoj3150】 cqoi2013—新Nim游戏
  6. linux系统中删除文件夹
  7. bat启动/停止oracle服务
  8. spring + Quartz定时任务配置
  9. 电子学会青少年编程等级考试Python一级题目解析10
  10. LeetCode实战:反转字符串