微信开发系列——公众号内嵌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

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

  
  微信开发者工具调试模式