微信开发时获取用户信息跨域

2020-03-17 10:41:36 a1034386099 阅读数 800
  • 综合布线系统优点

    网规下午案例分析出题思路紧跟技术发展脉搏,对热点技术都有所涉及。本课程对网规下午案例分析中的考点做了详细的讲解,通过在重要考点中穿插历年真题的强化讲解,帮助考生掌握考点的同时实时的感受了网规案例分析...

    13人学习 徐朋
    免费试看

微信公众号开发需要获取用户的openid,根据微信公众号的官方文档说明,需要做以下几个准备工作

1.开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”配置选项中,修改授权回调域名。请注意,这里填写的是域名。注意:不能是ip地址

  如果不进行域名授权配置,微信在授权回调的时候会返回redirect_uri错误。

2.配置域名是要求在web服务器中有微信提供的能访问到的文件,所以还需要一个web服务器,如下图

 

第一步:跳转到授权页,获取code

appid在微信开发者工具中获取

 let urlNow=encodeURIComponent(window.location.href);
// let scope='snsapi_userinfo';    //snsapi_userinfo 非静默授权用户有感知 snsapi_base 静默授权用户无感知  

let url= 'https://open.weixin.qq.com'+'/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
window.location.href = url

授权成功后会重定向的页面中,会带有code参数,通过以下代码获取code,code每5分钟会更新,请勿保存。

getUrlKey:function(name){//获取url 参数
    return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},

第二步.通过code换取网页授权openid

appsecret在微信开发者工具中获取

this.$axios.get('https://api.weixin.qq.com'+'/sns/oauth2/access_token?appid='+appid+'&secret='+appsecret+'&code='+code+'&grant_type=authorization_code')
  .then(res=>{
    
      this.openid = res.data.openid;
   }).catch(error=>{
        
})

 

第三步.解决刚开始的两个问题

3.1由于本地测试没有域名,可以使用natapp用临时域名映射到本地。参考

3.2有了配置后需要配置web服务器,这里我使用Tomcat,下载Tomcat并安装。

打开Tomcat的目录进入webapps目录下,新建文件夹:myapp,并在该目录下创建WEB-INF文件夹,新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <display-name>myword</display-name>
  <description>
     <error-code>404</error-code>
     <location>/index.html</location>
  </description>

</web-app>

将从微信公众号下载下来的text文件放入myapp文件夹下,同时在微信开发者工具配置域名。点击保存

第四步.vue打包

打包前在vue.config.js中配置(这里使用vue-cli3.0)。

  publicPath: process.env.NODE_ENV === 'production'
    ? '/myapp/'
    : '/',

执行 npm run build

将打包好的放入tomcat的myapp文件夹下

此时的目录结构如上。

启动Tomcat,mac的启动命令: sudo sh ./startup.sh

 

5.跨域

由于微信限制,微信授权页面必须在微信开发中工具中打开。由于本地服务和微信接口的api存在跨域问题,本地调试时可以调用一下命令打开微信开发中工具:

open -a /Applications/wechatwebdevtools.app --args --disable-web-security --user-data-dir --allow-running-insecure-content

或者使用Nginx解决跨域问题。

在微信开发中工具中输入: http://xxx.xxx.cc/myapp

 

vue的完整代码

created(){
   let code= this.getUrlKey("code");
   if(code){
      this.$axios.get('https://api.weixin.qq.com'+'/sns/oauth2/access_token?appid='+appid+'&secret='+appsecret+'&code='+code+'&grant_type=authorization_code')
      .then(res=>{
           this.openid = res.data.openid;
       }).catch(error=>{
                
      })
   }else{
            this.getCodeApi();
   }
},
methods:{
    getCodeApi(){//获取code   
       let urlNow=encodeURIComponent(window.location.href);
       // let scope='snsapi_userinfo';    //snsapi_userinfo snsapi_base   //静默授权 用户无感知
   
       let url= 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
       window.location.href = url
    },
    getUrlKey:function(name){//获取url 参数
       return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
        },
    },

 

2017-03-29 17:43:20 a250758092 阅读数 5526
  • 综合布线系统优点

    网规下午案例分析出题思路紧跟技术发展脉搏,对热点技术都有所涉及。本课程对网规下午案例分析中的考点做了详细的讲解,通过在重要考点中穿插历年真题的强化讲解,帮助考生掌握考点的同时实时的感受了网规案例分析...

    13人学习 徐朋
    免费试看

什么是跨域请求

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

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

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

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

微信开发

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

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

