2017-03-06 11:27:24 zhuming3834 阅读数 4548
  • httpclient4.5企业跨域技术从初级到大神

    企业的很多技术都是保密的,同时企业的很多互联网企业的技术都是前沿的前辈研究心血的结果。本课将用亲民化的语言讲解企业常用的HttpClient技术,其中httpClient是取用4.5版本,官网新稳定版本。

    3484 人正在学习 去看看 Array老师

流程

  1. 用户扫码或者直接点击链接进入我们的入口页面;
  2. 进入授权登录页面,用户点击授权登录按钮;
  3. 微信会自动将我么的网页授权域名后增加参数;
  4. 根据微信给的code去获取当前登录的微信用户的用户信息。

流程图

具体操作过程

1.配置网页授权域名
图1
图2
这里的域名设置只能设置一个,要求就按照微信的操作就可以。由于这个域名还是公司的,所以这里都马赛克处理了。
我们需要确保我们获取了权限
开发–>权限接口–>网页服务–>网页授权
图
2.配置txt路径可以访问
我的项目目录:
图3
微信的要求:wx.qq.com/mp/MP_verify_2poeJ5jQBozaGbNV.txt
我使用的Node.js+Express的框架,可以看这里之前的一些文章Node.js这里有Express的安转和新建项目、路由等。

router.all('/mp/MP_verify_xxxxx.txt', function(req, res, next) {
    res.sendfile("./wx/MP_verify_xxxxx.txt");
});

当我们在浏览器输入:xxx.cn/mp/MP_verify_xxxxx.txt的时候可以看见里面的信息。这个感觉是微信那边需要验证我们的网页授权域名是否设置正确。
这一步
3.阅读网页网页授权流程
微信网页授权文档大家先仔细看看文档。
- 用户同意获取code
这里我们需要严格的按照微信的要求谁知url路径:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问。这里也就是我在流程介绍里面的第一点介绍的入口页面。
之后会跳转到微信授权登录的页面
图3
点击授权登录按钮之后就会跳转到xx.cn/mp的页面这里我们就可获取到code了。
- 获取用户信息
获取用户信息其实基本都是后台做的事,因为微信不允许我们子啊前台调用微信的接口,不管怎么搞都是跨域,而且微信也说了这个需要在后台操作。
剩下的步骤看文档就很明确了。我的后台代码。

/*
 * 根据code获取微信用户的用户信息
 */
router.get('/mp/getUserInfo', function(req, res, next) {
    var param = req.query || req.params; 
    var code = param.code;
    var url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret + '&code=' + code + '&grant_type=authorization_code';
    request(url, function (error, response, access_token_body) {
        if (!error && response.statusCode == 200) {
            var access_token_data = JSON.parse(access_token_body); 
            // 获取access_token后 就做缓存
            // access_token 有效期是7200s
            var userinfoUrl = 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token_data.access_token + '&openid=' + access_token_data.openid + '&lang=zh_CN ';
            request(userinfoUrl, function (error, response, userinfo_body) {
                if (!error && response.statusCode == 200) {
                    var userinfo_data = JSON.parse(userinfo_body); 
                    res.end(JSON.stringify(userinfo_data));
                }
            })
        }
    })
});
前台只需要调用getUserInfo这个接口,传入code就可以获取到了。这里关于access_token的时效性还没处理。 这里我是直接把微信返回的数据给了前台处理。

最后

至此,微信网页开发–获取微信用户信息就介绍完了。
由于是第一次做微信网页开发,中间遇见过跨域的问题(上面有说为什么跨域),也不知道具体流程是怎样的,基本就是一边踩坑一边总结出来的流程。

2018-09-25 11:26:10 qq_21019419 阅读数 367
  • httpclient4.5企业跨域技术从初级到大神

    企业的很多技术都是保密的,同时企业的很多互联网企业的技术都是前沿的前辈研究心血的结果。本课将用亲民化的语言讲解企业常用的HttpClient技术,其中httpClient是取用4.5版本,官网新稳定版本。

    3484 人正在学习 去看看 Array老师

微信网页授权获取用户信息,只需要在微信端配置一下授权域名,之后的操作都是在服务器端实现。

1. 微信后台配置授权域名

填写网页授权域名

2.服务器端实现获取用户信息

写一个测试页面,页面中有一个连接,

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5dcb95b593046871&redirect_uri=https%3A%2F%2F你在微信端填写的域名%2F目录1%2F目录2&response_type=code&scope=snsapi_base&state=回调传回参数#wechat_redirect

