公众号测试号进行H5授权获取code《前端部分》

公众号测试号H5授权《前端》

一、前置准备-注册配置测试账号
- 1.注册测试号
- 2、配置网页回掉域名
二、H5 获取授权信息
- 1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）
- 2、代码实现

Tips：因为申请公众号需要 ¥300。 so 我用的是测试号。【白嫖永远不亏】

需要注意的是测试号是和个人微信号关联起来的，不是公众号主体关联。。也就是每个人都可以申请，而不是必须有公众号主题才可以。测试号和公众号是独立的。

一、前置准备-注册配置测试账号

1.注册测试号

去微信公众平台注册一个测试号。注意这是测试账号【白嫖的快乐】你会进入到这个界面。会生成测试用的appid 让你测试授权。记下来等会要用。

2、配置网页回掉域名

还是这个界面往下滑你会看到一个。体验接口权限表

在这个表的【网页服务】- 【网页账号】- 【网页授权获取用户基本信息】这一项点击【修改】按钮
点击按钮会让你 设置网页回调域名 无需以"http://"开头，直接写域名就可以,例如 “aa.bb.com”。

因为是开发调试，所以我们需要用手机连接电脑启动的H5服务。你可以把这个路径写成自己启动的H5 项目的服务地址，然后在手机上访问。具体怎么访问的流程之后会讲。我这边填写的就是我启动的H5服务地址。

**end：**到这里就已经可以进行授权了，其他的一些功能就不叽歪了。

二、H5 获取授权信息

1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

我选择的是静默授权

静默授权流程：以snsapi_base为scope发起网页授权得到code，再用公众号的appid和secret获取微信公众号的全局唯一凭证access_token，然后用拿到的access_token调用公众号的“用户管理接口”中的“获取用户信息接口”获得unionID。

前端需要做的是以snsapi_base为scope发起网页授权得到code，调用后台接口获取unionId

2、代码实现

废话不多说上代码：

URl就是你上面配置的那个路径这里是使用当前获取授权的界面地址。我们用的是测试号，所以你上面配置了什么路径就在这里用什么路径。这样直接获取当前界面的路径我没试也不知道测试号行不行。小伙伴们可以尝试一下

getBaseInfos() {if (this.isWeiXin()) {const code = this.getUrlParam("code"); // 截取路径中的codeif (code == null || code === "") {let url = sessionStorage.getItem("originUrl");window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申请的appkey&redirect_uri=" +encodeURIComponent(url) +"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";} else {//////暂时不知道怎么写不是微信浏览器怎么搞。///}if (code != "" && code != null) {this.wxCode = code;console.log(code)//这里就是把code给服务端了，没我们的事啦。【撒花】this.getOpenid(code)}} else {}
},
//判断是不是微信浏览器。
isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}
},
// 编码函数
getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象var r = window.location.search.substr(1).match(reg); //匹配目标参数if (r != null) return unescape(r[2]);return null; //返回参数值
},

公众号测试号进行H5授权获取code《前端部分》相关推荐

php公众号获取code,微信开发系列——公众号内嵌H5页面获取code，拿到openID
如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿 ...
Java微信公众号开发之网页授权获取用户基本信息
本篇博客讲解的网页授权只需要前端传递一个backUrl(回调地址) 到后台接口,后台接口会完成整个授权流程,无需前端做更多工作: 一. 前言微信公众号开发,需要用到网页授权获取用户信息,通过OAut ...
【java 微信公众号开发】微信端获取code和opendId，access_token 步骤调试
一.网页授权页面授权获取code,到微信公众平台配置, https://open.weixin.qq.com/connect/oauth2/authorize?appid=Appid&red ...
微信公众号开发系列-网页授权获取用户基本信息
OAuth2.0网页授权这个也是在做微信公众平台用到最多的,可以利用授权接口对自己平台内用户进行绑定,实现用户扫描码和微信分享.微信签到.微信商城购物等: 1.高级接口OAuth2.0网页授权设置 a ...
微信公众号跳转H5页面获取openid,再跳转小程序
需求:从微信公众号跳转到小程序,获取到公众号的openid 1.openid? openId 是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下 ...
Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
公众号H5 VUE获取CODE
回调地址设置页面向导:开发>接口权限>网页服务>网页授权>修改.开发的项目需要放到已经解析好服务器域名的服务器下,同时把Mp***.text文件放到服务器根目录下,此时你的服务 ...
php微信授权没有code返回,解决关于微信公众号网页授权获取code参数的问题
解决关于微信公众号网页授权获取code参数的问题发布时间:2018-07-24 23:21, 浏览次数:3327 , 标签: code * 在微信网页授权过程中,需要获取code参数,因为我用的是公 ...
微信公众号网页OAuth2.0授权登录并获取用户信息（SpringBoot实现）
微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 文章目录微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 准备工作开发思路具体代 ...

公众号测试号进行H5授权获取code《前端部分》

公众号测试号H5授权《前端》

一、前置准备-注册配置测试账号

1.注册测试号

2、配置网页回掉域名

二、H5 获取授权信息

1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

2、代码实现

公众号测试号进行H5授权获取code《前端部分》相关推荐

最新文章

热门文章

公众号测试号 进行H5授权获取code《前端部分》

公众号测试号H5授权《前端》

一、前置准备-注册配置测试账号

1.注册测试号

2、配置网页回掉域名

二、H5 获取授权信息

1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

2、代码实现

公众号测试号 进行H5授权获取code《前端部分》相关推荐

最新文章

热门文章

公众号测试号进行H5授权获取code《前端部分》

公众号测试号进行H5授权获取code《前端部分》相关推荐