微信开发系列——公众号内嵌H5页面获取code,拿到openID

如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。
我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿到 code ,再用 code 去换取网页授权 access_token, 使用access_token 去拿到用户的信息。

1. 准备工作

关于微信网页授权的官方文档说明:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
先熟悉下流程,每个字段的含义,以及注意事项。先把域名和环境配好。才能正式去获取授权。

2. 处理过程

1、官方文档中获取code参数示例:

scope 为 snsapi_base

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

scope 为 snsapi_userinfo

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

2、我的项目中只需要拿到 openID,所以采用的授权作用域为 scope = snsapi_base(不弹出授权页面,直接跳转,只能获取用户 openid )。
需要注意的是,redirect_uri 填自己部署项目的域名(注意该链接一定要使用urlencode 转换一下),不然除了第一个参数后面的参数传不过去(微信中其他URL中参数配置也是这样)。

获取地址的步骤和参数配置我就不赘述了,文档里说的很清楚。在重定向成功后解析code,这里方法贴一下:

/**
 * 根据参数名 获取 URL 路径中的参数
 * @param {String} name 要读取的参数名称
 */
function getUrlParam (name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let url = window.location.href.split('#')[0]
  let search = url.split('?')[1]
  if (search) {
    var r = search.substr(0).match(reg)
    if (r !== null) return unescape(r[2])
    return null
  } else {
    return null
  }
}

getUrlParam('code') 调用一下就能拿到 code 结果,然后用这个 code 去调后台的接口让后台去微信后台拿openID。

或者用这个方法:

function GetRequest() {
var url = location.search; //获取url中"?"符后的字符串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
}
}
return theRequest;
}
console.log( GetRequest());

作者:阿布_0caf
链接:https://www.jianshu.com/p/b5929770f92d
來源:
著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
遇到的问题
  • 提示 redirect_uri 域名与后台配置不一致,参考官方文档(前面的文档链接)如下片段:


    报错 redirect_uri 域名与后台配置不一致配置
  • 后台 access_token 拿不到,提示和白名单 IP 有关,则参考微信返回报错,将提示的IP加入白名单。

3. 测试方案

  • 公众号测试号
    如果需要先测试,可以参考我写的公众号测试号的文章:微信开发系列——使用公众号测试号测试公众号webAPP

  • 微信开发者工具
    打开微信开发者工具,将模式切换到公众号网页版调试,在地址栏中输入要测试的地址,进行验证。


    微信开发者工具调试模式

你可能感兴趣的:(微信开发系列——公众号内嵌H5页面获取code,拿到openID)