1.相关链接

微信开发者文档

微信测试公众号

2.介绍

最近公司要开发一个H5项目，该项目的一部分功能是要将用户引流至公众号，引导用户关注公众号。那么就需要判断该用户是否已关注公众号。

而在微信的角度，每一个用户都有一个唯一标识openId。通过这个openId我们就能获取到很多其他相关信息。大致流程如下：

1. 网页授权(静默授权、有感授权)。获取到code。
2. 将code传递给后端，后端调用微信服务器接口，获取openId。后端获取到openId后，再调用微信其他接口，确定该openId的用户是否关注了公众号。如果关注了公众号，就正常走业务流程。否则就进行第3步。
3. 前端接收到用户没有关注公众号的结果后，将页面重定向到具有公众号二维码的页面，供用户识别关注。
4. 用户关注时，后端识别到该openId，自动在公众号推送一条模板信息，供用户点击，回到业务页面。形成闭环。

接下来，我们就来了解下第一步的主要实现。

3.授权登录

这一部分，微信文档其实已经介绍的比较详细。总结下：

授权登录分为两种：静默授权(获取用户基本信息接口，需要用户关注公众号才能调用)与有感授权(需要用户手动点确认授权，无须关注，就可在授权后获取该用户的基本信息。相比静默授权，除了openId外还能获取用户更多的信息，譬如昵称、头像等)。

3-1.静默授权

scope为snsapi_base:

https://open.weixin.qq.com/connect/oauth2/authorize? appid=wx520c15f417810387 &redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.html &response_type=code &scope=snsapi_base &state=123 #wechat_redirect

具体参数含义可见微信文档。另外要注意几点：

• appid: 微信公众号的ID。
• redirect_uri: 授权成功后的重定向链接。该链接需要在公众号后台进行配置，路径为“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头。
• 授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com 无法进行OAuth2.0鉴权。
• 另外，redirect_uri需要使用encodeURIComponent转码一下。可以使用下面这个函数：

function urlEncode (str) {
  str = (str + '').toString()
  return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
}

3-2.有感授权

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

4.申请测试公众号

可能已经注意到了，上述的redirect_uri需要在公众号后台配置受信任的备案域名。在实际开发过程中，一般我们的地址都是IP。

所以我们可以在开发环境使用测试公众号，实际生产中，再将appId与域名替换成生产的。

访问微信测试公众号。扫码关注后，你就有了一个测试账号。该测试公众号允许配置重定向链接为IP形式。

“网页服务-网页帐号-网页授权获取用户基本信息”：

添加重定向IP:

5.微信开发者工具

如果在浏览器端调试公众号，即使将浏览器设置成微信浏览器，也会发现授权登录的操作不能正常进行，不会发生成功的重定向。

所以我们推荐在微信开发者工具下进行调试H5页面。

只需要将开发模式修改为公众号网页模式。