微信扫码登录

一、需求

在PC端的登录页面加个微信扫码的按钮，点击按钮弹出二维码，实现微信扫码登录网站的功能。如图：

二、调研

扫码登录属于微信开放平台提供的API,不是微信公众平台。这里需要注册等配置，暂不赘述。

同时也要注意，如果你也需要微信公众号内的登录授权操作，那么用户唯一标识不应该是openId，而应该是unionId，因为微信公众平台和微信开放平台的openId是不一样的。

三、开始开发

1.后台新增生成二维码图片的接口，因为我这里扫码后跳转的地址不是固定的，所以也用到了这个state参数，如果固定可以写死这个跳转地址。

 /*** 返回二维码** @param state 扫码成功后跳转的链接* @return*/@ResponseBody@RequestMapping(value = "/getQrCode", method = RequestMethod.GET)public String getQrCode(String state) {try {state = StringUtils.isBlank(state) ? "state" : state;//redirectUri 是扫码回调的地址 下一个方法oauthString encodeUri = URLEncoder.encode(redirectUri, "UTF-8");String url = "https://open.weixin.qq.com/connect/qrconnect?" +"appid={appId}&redirect_uri={redirect_uri}&response_type=code&scope=snsapi_login&state={state}#wechat_redirect";String urlReplace = url.replace("{appId}", appId).replace("{redirect_uri}", encodeUri).replace("{state}", state);log.info("-----微信开放平台扫码登录url-----" + urlReplace);return urlReplace;} catch (Exception e) {e.printStackTrace();return null;}}

2.前端调用接口，打开二维码的页面

   //wx_login 是按钮的id$("#wx_login").on("click", function () {$.ajax({url: '二维码接口/getQrCode',async: true,dataType: 'json',type: 'get',success: function (data) {location.href = data;}});});

3.后端新增扫描二维码回调的方法，其中主要做了：

①：微信后台回调该方法，传入code参数，用来获取 accessToken和openId

②：调用微信授权接口即getUserAuthInfo，获取 accessToken和openId

请求方式：GET

URL: https://api.weixin.qqcom/sns/oauth2/access_token?appid={APP_ID}&secret={APP_SECRET}&code={CODE}&grant_type=authorization_code

③：调用微信用户信息接口即getWxAuthUser，获取用户的unionId,昵称等信息。

请求方式：GET

URL: https://api.weixin.qq.com/sns/userinfo?access_token={ACCESS_TOKEN}&openid={OPENID}&lang=zh_CN

/*** pc扫码登录跳转** @return*/@RequestMapping(value = "/oauth", method = RequestMethod.GET)public RedirectView oauth(HttpServletRequest request, HttpServletResponse response) {String code = request.getParameter("code");String state = request.getParameter("state");//appId appSecret 在微信开放平台找到Map<String, String> userAuthMap = userInfoService.getUserAuthInfo(code, appId, appSecret);String accessToken = userAuthMap.get("access_token");String openid = userAuthMap.get("openid");WxAuthUser wxAuthUser = WechatUtil.getWxAuthUser(accessToken, openid);if (wxAuthUser == null) {return null;}//你的登录逻辑String jsonResult = doLogin(wxAuthUser);log.info("-----微信开放平台扫码跳转url-----" + state);RedirectView redirectView = new RedirectView(state);redirectView.setStatusCode(HttpStatus.MOVED_PERMANENTLY);return redirectView;}

最后：总体来说流程比较简单，所以代码贴的不是很全，但是都有讲到。

有一些注意的点比如微信开放平台需要绑定公众号、回调域名等配置。

微信扫码登录_JAVA相关推荐

网站使用微信扫码登录流程
微信扫码登录是一个标准的oauth 2.0的过程. 1.用户请求访问网站,选择微信登录. 2.redirect到微信二维码页面 3.获取微信登录二维码,请求参数包括本网站的appId和登录成功后跳转回 ...
Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
微信扫码登录网页实现原理
扫码登录操作过程浏览器输入:https://wx.qq.com/?lang=zh_CN 手机登录微信,利用"扫一扫"功能扫描网页上的二维码手机扫描成功后,提示"登录网 ...
微信扫码登录实现原理
二维码这把利刃,产品应该用到极致微信扫码登录实现原理转载于:https://www.cnblogs.com/gym333/p/7699885.html
（转）微信扫码登录网页实现原理
扫码登录操作过程浏览器输入:https://wx.qq.com/?lang=zh_CN 手机登录微信,利用"扫一扫"功能扫描网页上的二维码手机扫描成功后,提示"登录网 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
SpringBoot整合微信扫码登录
SpringBoot整合微信扫码登录准备工作基本思路流程搭建SpringBoot 引入依赖加入配置文件代码实现工具类 controller层结果准备工作 1.登录官网了解到,学习者想本 ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...

微信扫码登录_JAVA

微信扫码登录_JAVA相关推荐

最新文章

热门文章