微信网页授权步骤差不多有三步,具体文档可查看这里,我画了下流程图:
微信授权流程图
以下为代码实战
第一步:用户同意授权,获取 code
需先调用 /auth 接口,传入必传参数 url 以及 scope(此为参数名)
请求方式:GET
- url 为回调地址
- scope 有两个可选参数 snsapi_base 只能获取进入页面用户的 openid,用户无感知,叫静默授权snsapi_userinfo 能获取用户的基本信息,但需要用户接受,叫手动授权,如下图
snsapi_userinfo示意图
具体区别可前往 微信文档 查看
第二步:通过 code 换取网页授权 access_token
这里以手动授权为例
获取到微信的 code 后,再请求 /getUserInfo
请求方式: GET
请求参数:code,需请求 /auth 获取到 code 先,如果你在请求 /auth 时传入的 scope 为 snsapi_userinfo , 那么返回微信个人信息,包括微信名,性别,所在地区,国籍,头像等等,如下
{ "openid":" OPENID", "nickname": NICKNAME, "sex":"1", "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl":";, "privilege":[ "PRIVILEGE1" "PRIVILEGE2" ], "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }
但如果 scope 为 snsapi_base ,请求成功时只返回用户的 openid
PS: 请求/getOpenId、 /getUserInfo 成功时会返回 access_token,但此 access_token 和 微信服务端开发中的 access_token 不同,一个是微信与服务器打交道(微信票据服务),另一个是微信网页的 OAu 服务(网页授权)
第三步:请求 userInfo
拿着 access_token 和 openid,去请求微信官方接口
http:GET(请使用 https 协议) ;openid=OPENID&lang=zh_CN
返回 openid、nickname、sex、province、city、country、headimgurl 等信息,拿着 openid 和你想要的数据返回到原来 /auth 参数中的 url 上
实战
先调用 /auth 接口,传入参数 url 和 scope
请求接口:;scope=snsapi_userinfo
redis 存 url=,即最后授权完成拿到数据后返回的前端地址
判断参数 scope,如果是 snsapi_userinfo,用户点击授权后跳转至 /getWxUserInfo 接口;
如果是 snsapi_base,静默授权后跳转至 getOpenId 接口
这里我们传的 scope 为 snsapi_userinfo,所以请求成功后会有授权页面
授权示意图
点击”同意“会跳转至页面
;state=123
PS: 为该后端服务地址,getWxUserInfo 为路由(即请求接口)
从c 中拿到 code,拿着 code 请求 access_token 服务,access_token 服务也是微信官方提供的一个方法
获取code后,请求以下链接获取access_token: ;secret=SECRET&code=CODE&grant_type=authorization_code
请求成功的话,拿着这个返回值中的 access_token 和 openid,请求 userinfo 接口,在上文已经介绍过,这里不做重复
这里要说明的一点是,如果请求 access_token 的返回 code 为 40029,说明 access_token 已经失效,我们需要重新刷新 access_token
拿到 userinfo 的返回值后,在最开始存在 redis 中的 url 上拼接 openid、headimgurl 等即可
这里需要说明一点
需要先配置 OAu 网页授权的回调页面域名,类似这种
授权回调页面域名
总结
一定要知道一点,微信网页开发和调用微信的 JS-SDK 不一样,也和微信服务端开发不一样
它可以当初拎出来说,坑也比较少,不会遇到像 JS-SDK 那样的各种报错
只要知道,它为为了获取 openid (以及微信个人信息)而弄的一个服务就好了