微信网页开发获取用户openid案例

在微信开发中，无论是小程序开发还是微信公众号开发，基本都需要获取用户的openid，有时还需要获取用户的昵称、头像、性别等信息，那么，在微信公众号开发中如何获取用户的openid呢？

事实上，每次用户关注、取关公众号的时候，如果我们正确配置了服务器URL，在URL对应的回调函数里都是可以获取到用户的openid的(如果对配置服务器URL不熟悉的话，可以参考我之前的文章：Spring Boot微信公众号服务器配置案例)。

但是，如果需要做稍微复杂点的开发，单单获取openid就不能满足需求了。例如：最近遇到这样一个需求，需要获取用户的手机号和openid，并将两者做个绑定。

要实现这个需求，我们需要知道，微信是不可能把用户的手机号给开发者的。那么，要获取用户的手机号，只能让用户自己手动输入手机号，然后通过短信验证码验证身份，同时携带着openid传递到后台。通过查看微信开发者文档可以知道，网页授权流程分四步：

1、引导用户进入授权页面同意授权，获取code

2、通过code换取网页授权access_token（与基础支持中的access_token不同）

3、如果需要，开发者可以刷新网页授权access_token，避免过期

4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

首先，需要引导用户进入授权页面同意授权。授权页面就是微信的一个url链接，在这个url链接里包含着我们公众号的appid和我们的回调链url（这个url就是微信授权后跳转的我们自己写的页面地址），用户点击这个链接就会弹出授权页面，用户授权后，微信将把用户的code回调给我们填写的回调链url里，然后我们在页面里用js就可以获取到code（有效期为5分钟），获取到code后，应该立即请求我们自己的后端接口解析出openid，然后前端就可以获取到openid了，之后再进行短信验证码验证手机号，验证后提交就可以了。下面具体讲解：

1.拼接授权url

参考链接(请在微信客户端中打开此链接体验):
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

应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

在这个url中需要公众号的appid和回调页面的地址(redirect_uri)，appid我们可以在开发—>基本配置里获取，回调页面的地址(redirect_uri)有点复杂,回调页面的地址需要在网页授权域名下。

配置网页授权域名步骤如下：

需要注意的是，授权回调域名配置规范为全域名，可以是带有项目名的。但是，回调页面一定要跟验证文件在同一目录才可以。

好了，现在假设我们配置好了网页域名为www.abc.com/test，验证文件的url为http://www.abc.com/test/MP_verify_ODM6lW0XXtobSWXv.txt，回调页面的url为http://www.abc.com/test/verify.html，回调页面verify.html获取code的js代码如下：

function GetQueryValue(queryName) {
    var query = decodeURI(window.location.search.substring(1));
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == queryName) { return pair[1]; }
    }
    return null;
}

console.log("code的值:" + GetQueryValue('code'))

微信官方要求使用urlEncode对回调页面url链接进行处理。所以我们需要对http://www.abc.com/test/verify.html进行encode处理，可以使用Java的URLEncode类进行处理。代码如下：

String redirect_uri = URLEncoder.encode("http://www.abc.com/test/verify.html","utf-8");
System.out.println(redirect_uri);

处理后的redirect_uri如下：

http%3A%2F%2Fwww.abc.com%2Ftest%2Fverify.html

现在，appid和redirect_uri都有了，替换掉链接中的appid和redirect_uri的值就可以了，然后我们就得到了授权url，我们将这个url设置在公众号的一个菜单项里(设置方法可以参考我的另一篇文章：使用Java创建微信公众号菜单)，如下图：

当用户点击这个菜单项时将弹出授权页面（不获取用户头像信息将不弹出授权页面，直接跳转到回调页面），授权后，页面将跳转到我们的verify.html，同时code也会也会传递过去。

我们获取到code后，需要请求微信的url才可以获取到code，请求url内包含appid和code。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

成功请求后，微信返回的结果如下：

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

至此，成功获取用户openid，本文参考自微信开发文档中的“微信网页开发—网页授权”，点击https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html可查看官方文档。