2017-04-20 15:06:49 a3025056 阅读数 18532
  • 综合布线系统优点

    网规下午案例分析出题思路紧跟技术发展脉搏,对热点技术都有所涉及。本课程对网规下午案例分析中的考点做了详细的讲解,通过在重要考点中穿插历年真题的强化讲解,帮助考生掌握考点的同时实时的感受了网规案例分析...

    13人学习 徐朋
    免费试看

什么是跨域请求

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

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

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

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

微信开发

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

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

2016-12-12 11:45:37 u012178818 阅读数 984
  • 综合布线系统优点

    网规下午案例分析出题思路紧跟技术发展脉搏,对热点技术都有所涉及。本课程对网规下午案例分析中的考点做了详细的讲解,通过在重要考点中穿插历年真题的强化讲解,帮助考生掌握考点的同时实时的感受了网规案例分析...

    13人学习 徐朋
    免费试看

  是不是大家经常能在微信公众号上访问某家应用的时候弹出这样一个页面,当你点击确定之后,你进入这家应用的时候会惊奇的发现,你已经登录好了,并且你的微信信息都被他采集到了。

  这是怎么做的呢,首先我们得了解几个微信开发接口。

  1,授权接口

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

  2,获取access_token

  

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


  3,获取用户信息

  注意:调用此接口的前提,授权接口的scope必须为snsapi_userinfo,如果你不需要获取用户的相关信息,只需要获取用的openid,那本接口就不用调用到。

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

   

  上述三个接口为微信平台提供的api,具体可以参考官方文档。

  

   下面是我写的一个简单的例子:


   OauthGetCode.java

@RequestMapping(value = "/doOAuthLogin")
	public String doOAuth(HttpServletRequest request, HttpServletResponse response

	) throws IOException {

		String appid = ConfigUtils.APPID;
		String redirectUrl = ConfigUrlUtils.YUMING + "exhibitFront/OAuthLogin";
		String state = "0";
		request.setAttribute("appid", appid);
		request.setAttribute("redirect_url", redirectUrl);
		request.setAttribute("outTradeNum", state);

		return "utils/OAuthGetCode";

	}

   OauthGetCode.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<html>
	<head>
		<meta name="viewport" content="width=device-width,user-scalable=0">
	</head>
	<body>
		<script language="javascript" type="text/javascript">
	window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid }&redirect_uri=${redirect_url }&response_type=code&scope=snsapi_userinfo&state=${outTradeNum }#wechat_redirect";
</script>



	</body>
</html>
 

  OAuthLogin.java

@RequestMapping(value = "/OAuthLogin")
	public String oauthLogin(HttpSession session, HttpServletRequest request, @RequestParam(value = "code") String code,
			Model model) {

		// 获取用户的openid
		String returnJSON = HttpTool.getToken(ConfigUtils.APPID, ConfigUtils.APPSECRET, "authorization_code", code);
		JSONObject obj = JSONObject.fromObject(returnJSON);
		System.out.println(obj);//获取到的用户信息
		String openid = obj.get("openid").toString(); //例:获取用户信息,详细可以参考下面进行获取
		/*
		 * 可获取的用户信息:
		openid	用户的唯一标识
		nickname	用户昵称
		sex	用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
		province	用户个人资料填写的省份
		city	普通用户个人资料填写的城市
		country	国家,如中国为CN
		headimgurl	用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
		privilege	用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)
		unionid	只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。详见:获取用户个人信息(UnionID机制)
		
		*/
		

		return "redirect:/exhibitFront/index";

	}


   特别注意:测试授权获取用户信息必须要有公众号且开通了相应接口功能,

 此处需要修改成自己访问的域名地址,否则会授权不通过的哦。

   


2017-07-12 08:58:00 weixin_30765577 阅读数 452
  • 综合布线系统优点

    网规下午案例分析出题思路紧跟技术发展脉搏,对热点技术都有所涉及。本课程对网规下午案例分析中的考点做了详细的讲解,通过在重要考点中穿插历年真题的强化讲解,帮助考生掌握考点的同时实时的感受了网规案例分析...

    13人学习 徐朋
    免费试看

1、点击微信开发者工具,击右键, 选择“属性”,打开面板之后,选择“快捷方式” => “目标”

2、在目标那一行的最后,输入“空格--disable-web-security --user-data-dir”,务必要输入这个命令前面的空格

3、点击“应用” => “确定”

4、重启微信开发者工具即可

 

“空格--disable-web-security --user-data-dir”

转载于:https://www.cnblogs.com/songmengyao/p/7153658.html