注意几个点:

1.微信端的域名:第一步中填写的域名地址
2.目录1,2地址:可以是一级目录,也可以是多级的,这个没有影响,我这里是2级。【和支付是有区别的,支付的时候,需要配置支付的信任目录,所以固定死了级别。】
3. 回调传回参数:当用户点击这个链接时,会调起微信的授权页面,用户操作之后,微信会回调你填写的redirect_uri地址,并且传回参数state,所以可以让state传递一些特殊的参数。但是长度有限制,需要注意。

后端的代码:

    /**
     * 获取用户信息
     * @param request
     * @param model
     * @return
     */
    @RequestMapping("/getUserInfo")
    public String getUserInfo(HttpServletRequest request,Model model){
        //微信在回调时,会传回一个code参数,获取这个code,如果没有code,那么说明失败,注意返回错误页面。
        String code = request.getParameter("code");
        log.info("code:" + code);
        if (StringUtils.isBlank(code)) {
            return "/pages/notice";
        }
        // 如果在上方的连接地址中有填写state的值,那么微信会将state原样返回,这里获取一下。
        String state = request.getParameter("state");
        log.info("state:" + state);
        if (StringUtils.isBlank(state)) {
            log.info("没有返回state参数");
        }
        // 获取到了code之后,使用code,作为参数,调用微信的接口,换取access_token。
        //oauth2_url=https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
        String oauth2_url = WeChatConfig.oauth2_url.replace("APPID", BaseController.appid).replace("SECRET", BaseController.appsecret).replace("CODE", code);
        // 自己写一个工具类,调用接口,推荐使用okhttp。
        String auth_return = WeixinHttpUtils.post(oauth2_url, null);
        log.info("auth_return:" + auth_return);
        // 得到返回的json结构。
        JSONObject json = JSON.parseObject(auth_return);
        /**
         * 需要用到的access_token
         * {"access_token":"12_0g6UMlYeFtgCLT4TaGW5jS6bAt8MwxAoKYeyUmnHlqXMfICauOHMKs7k6HySOWTOhskV1BpLJ-syx3ZJbs922MWkVpuZqA_VpvL9CW7qLvs",
         * 有效时间
         * "expires_in":7200,
         * "refresh_token":"12_JRqTvJnPVX_7ePOIK15qEJg_1oYvSdi4sqLzWWHyeK77LitTz-6XX1OYQjNH0rO54u-tDA_TKZTUaJKVFNXxsI5MtKE9P7_c2P6DeLF0pPU",
         * 当前用户的openid
         * "openid":"odXbo1Oub7qVBeptNt_kdtInQfLI",
         * "scope":"snsapi_base"
         * }
         */
        Object errorCode = json.get("errcode");
        if (errorCode != null) {
            return "400";
        } else {
            String openId = json.getString("openid");
            String access_token = json.getString("access_token");
            // 使用access_token去交换用户的详细资料,头像,名称等信息。
            //userInfo_url=https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
            String userinfo_url = WeChatConfig.userInfo_url.replace("ACCESS_TOKEN", access_token).replace("OPENID", openId);
            String userinfoUrlReturn = WeixinHttpUtils.post(userinfo_url, null);
            /**
             * 最后返回的详细信息
             * 其中如果此公众号有绑定开放平台,就会返回unionid,如果没有绑定,此参数是么有的。
             * {
             * "sex":1,"nickname":"小饼干",
             * "unionid":"oTn_Ewte8QsnEIg9yWBSBzfCbBFE",
             * "privilege":[],"province":"广东",
             * "openid":"odXbo1Oub7qVBeptNt_kdtInQfLI",
             * "language":"zh_CN",
             * "headimgurl":"http://thirdwx.qlogo.cn/mmopen/vi_32/WtxCbgVS8HKibRlpByx3FKdB9aibIyiboric9icqzOzH3aW5Ys7kJcDiaKkVllYybM5kiaIskC8GqEL3dib4VRsL3mn5RQ/132",
             * "country":"中国","city":"广州"
             * }
             */
            JSONObject userObj = JSON.parseObject(userinfoUrlReturn);
            log.info(userObj.toJSONString());
            request.getSession().setAttribute("checkTicketMyselfUser", userObj);
            request.getSession().setMaxInactiveInterval(0);
        }
        return "userinfo";
    }

以上。

在这里插入图片描述

