在前段时间有个第三方登陆的功能,要求PC和WAP都支持微信和支付宝登陆,但是微信和支付宝都不支持H5登陆(微信只支持自带浏览器可用,支付宝的接口已经关闭,需要自己去申请)。后来产品就把需求改了,使用微信公众号授权登陆。
首先,获取测试并配置
登陆微信公众号
直接打开http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index点击登陆,通过扫描二维码登陆
登录完即可获取到一个测试公众账号的信息。主要有appId和appsecret两个参数,这将唯一标示一个公众号,并且需要将他们作为参数获取用户的信息。
关注公众号
微信公众号登陆需要用户关注这个公众号,只有用户关注了公众号,才能在公众号内授权第三方登陆。把刚刚点开的那个页面往下拉
扫描二维码关注公众号
配置回调域名
继续往下滑动,会看到在功能服务这一栏,有个网页账号,点击右面的修改
点击修改,弹出一个框
这里就需要填一个外网可以访问的域名(测试的貌似支持外网IP访问,但是由于公司网络限制,没有试成功,只选择了外网可以访问的域名)
这里是个域名,不能添加协议
配置完成之后,就可以微信授权登陆,获取用户信息
用户授权并返回code
参数说明
参数 | 必须 | 说明 |
appid | 是 | 公众号的唯一标识(这个就是我们前面申请的) |
redirect_uri | 是 | 授权后重定向的回调链接地址(我们前面申请的) |
response_type | 是 | 返回类型,请填写code |
scope | 是 | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息) |
state | 否 | 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节,该值会被微信原样返回,我们可以将其进行比对,防止别人的攻击。 |
#wechat_redirect | 否 | 直接在微信打开链接,可以不填此参数。做页面302重定向时候,必须带此参数 |
这里的scope我们使用snsapi_userinfo可以获取到所有的用户信息,如果使用了snsapi_base 就只能获取openid,没有多大意义
获取access_token,用access_token获取用户信息
参数说明
参数 | 是否必须 | 说明 |
appid | 是 | 公众号的唯一标识 |
secret | 是 | 公众号的appsecret |
code | 是 | 填写第一步获取的code参数 |
grant_type | 是 | 填写为authorization_code |
到这里,微信授权登陆和微信对接部分就已经完成了。在这个后面就可以操作登陆逻辑了