准备工作
配置网页授权获取用户基本信息,用于告诉微信发起授权的后端服务器地址
正式公众号:在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”进行配置操作;
测试沙箱环境:在 测试环境 中,进行配置网页授权(https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index)。可配置端口号用于本地调试。 注:勿加 http:// 等协议头!
本次业务我们配置的是前端登录页面,沙箱中内配置的网页授权域名为本地https起的服务器域名(test.c3data.com.cn:3000)
授权说明
微信授权时,分为snsapi_base和snsapi_userinfo两种授权方式。本次我们的需求第一种snsapi_base即可满足。
1、snsapi_base: 用来获取进入页面的用户的 openid 的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面,不会有对于的认为操作);
2、snsapi_userinfo: 是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
网页授权流程:
1、引导用户进入授权页面同意授权,获取code
2、通过 code 换取网页授权access_token(与基础支持中的access_token不同)和openid
3、通过网页授权access_token和 openid 获取用户基本信息(支持 UnionID 机制)
网页授权详细流程:
1.在用户从公众号进入系统的时候,引导关注者打开如下页面,获取code:
由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问;链接属性如下:
用户同意授权后,页面将跳转至 redirect_uri/?code=CODE&state=STATE
1、code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。
2、微信重定向回调地址,一定要在微信公众号平台进行配置,为后端接口地址。(本次业务我们配置的是前端登录页面,沙箱中内配置的网页授权域名为本地https起的服务器域名(test.c3data.com.cn:3000))。
2.通过code换取网页授权access_token(后端进行)
首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。
尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。
获取code后,请求以下链接(该接口就是第一步中定义的redirect_uri值,即后端接口地址,微信重定向时会进行调用)获取access_token:
获取code后会携带code参数自动重定向到登录页面,此时用code请求后端接口,后端用code换取用户的openid,并返回至前端。
注意:测试环境和正式环境的appId和appSecret是不同的,前后端的测试及正式环境需要配置一致,才能拿到微信用户信息。(前端在测试环境拿到code传给后端,后端只能在appId和secret为测试的配置中换取openId,否则会报错)