H5页面静默授权获取微信openid

前几天和业务谈需求的时候提到了要在微信公众号里面做一个申请页面A。当时我对微信的了解还不是很多，只知道公众号上原来已经做了一个其他功能的页面B，B页面可以获取到客户微信的openid。

当时我们业务同事说只有B页面可以拿到openid，其他的页面都拿不到，所以这个正在谈的A页面入口要做在已有页面B上，然后通过B获取openid之后再传给A。我当时因为不懂也只能听他说，毕竟那个同事说的好像很确定的样子。

事后我仔细想了想，页面B也就是个普通的html呀，凭什么就B页面能获取客户的openid呢？肯定有方法的！于是我就上网搜了一下，最后成功获取了自己的openid，下面介绍下方法吧。

首先，你要有个微信公众号，并且要获得这个接口的权限

点修改之后，在功能设置的“网页授权域名”处添加可以获取微信openid的域名，也就是你自己公众号里面需要获取openid网页的域名。

做完上面这些之后，其实已经可以实现我们想要的效果了，这里因为我不是要做一个完整的功能，我只是想试验下html的页面怎么获取openid，所以过程比较简陋。

这里是微信官方的网页授权方法：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

其实看起来微信的说明有那么一大段，但核心的内容也就那么一点点，总结下来就是：先拿到code，再用code去换取网页授权access_token。

一、获得code：

因为重定向的url要urlEncode，所以这里我用另一个网站把我要访问的url转换了一下，网址如下：

http://tool.chinaz.com/tools/urlencode.aspx

在微信浏览器里面输入下面的url，appid、redirect_uri改成自己的，其他的都可以不用改。

静默授权：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

一般在微信中是看不到url也没办法输入url的，所以这里我是用微信开发者工具调试的。

输入完静默授权的url后，url自动跳转成有code的，这个code只有5分钟有效期。

二、获得openid

同样的，获取openid也就是在微信浏览器中执行一下下面这个url就可以了。appid，secret换成自己的，code用上面一步获取的，其他的都不用改。

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

运行完后的结果就显示在左边这个图里啦，你看，openid不就拿到了吗。

我没尝试非静默授权的，不过我想应该也差不多吧。这里也不是一套完整的方案告诉大家怎么把这个部署到前端和后端自动获取openid。我只是想分享一下我试验的经历。