h5微信网页获取code

这两天做微信分享的h5网页,需要微信授权登录,获取用户的相关信息。以前没有做过相关的项目,所以做得相当不顺利。网页开发时的微信授权,首先公司要开通一个公众号,然后需要配置相关的东西:

  1. 微信网页授权:用于获取用户针对于公众号的唯一标识openid。但只能添加一个域名,通常把它设置为一级域名。网页授权回调域名,首先,在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;其次,授权回调域名配置规范为全域名,比如需要网页授权的域名为: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. JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要求将当前的界面url加密后,才可以分享到朋友圈,需要调用微信分享功能的时候就需要配置这个域名。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,一般JS接口安全域名跟网页授权回调域名是一致的。
  3. 微信公众号对应的AppId和Screct等。

在h5页面上获取code:

var getRequest = this. getRequest();
if (getRequest.code) {
this.code = getRequest.code;
} else {
var pageUrl = window.location.href
. replace( / [/] / g, "%2f")
. replace( / [:] / g, "%3a")
. replace( / [#] / g, "%23")
. replace( / [&] / g, "%26")
. replace( / [=] / g, "%3d");
var url =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
"填写网页授权回调域名所对应的那个公众号的AppId" +
"&redirect_uri=" +
pageUrl + //这里放当前页面的地址
"&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect";
window.location.href = url;
}
console . log ( "CODE:" + getRequest.code);

值得注意的是这里的pageUrl,即当前页面的地址一定要在我们配置的那个网页授权回调域名之下,而且这个页面最好不需要端口号,直接用纯域名或者纯域名加上项目文件夹名称就可访问,也就是说后台这个域名要设置一个默认的端口号。


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页