2017-03-29 17:43:20 a250758092 阅读数 4986
  • httpclient4.5企业跨域技术从初级到大神

    企业的很多技术都是保密的,同时企业的很多互联网企业的技术都是前沿的前辈研究心血的结果。本课将用亲民化的语言讲解企业常用的HttpClient技术,其中httpClient是取用4.5版本,官网新稳定版本。

    3484 人正在学习 去看看 Array老师

什么是跨域请求

跨域是浏览器的一个同源策略的问题而衍生的需求,跨域请求是指服务器A的页面去请求服务器B的资源,而服务器A.B之间只要域名、端口号、IP不同都属于跨域

而浏览器没有对SCRIPT,IMG等包含SRC属性的标签做同源策略的限制,因此有了一个JSONP的非官方协议,其原理是服务器A去访问服务器B的JS文件(这里不存在跨域限制),服务器B的JS文件去获取同源下面的资源,并把数据一并返回到服务器A。

后台服务器请求另一台服务器是不属于这个范畴的,因为这是浏览器的策略,所以不会出现说跨域请求的问题。

具体使用方法可以参考另外一篇关于跨域的文章。

微信开发

很多刚开始玩这个的人会在前端通过AJAX去请求微信接口,但是会提示跨域问题。
就是因为浏览器的同源策略,所以我们需要在后台去请求接口而不是前端请求。

另外,也有人非得用前端去请求,通过JSONP形式去请求数据,首先:JSONP这种非官方协议是需要后台配合写返回数据的,也就是返回回调函数,微信不可能做这个,数据不安全。其次通过localhost等形式去请求,微信是不允许以IP端口号的形式去请求的。

2015-03-25 11:59:02 iteye_14829 阅读数 138
  • httpclient4.5企业跨域技术从初级到大神

    企业的很多技术都是保密的,同时企业的很多互联网企业的技术都是前沿的前辈研究心血的结果。本课将用亲民化的语言讲解企业常用的HttpClient技术,其中httpClient是取用4.5版本,官网新稳定版本。

    3484 人正在学习 去看看 Array老师

 

研究了好几天也没研究出用AJAX跨域访问微信企业号接口,而用ASP就能很容易地跨域访问。

核心代码如下:

<script language="javascript" runat="server">  

function evalJsonStr(str){return eval("(" + str + ")");}  

</script>

<%

'自定义可以跨域请求的函数jsonObjByUrl

'为了让ASP能解析JSON字符串,所以要用到上面用JS自定义的函数

'url为要跨域请求的网址

'method为GET或POST提交

'data为要与url同时提交数据,书写格式如data="{""msgtype"":""text"",""text"":{""content"":"""&msgStr&"""}}"

function jsonObjByUrl(url,method,data)

Set objXML = Server.CreateObject("MSXML2.ServerXMLHTTP")

objXML.open method,url,false

objXML.send(data)

set jsonObjByUrl=evalJsonStr(objXML.responseText)

set objXML=nothing

end function

 

corpid="换成你们的企业的corpid"

corpsecret="换成你们的企业的corpsecret"

url="https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=" & corpid & "&corpsecret=" & corpsecret

method="GET":dataStr=""

set obj=jsonObjByUrl(url,method,dataStr)

ACCESS_TOKEN=obj.access_token

url="https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=" & ACCESS_TOKEN

msgStr=“要发送的文字内容”

dataStr="{""touser"":""@all"",""msgtype"":""text"",""agentid"":""3"",""text"":{""content"":"""&msgStr&"""},""safe"":""0""}"

method="POST":dataStr=""

set obj=jsonObjByUrl(url,method,dataStr)

response.Write(obj.errmsg)

set obj=nothing

%>

 

2018-10-13 21:24:12 IT_TIfarmer 阅读数 2564
  • httpclient4.5企业跨域技术从初级到大神

    企业的很多技术都是保密的,同时企业的很多互联网企业的技术都是前沿的前辈研究心血的结果。本课将用亲民化的语言讲解企业常用的HttpClient技术,其中httpClient是取用4.5版本,官网新稳定版本。

    3484 人正在学习 去看看 Array老师

微信公众平台开发用了前端和后端两个人,前期开发阶段前端就很容易遇到跨域问题,今天在前端向后端发送请求获取signature,但是前段老是报错跨域,接受后端的返回数据失败怎么办呢?

其实很简单,后端最后返回签名的代码本来是这样的:

System.out.println("最终返回的json:" + str);
response.getWriter().print(str);

改成:

System.out.println("最终返回的json:" + str);
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

		response.getWriter().print(str);
	

霎时间,伴随着一阵抽搐,前端的请求终于,返回数据了~~~

没有更多推荐了,返回首页