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

Posted 2023-03-24

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

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

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

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

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

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

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

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

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

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

静默授权：scope=snsapi_base

非静默授权：scope=snsapi_userinfo

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

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

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

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

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

微信静默授权问题

微信中需要获取openid，为了安全起见，采用服务器端静默授权方式，最终过程是：

前端页面(获取openid) -> 指定服务器端地址 -> 服务器端跳转到微信授权页 -> 微信授权页跳回服务器端 -> 服务器端跳回前端页面

在这里会存在一个问题，即微信授权返回死循环问题，因为这边前端跳转全部都是使用replace跳转，所以不会在history上再增加1一个页面，后来以为是我们服务器的问题，然后撇开微信直接让服务器端返回一个假的openid发现是可以返回的，所以问题出在微信的授权问题上，即：无论前端跳转是否采用replace,使用微信授权，微信自动会在浏览器增加一条页面，即跳转微信授权前的一个页面，这样的话，当用户点击返回按钮的时候，自然是返回到没有授权页，然后没有授权页根据业务逻辑再继续发起授权请求，就这样陷入了无线循环之中。

也思考过一些解决方式，比如使用iframe来获取openid,比如使用XMLHttpRequest来代替服务器端跳转，这些全部都行不通，所以只能在请求授权页做手脚，即判断 是否应该去获取授权页，如果是因为返回进入该页面的 则执行history.back(),否则则进入微信授权模式，但是这种方式还是存在一个问题，即如果请求授权页本身就是首页怎么办，执行history.back()也不会让微信浏览器自动关闭，这个时候就会卡在这里，当然是可以使用微信JSSDK的closeWindow()方法，但是这种方式需要等待wx.config()完成，这里涉及到从服务器端获取签名等流程，具有明显的延时情况，造成一种很糟糕的用户体验，所以最终的解决方式是：

1：如果请求授权页是首页，当用户点击返回按钮的时候，还是走授权页，即陷入无限循环套路，

2：如果请求授权页不是首页，则执行higtory.back() 返回上一页