h5 微信授权

今天准备详细讲解h5页面嵌入微信公众号中 然后获取用户的openid

一:微信授权域名

 1.首先去登录微信开发者平台 公众号设置-》功能设置 “网页授权域名”去设置 (请注意,①:这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头 ②:配置www.qq.com 域名 那http://www.qq.com/land.html或者  http://www.qq.com/login.html都可以进行授权)

2.将开发者ID appId记录下来 并将下面MP_开头的文件下载下来 放在域名的根目录下面。

二:获取code

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

参数具体参见以上 。

三.用户同意授权后

 用户授权后会跳到你redirect_uri设置的url 后面加上  redirect_uri/?code=CODE&state=STATE 这里要截取url带的code并准备调下一个接口

四:获取openid

  因为我的scope设置的是snsapi_base 我只要拿到openid就好了 ,所以到这一步就截止了

  这一步微信提供了https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数具体参见以上

  但是会有一个跨越问题,所以这一步的接口需要后台去调,前端把参数传给后台 ,后台返回数据就可以解决跨越问题

注意:之前我在写的时候 把这两个接口调用全部放在一个页面 然后会导致微信不停的授权 其实是错的。然后我就把第一个接口调用放在一个loading页面 设置redirect_uri是真正需要openid的页面,也就是loading只是用来跳转用的,当然loading页面也是在之前设置的域名下面。

  还有一个问题 就是微信的pc浏览器是不解析es6语法 只能识别es5语法 

  以上内容具体参见微信开发者文档  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

  

猜你喜欢

转载自www.cnblogs.com/alhh/p/9928107.html