1.相关链接
2.介绍
最近公司要开发一个H5项目，该项目的一部分功能是要将用户引流至公众号，引导用户关注公众号。那么就需要判断该用户是否已关注公众号。
而在微信的角度，每一个用户都有一个唯一标识openId。通过这个openId我们就能获取到很多其他相关信息。大致流程如下：
- 网页授权(静默授权、有感授权)。获取到
code。 - 将
code传递给后端，后端调用微信服务器接口，获取openId。后端获取到openId后，再调用微信其他接口，确定该openId的用户是否关注了公众号。如果关注了公众号，就正常走业务流程。否则就进行第3步。 - 前端接收到用户没有关注公众号的结果后，将页面重定向到具有公众号二维码的页面，供用户识别关注。
- 用户关注时，后端识别到该
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页面。
只需要将开发模式修改为公众号网页模式。
