Skip to content

QR Code login demo like wechat. 学习扫码登录的例子,类似微信。

Notifications You must be signed in to change notification settings

aisuhua/qrcode-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 

Repository files navigation

QR Code Demo

Live Demo

该项目的主要目是为了学习扫码登录的主要流程。

提示:该项目没有客户端,应此需要通过调用接口模拟客户端的操作。

前提条件

用户在网页端未登录、用户在客户端已经登录(这里用接口来代表客户端)。

扫码登录步骤

  1. 用户打开网页;
  2. 网页端请求接口获取一个 uuid 并将它渲染成一张二维码图片;
  3. 网页端开始轮询检测该 uuid 的状态(即二维码的状态);
  4. 用户拿起手机并打开对应的 APP 扫描网页上的二维码;
  5. 扫描后,手机 APP 询问用户是否确认登录或者取消本次操作;
  6. 用户在手机 APP 点击确认登录按钮;
  7. 网页端检测到 uuid 变成已确认状态后,会调用 uuid 登录接口(该接口会生成保持用户状态的 Cookie);
  8. 网页端跳转到网站首页,完毕。

主要接口

获取 uuid

只用于 Web 端,初始打开登录页面或刷新登录页面都会调用。

/qrcode/get

该接口返回以下信息:

{
    "uuid":"5c7ce144dbc4a0.53849626",
    "qrcode":"http://qrcode.example.com/qrcode/scan?uuid=5c7ce144dbc4a0.53849626"
}

qrcode 就是二维码的内容,APP 扫描以后直接请求该地址即可,这有利于发版后接口的迭代。

检测 uuid 状态

只用于 Web 端,该接口会不停轮询调用。

/qrcode/check?uuid={:uuid}

uuid 有以下状态:

  1. 初始化
  2. 已扫描
  3. 已登录(即已被使用)
  4. 已过期
  5. 已取消

有两个特别的地方需要指出:

  1. 用户使用 APP 扫描二维码后,该接口会返回用户的头像,更利于用户辨认;
  2. 用户确认登录后,该接口会返回一个 ticket,用于完成 uuid 进行的登录,防止有人恶意刷登录接口;

对于以上的说明,建议直接看接口返回的内容和源代码。

扫描二维码

用户在 APP 端扫描二维码后,APP 会调用该接口。该接口地址实际上也是二维码的内容。

/qrcode/scan?uuid={:uuid}

该接口返回以下信息:

{
    "confirm_url":"http://qrcode.example.com/qrcode/confirm?uuid=5c7ce20ae619a1.18514665",
    "cancel_url":"http://qrcode.example.com/qrcode/cancel?uuid=5c7ce20ae619a1.18514665"
}

confirm_url 是确认登录时所调用的接口,而 cancel_url 是取消登录所调用的接口。

确认登录

用户在 APP 端确认登录后,APP 会调用该接口。

/qrcode/confirm?uuid={:uuid}

取消登录

当用户取消本次操作时会调用该接口。

/qrcode/cancel?uuid={:uuid}

uuid 登录

网页端获知 uuid 状态已经变成已确认后,则会调用该接口,完成登录操作。

/login/qrcode=?ticket={:ticket}&uuid={:uuid}&time={:timestamp}

上面已经提到过,ticket 是为了安全起见而添加。

部署方法

项目依赖:

能让项目跑起来就好,可不必太过受制于 Phalcon 框架本身,它只是个普通的 PHP extension.

克隆本项目

cd /path/to
git clone [email protected]:aisuhua/qrcode-demo.git

修改可写权限

chmod u+w app/cache/data

Nginx 配置

server {
    listen        80;
    server_name   qrcode.example.com;

    root /path/to/qrcode-demo/public;
    index index.php index.html index.htm;

    charset utf-8;
    client_max_body_size 100M;
    fastcgi_read_timeout 1800;

    location / {
        try_files $uri $uri/ /index.php?_url=$uri&$args;
    }

    location ~ [^/]\.php(/|$) {
        fastcgi_pass  127.0.0.1:9000;
        fastcgi_index /index.php;

        include fastcgi_params;
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        if (!-f $document_root$fastcgi_script_name) {
            return 404;
        }
        
        fastcgi_param PATH_INFO       $fastcgi_path_info;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~ /\.ht {
        deny all;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires       max;
        log_not_found off;
        access_log    off;
    }
}

也可以参考 Phalcon 官方给出的示例 Web Server Setup

截图演示

初始状态

Alt text

扫描二维码

Alt text

二维码已过期

Alt text

TODO

  • 轮询的调用方式不止有延迟,也会增加了大量的无效请求,有待改进。

后记

如需了解微信扫码登录的实现细节,可点击这里

参考文献

About

QR Code login demo like wechat. 学习扫码登录的例子,类似微信。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published