最近做了一个用到了微信服务号网页授权的H5项目，做了一个小程序项目，对微信授权登录有了一点了解，记录一些小经验。以下内容多是整理的官方文档。
业务需求：已有APP应用、H5应用，登录方式有账号密码登录、短信验证码登录，用户唯一标识为手机号。新的需求：需要新开发小程序应用、H5新增微信授权登录的登录方式，目标实现多端数据互通以及便捷的登录方式。
几种微信登录能力说明
- APP，需要在微信开放平台创建移动应用
- PC网站应用，需要在微信开放平台创建网站应用，并在应用详情里配置授权回调域
- 微信客户端内H5，需要注册微信服务号，在对应微信公众平台配置网页授权回调域名。需要使用unionid的，在微信开放平台绑定公众账号
- 小程序，注册小程序，需要使用unionid的，在微信开放平台绑定小程序 根据微信登录能力介绍，本需求里的H5微信授权登录适用于使用微信服务号网页授权的方式开发。 因为本需求有在APP、小程序、H5统一用户账号的需求，所以需要使用unionid。
关于UnionID机制
unionid是一个用户对于同主体微信小程序／公众号／APP的标识，同一用户，对同一个微信开放平台下的不同应用（移动应用/网站应用/公众帐号/小程序），unionid是相同的。如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取unionid来区分用户的唯一性，实现多端数据互通。
微信服务号网页授权
开发前准备：
1.在服务号对应的微信公众平台配置网页授权回调域名: 设置-公众号设置-功能设置-网页授权域名。拉起服务号授权登录后回跳的域名，只能是域名不能包含二级目录。授权登录后回调的地址必须是该域名下的路径。
1. 域名要求ICP备案，不支持IP地址、端口号及短链域名。
2. 一个服务号只能配置两个网页授权域名。
3. 订阅号无法开通 “网页授权获取用户基本信息” 接口，无法使用授权登录；
2.在微信开放平台绑定公众号：
微信开放平台 管理中心-公众账号-绑定公众号，绑定后相关接口可返回unionid
服务号网页授权流程：
1.引导用户进入微信授权页面同意授权，获取code。用户同意授权后，微信重定向页面到指定的redirect_uri，并拼接code到redirect_uri里。 redirect_uri/?code=CODE&state=STATE。 微信授权页面链接格式：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
例：
原redirect_uri： https://xxx.com/xxx/#/wechat-login?key1=value1 （由于本项目前端使用vue-router hash模式，路径内里有#号，后续取code及业务参数，使用到了this.$route.query和location.search）
拼接参数后的微信授权页面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=https%3A%2F%2Fxxx.com%2Fxxx%2F%23%2Fwechat-login%3Fkey1%3Dvalue1&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
允许微信授权后重定向并拼接code的路径：https://xxx.com/xxx/?code=CODE&state=STATE#/wechat-login?key1=value1
由于只能配置两个网页授权域名，可配置测试环境域名、正式环境域名。如果想在本地测试功能，可使用测试域名作为redirect_uri，取得code后，前端使用location.href携带code重定向到本地IP，处理后续逻辑。
- redirect_uri：应当使用https链接来确保授权code的安全性；可通过
?key=value&拼接业务参数，用于登录后业务处理。 - code：code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
- 微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问。
2.后端通过code换取网页授权access_token
前端取得code后传给后台，后台利用code与微信服务端交互，取得access_token、openid，再利用access_token、openid换取用户信息，返给前端，完成授权登录。
把服务号绑定到微信开放平台后，后端取到的用户信息里会包含unionid字段。
取得unionid与用户是否关注服务号无关，只要用户同意授权，后端就能取到unionid。
以上，欢迎讨论，如有错漏也欢迎指正，希望对你有帮助😀
