• 本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息的方法拿到...

    本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息的方法拿到code后,完成授权流程,获取用户信息完成;

    一、网页授权获取用户基本信息

    如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称、性别、城市、国家)。利用用户信息,可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。本篇文章是记录通过前端传递code参数到后台获取微信用户信息,如果需要纯Java后端获取用户信息,请查看我上一篇博客:  Java微信公众号开发之网页授权获取用户基本信息

    注:

    注意: “获取用户基本信息接口是在用户和公众号产生消息交互时才能根据用户OpenId获取用户基本信息;而网页授权的方式获取用户基本信息,无需消息交互,只是用户进入到公众号的网页,就可弹出请求用户授权的界面,用户授权后,就可获得其基本信息(此过程甚至不需要用户已经关注公众号。)”;

    二、准备工作

    1、前提

    微信公众号在使用网页授权获取用户信息接口的前提是公众号为服务号,且通过认证在微信公众号请求用户网页授权之前,开发者需要先到公众平台网站的我的服务页中配置授权回调域名
     

    2、回调域名设置

    设置回调域名之前必须要有内网穿透

    2.1、内网穿透

    由于微信是本地开发,需要本地开发测试,准备一个内网穿透,将本地127.0.0.1:端口/项目名下所在的服务穿透到外网去,以便能与微信服务器通讯,开发调试;关于内网穿透的工具有很多,详细可以查看:可以实现内网穿透的几款工具,我个人比较推荐Natapp,我使用的是Natapp,Natapp官网购买地址:https://natapp.cn/  ,Natapp内网穿透开启成功后如下图:

    2.2、登录微信公众平台设置授权网页回调域名

            在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发—— 接口权限——网页服务——网页授权——点击修改——功能设置——网页授权域名——点击设置按钮”,填写授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头; 

     2.3、填写域名的规范性

           授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权


     

    2.4. 设置授权文件

    在上一步填写完域名后,注意很重要的一步将以下文件上传至填写域名或路径指向的web服务器(或虚拟主机)的目录(若填写域名,将文件放置在域名根目录下,例如wx.qq.com/MP_verify_x6qyHYovfWrZHcfo.txt;若填写路径,将文件放置在路径目录下,例如wx.qq.com/mp/MP_verify_x6qyHYovfWrZHcfo.txt),并确保可以访问(比如:http://127.0.0.1:8080/MP_verify_x6qyHYovfWrZHcfo.txt)。这里我放置所部属项目的Tomcat服务器的webapp下面的Root目录下面,如果放置位置不正确或者跳过此步,点击保存按钮会无法通过,切记,这是网页授权的必选;

    2.5、访问效果证明部署没错:

    三、微信网页授权四步流程

    1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页  的。用户感知的就是直接进入了回调页(往往是业务页面) 
     2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权会产生一个授权页面,需要用户手动同意,在用户同意后,就可以通过获取用户基本信息的接口获取该用户的基本信息。 如用户的openid,昵称,性别,头像,所在地等我们需要获取用户信息,这里选择就以snsapi_userinfo为scope发起的网页授权

    具体而言,网页授权流程分为四步:

    1、引导用户进入授权页面同意授权,获取code

    2、通过code换取网页授权access_token(与基础支持中的access_token不同)

    3、如果需要,开发者可以刷新网页授权access_token,避免过期

    4、通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

    以上4步,请详细阅读:微信网页授权官方文档,这里不再累赘

    目录

    1 第一步:用户同意授权,获取code

    2 第二步:通过code换取网页授权access_token

    3 第三步:刷新access_token(如果需要)

    4 第四步:拉取用户信息(需scope为 snsapi_userinfo)

    四、开发网页授权接口
      1. 引入微信SDK依赖,该工具类为:WxJavaweixin-java-tools

    <!-- 微信框架 参考:https://github.com/Wechat-Group/weixin-java-tools -->
          <dependency>
             <groupId>com.github.binarywang</groupId>
             <artifactId>weixin-java-mp</artifactId>
             <version>3.0.0</version>
          </dependency>

    2.创建一个从Controller跳转到测试网页授权的回调地址页面,因为不是前后端分离,所以从后端跳转

     2.1、TestController :

    
    import java.util.Map;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import me.chanjar.weixin.mp.api.WxMpService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
     
    import com.google.common.collect.Maps;
     
    @Controller("mobile/TestController")
    @RequestMapping(value = "/mobile/test")
    public class TestController extends BaseController {
     
        @Autowired
        private WxMpService wxMpService;
    	
     
        @RequestMapping(value = {"/testAuthorize"})
        public String testAuthorize(HttpServletRequest request, HttpServletResponse response, Model model) {
            String openid = (String) request.getSession().getAttribute("openid");
            model.addAttribute("openid", openid);
            return "mobile/modules/app/testAuthorize";
        }
        
    
    	}
    

     2.2、授权回调页面:testAuthorize.jsp

    <%@ page contentType="text/html;charset=UTF-8"%>
    <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
    <%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
    <%@ include file="/WEB-INF/views/mobile/modules/app/include/header.jsp"%><!DOCTYPE >
    <html>
    <head>
    <title>测试授权</title>
    
    
    
    <script>	
    
    
    			
        		function aa(){	
        			/* var openid =  GetUrlParam('curoauth');
        			if(openid != ""){
        				alert(openid);
        				return ;
        			} */
        				   				    				
        		     alert('我要授权');
    				var backUrl = window.location.href;
    				alert("回调地址"+ backUrl);
    				console.log("回调:" + backUrl);				   
    				//跳转至授权页面
    				window.location.href ="http://thinkingcao.natapp1.cc/项目名/api/wechat/authorize"+"?returnUrl="+backUrl;			
    				alert('授权完啦');
    			   }
        		
        		
        		
        		function GetUrlParam(paraName) {
        		    var url = document.location.toString();
        		    var arrObj = url.split("?");
        		    if (arrObj.length > 1) {
        		      var arrPara = arrObj[1].split("&");
        		      var arr;
        		      for (var i = 0; i < arrPara.length; i++) {
        		        arr = arrPara[i].split("=");
        		        if (arr != null && arr[0] == paraName) {
        		          return arr[1];
        		        }
        		      }
        		      return "";
        		    }
        		    else {
        		      return "";
        		    }
        		  }
     				
        		
    			
       		 //判断url后code是否存在,如果不存在说明先执行方法aa(),如果存在,说明需要获取code传到后端,调获取用户信息接口		
       		 var code;    			
       	     if(GetUrlParam('code')) {
       	    	 code=GetUrlParam('code')
       	    	 //设置回调域名这里测试写百度,也可以写当前页面路径
       	    	 var returnUrl = 'http://www.baidu.com';    	        	    	 
       	    	 window.location.href = 'http://xxx.natapp1.cc/项目名/api/wechat/userInfo?code='+code+'&returnUrl='+returnUrl
       	    	    	   	 
       	     }else {
       	    	 aa();
       	     }
        	
        		    	    		     		
        </script>
    
    </head>
    <body>
    	<div class="wrap">
    		<div class="header">
    			<a>
    				<i class="icon-chevron-left"></i>
    			</a>
    			<h3>测试网页授权前端通过Code获取</h3>
    			<a></a>
    		</div>
    		<div class="box bg-grey">
    			<div class="content">
    				<%-- 			<h5>粉丝 openid :${openid}</h5> <br> --%>
    				openid :
    				<input type="text" name="openid" value="${openid}" />
    				userinfo:
    				<input type="text" name="wxMpUser" value="${wxMpUser}">
    			</div>
    
    
    		</div>
    	</div>
    </body>
    </html>

    2.3、新建ApiWeChatOauthController网页授权后台接口Controller

     ApiWeChatOauthController这个API接口为微信网页授权的完整API,其实我们只用传一个参数“回调地址” 到authorize方法就行, authorize方法组装好网页授权链接后会自动重定向到回调地址页面,页面取出链接地址后的Code参数,然后将Code参数传到userInfo方法,即可网页授权获取用户信息,如以上testAuthorize.jsp页面所示

       网页授权接口代码:

    package com.thinkgem.jeesite.modules.app.api.open;
    
    import java.io.UnsupportedEncodingException;
    import java.net.URLDecoder;
    import java.net.URLEncoder;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import lombok.extern.slf4j.Slf4j;
    import me.chanjar.weixin.common.api.WxConsts;
    import me.chanjar.weixin.common.exception.WxErrorException;
    import me.chanjar.weixin.mp.api.WxMpService;
    import me.chanjar.weixin.mp.bean.result.WxMpOAuth2AccessToken;
    import me.chanjar.weixin.mp.bean.result.WxMpUser;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import com.alibaba.fastjson.JSON;
    import com.thinkgem.jeesite.common.utils.HttpTools;
    
    /**
     * <pre>
     * @Desc  提供给第三方授权获取微信用户Openid
     * @author cao_wencao
     * @date 2019年7月26日 上午11:00:17
     * @version V1.0
     * </pre>
     */
    @Controller
    @RequestMapping(value = "/api/wechat")
    @Slf4j
    public class ApiWeChatOauthController {
    
        @Autowired
        private WxMpService wxMpService;
      
        //网页授权方式二
        @GetMapping("/authorize")
        public String authorize(@RequestParam("returnUrl") String returnUrl) throws UnsupportedEncodingException{ 
            String returnUrlEncode =  URLEncoder.encode(returnUrl,"UTF-8");
            String state= "STATE";
            //回调地址
            String requestUrl = "http://thinkingcao.natapp1.cc/greenwx/weixin/test/testAuthorize";
            String redirectURL = wxMpService.oauth2buildAuthorizationUrl(requestUrl, WxConsts.OAuth2Scope.SNSAPI_USERINFO,state);
            log.info("【微信网页授权】获取redirectURL,redirectURL={}", redirectURL);
            return "redirect:" + redirectURL;
        }
     
        @GetMapping("/userInfo")
        public String userInfo(@RequestParam("code") String code,
                             @RequestParam("returnUrl") String returnUrl) throws Exception {
            log.info("【微信网页授权】code={}", code);
            log.info("【微信网页授权】returnUrl={}", returnUrl);
            WxMpUser wxMpUser = null;
            WxMpOAuth2AccessToken wxMpOAuth2AccessToken;
            try {
                wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);
                String lang = "zh_CN";
                wxMpUser = this.wxMpService.oauth2getUserInfo(wxMpOAuth2AccessToken, lang);          
                log.info("【微信网页授权用户的基本信息】wxMpUser={}", JSON.toJSONString(wxMpUser));
            } catch (WxErrorException e) {
                log.info("【微信网页授权】{}", e);
                throw new Exception(e.getError().getErrorMsg());
            }
            return "redirect:" + returnUrl + "?wxMpUser=" + URLEncoder.encode(JSON.toJSONString(wxMpUser),"UTF-8");
        }
    
    
    
    }
    

    4.测试网页授权

       流程:我们先访问页面testAuthorize.jsp,微信开发者工具或手机微信上访问该链接 地址: http://thinkingcao.natapp1.cc/项目名/weixin/test/testAuthorize

                                       

                                  

    以上4步即走完了网页授权接口,获取到了用户信息

    2019-08-05 17:56:39,061 INFO  [modules.app.api.open.ApiWeChatOauthController] - 【微信网页授权】获取redirectURL,redirectURL=https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbdccd10bef235596&redirect_uri=http%3A%2F%2Fthinkingcao.natapp1.cc%2F项目名%2Fweixin%2Ftest%2FtestAuthorize&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
    2019-08-05 17:56:41,001 INFO  [modules.app.api.open.ApiWeChatOauthController] - 【微信网页授权】code=0611WZTk2sj4zD0GUHQk2F1OTk21WZTG
    2019-08-05 17:56:41,001 INFO  [modules.app.api.open.ApiWeChatOauthController] - 【微信网页授权】returnUrl=http://www.baidu.com
    2019-08-05 17:56:41,165 INFO  [modules.app.api.open.ApiWeChatOauthController] - 【微信网页授权用户的基本信息】wxMpUser={"city":"墨尔本","country":"澳大利亚","headImgUrl":"http://thirdwx.qlogo.cn/mmopen/vi_32/MSvp05X6xm2It34WTHMiaXBbo2U2EwPBltdQkq3dqWWgfkFuLEvM2iaAOQjJ1qVg1DU69vlrUEj6pMjDjd0srbZA/132","language":"zh_CN","nickname":"曹","openId":"oJIGa0Xlgv1nAtrWLWMlB75ekNDs","privileges":[],"province":"维多利亚","sex":1,"sexDesc":"男"}
    

     

     
    展开全文
  • 这里我总结了一下微信开发中从网页授权到获取到用户openid,nickname,headimgurl等信息。 微信开发手册 首先要在微信公众平台中配置好网页授权域名,建议设置为项目域名即可。 thinkPHP5的话建议在...
  • 微信网页授权,获取微信code获取access tocken 获取用户信息
  • 首先说一下code的获得,一般只需要读微信这公众号开发文档就OK,但是也有一个坑。 https://mp.weixin.qq.com/wiki 微信公众号开发文档 拿code是要在配置了appID,redirect_uri之后页面跳转回来的页面url上...
  • 微信公众号开发过程中要获取用户信息,需要通过OAuth2.0机制获得code,然后用code换取openID。 1、先确定自己的回调地址,下面拼接地址时需要用到,这里我用REDIRECT_URI代替。 2、拼接地址,如下,细心点看: ...
  • 微信开发中,经常有这样的需求:获得用户头像、绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口...
  • 微信H5授权获取code,拿取用户信息 ##如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。 这是微信给的说明文档,但实际上,我们首先要做的是去微信...
  • 微信开发中,通常要获取点击链接的用户的open_id通常需要这几步。 1、获取code的url,重定向。获取code。 static public function getURL(array $params) { $wx_id = $params['wx_id']; $domain = self::...
  • h5微信网页获取code 2018-05-15 17:09:53
    这两天做微信分享的h5网页,需要微信授权登录,获取用户的相关信息。以前没有做过相关的项目,所以做得相当不顺利。网页开发时的微信授权,首先公司要开通一个公众号,然后需要配置相关的东西:微信网页授权:用于...
  • 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。 现在,我们要实现一个微信内网页,通过微信访问网页时,网页会展示微信用户的个人信息。因为涉及...
  • 除此之外,我们还需要一个内网穿透的工具在开发环境下让微信能访问到我们的域名。我使用的是natapp。此类工具网上有很多,大家可以自行寻找。 这里我们使用微信提供的测试账号来作为演示 二、开始开发 内网穿透就...
  • 微信支付js获取用户code 2015-11-17 10:51:31
    今天微信开发前段需要发送url获取用户code,然后在得到openId,沃采用得方式是两个 一样得页面,回掉地址是第二个页面,不知道还有没有其他方式,在线等。。。
  • 学习微信开发的第一步就是获取用户信息。那么我们用C#怎么开发呢? 根据开发者文档获取用户信息分为4步: 获取code(授权标识)--->通过code掉微信接口获取OpenId(微信公众号每个用户的唯一标识)-->获取...
  • 在公众号开发中一定要获取用户的openid信息,按照微信的文档来就好了。测试没有问题上线后,部分安卓手机会出现无法打开网页的现象。 问题跟踪 通过系统日志发现诡异现象,redirect_uri会被回调n次,而且每次的code...
  • 微信公众号开发获取openID以及用户详细信息,超详细步骤,亲测开发
  • 微信公众号前端获取code 2019-11-12 16:44:46
    function urlResolve () { ... //获取url中"?"符后的字符串 var theRequest = new Object(); //声明一个对象 if(url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&");...
  • 微信公众号的项目中难免会用到支付,用到支付后就必须前端拿到code后去换区openid,在微信公众号中获取授权的有两种方式,一种是静默授权,一种是非静默的授权,具体移步微信公众号开发文档 let origin = ...
  • 微信网页授权获取code值回调两次的问题 问题描述:在调用微信网页授权获取openid值时,先获取code值,但是code值的接口 会走两次回调。而code在6分钟内只能用一次,所以处出现code失效的问题,问题显示错误码:...
  • 微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取
  • 在企业微信中,我们可以开发企业应用。使用企业应用,我们可以访问到外部网站。那么外部网站如何获取到企业微信共享用户id呢?企业微信提供了OAuth的授权登录方式,可以让网页和企业微信共享用户ID,从而免去登录的...
1 2 3 4 5 ... 20
收藏数 31,382
精华内容 12,552