微信授权扫码登陆
微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里;
另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式)
第一种方式的完成非常简单,但是第二种方式,就需要前后台都做一些调整了
微信扫码登陆的准备工作 这是在开始做相关业务开发之前的一些东西
- 去微信开放平台中注册一个账号,并完成自己的开发者资质认证(这个链接应该点不过去,他们token是明文存在地址栏里的....),开发者资质认证要花 300块钱,可以绑定10个移动应用程序和10个网站应用上(还有公众号、小程序和第三方平台,这些不是主体内容,不做说明)。
- 创建网站应用,这些东西按照流程走就好了
- 网站应用创建并审批完之后可以直接查看该应用,里面有
AppID
和AppSecret
,用小本本记好,未来要用的 - 接口信息里有一个微信登陆,申请开通即可(没有走第一步的可能会提示要认证,老老实实把第一步内容走了吧,该花的钱...让老板报销去吧)
- 授权回调域,这个东西填写自己网站(处理扫码登陆相关业务的)后台域名地址,如果后台没有跑在80端口,则需要在里面指定端口号,只要填写顶级域名即可(
arunoido.com:411/
)(格式有问题的话,在实际操作可能会提示redirect_uri
参数错误)子级域名自动继承
操作流程
官方文档里已经给了一套非(shi)常(fen)明(mo)确(hu)的操作手册了,这里贴上文章链接
整体的代码流程如下(说的有一点点抽象,有一个宏观意识就好,不要太专注于某一个地方的实现,后面会说):
- 前台界面生成二维码,同时开启轮询,每隔一段时间(时间你定)去查看用户登陆状况
- 用户用微信扫描二维码,进入了该网站的授权界面
- 前台收到了确认,向后台发起请求,携带
code
和state
- 后台用code请求微信接口,拿到
access_token
等一系列信息(我是仅作登陆的,所以拿了一个union_id
,如果需要的话,可以用access_token
换取一些微信用户的信息,然后就可以干一些猥琐的事情了,比如.....比如把别人的微信头像存到自己的数据库里!),将union_id
存入redis
中,key
使用微信提供的state
- 前台在轮询过程中会拿到后台返回的结果,没有绑定的跳转登陆界面绑定,有绑定的直接进入
- (绑定流程)前台账号密码发送到后台,后台完成绑定
代码处理
前台处理
- 微信提供了一个js文件用于生成二维码以及发送请求并完成界面重定向,使用即可,具体说法在官方文档中请求示例下面 步骤一、二,按照文档填写内容即可(注:
redirect_uri
参数填写后台微信扫码登陆的接口地址) - 修改登陆界面,在选择扫码登陆之后,判断是否绑定账号,如果绑定账号,则用该账号登陆;如果未绑定账号,则需要登陆账号完成微信号的绑定/注册(注:这里要修改一下,传统的登陆是后台响应前台请求,因为扫码结果的回调是被包装过的(微信登陆的那个js里有相关的请求以及响应代码,但是他们没有解释里面的接口,代码也是压缩过的,不方便查看接口方法,所以我也没有把它做成响应的),所以需要去轮询扫码结果,判断登陆状态)
- 添加新的接口请求(状态请求接口)
后台处理
- 增加三个接口,微信扫码登陆,微信账号绑定和一个查询响应状况的功能
- 微信扫码登陆接口使用
GET
方法,参数有code
和state
,返回值为void - 用
code
请求union_id
,并将union_id
存入redis
中备用,key
使用state
参数 - 查询响应接口使用
POST
方法,接受参数为state
,用于查询union_id
,数据为空说明请求超时,有数据但是在数据库中查询不到则说明用户未绑定,有数据且查询到了用户,可以直接调用后台的登陆接口,然后返回token
。 - 微信账号绑定使用
POST
方法,参数有state
、acc
和pwd
。用于扫码登陆的后半段,用户扫码完成之后输入账号密码,账号密码正确且能查出union_id
,完成绑定,并调用账号密码的登陆接口,返回token
。
我一直都误解了微信扫码登陆模块的流程惹...