天天看点

扫码登录

最近项目上的一个新增功能,---->使用APP进行扫码登录PC客户端。

然后各种百度扫码登录的原理,有道是货比三家,结果,原理果然是 一!样!的!

然后这两天项目又不是太赶,就和后台,原生通力协作,终实现之。

具体步骤:

1.后台,通过服务器生成一个二维码图片,将二维码图片的链接url返回到前台页面上;生成一个特殊的标识字段值,并将该标识字段拼接到链接里,隐藏在二维码里。同时也要将该特殊标识符通过接口返回给前端。PS:此处有两个链接,一个是图片(二维码)的链接;一个是扫码之后解析出来的链接地址(包含生成特殊标识的)。不要弄混。

2.前端,接收到接口返回的图片地址,将其赋值给img的src,在页面上,显示出来 二维码 图片。同时用另外一个变量接收住接口返回的特殊标识符。然后进行轮询,轮询的时候将该标识符发送给接口,用以判断是这个二维码,而不是另外其他的码。通过返回值判断APP上是否进行了扫码并授权登录。如果是,则跳转到首页,或者其他的地方,如个人中心之类的;如果否,则继续轮询;

3.原生,通过调用手机的扫码功能,扫描前端页面上显示的二维码。解析出来该二维码里面隐藏的包含特殊标识符的链接地址,并弹出弹窗,询问是否授权登录。点击确定的时候,请求授权的接口地址。

如下图

扫码登录

继续阅读