二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码
二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
特点：
信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
应用范围广, 支持文字,声音,图片,指纹等等...
容错能力强, 即使图片出现部分破损也能使用
成本低, 容易制作
容错级别：
**L级**（低） 7％的码字可以被恢复。
**M级**（中） 的码字的15％可以被恢复。
**Q级**（四分）的码字的25％可以被恢复。
**H级**（高） 的码字的30％可以被恢复。
二维码生成插件qrious.js
qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| background | String | "white" | 二维码的背景颜色。 |
| foreground | String | "black" | 二维码的前景颜色。 |
| level | String | "L" | 二维码的误差校正级别(L, M, Q, H)。 |
| mime | String | "image/png" | 二维码输出为图片时的MIME类型。 |
| size | Number | 100 | 二维码的尺寸，单位像素。 |
| value | String | "" | 需要编码为二维码的值 |
qrious生成二维码的代码：
<html>
<head>
<title>二维码入门小demo</title>
</head>
<body>
<img id="qrious">
<script src="qrious.min.js"></script>
<script>
var qr = new QRious({
element:document.getElementById('qrious'),
size:250,
level:'H',
value:'http://www.baidu.com'
});
</script>
</body>
</html>
网站扫码登录的一些理解：
第一步：用户A访问网页版系统点击使用二维码登录，系统服务器为这个会话生成一个全局唯一的id，并以此id为基础生成url做成二维码放到页面上（www.xxx.com/login.html?id=xxxxxxx），
于此同时需要把此id写到redis之类的数据库中（可以以id为key），此时系统并不知道访问者是谁。 第二步：用户A打开自己的该系统的手机APP并扫描这个二维码，首先验证手机端用户是否登录，登录过后跳转到扫码得到的url中。 第三步：手机端是登录状态，用户点击url中的确认登录后，手机上的客户端将账号信息和这个扫描得到的id 一起提交到redis中（根据id这个key，把用户信息及token之类的登录信息写到value中）。 第四步：一般来说在第一步之后，需要建立一个长连接或者轮询查看redis这个以id为key的value值，如果value不为空且验证用户身份后，通知网页版系统，这个ID对应的用户是A，然后使其登录网页版。
但是这种长连接是比较耗费资源的，可以考虑用GOEASY之类的web消息推送来代替长连接这种方式。
二维码生成插件qrious及网站扫码登录的一些理解的更多相关文章
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- Highcharts使用二维数组生成图表
Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-3.微信网站扫码支付介绍
笔记 3.微信网站扫码支付介绍 简介:讲解微信网页扫码支付 1.扫码支付文档:https://pay.weixin.qq.com/wiki/doc/api/native.php ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- js 二维码生成 插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
- Chrome浏览器二维码生成插件
猛击就可以使用啦->>>猛击使用 源码如下: 源码打包 源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...
- 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
随机推荐
- dict 没有 key 的情况
如何处理, 请参考下文, 主要是要理解思路, https://www.polarxiong.com/archives/Python-%E6%93%8D%E4%BD%9Cdict%E6%97%B6%E ...
- vue-router教程二（要素篇之新手入门）
注意,我们将在指南中使用es 2015代码样本.此外,所有示例都将使用VUE的完整版本来使在线模板编译成为可能.请参阅这里的更多细节. 用vue路由器创建单页应用程序是非常简单的.使用vue.js,我 ...
- gradle build scan 插件使用
1. 添加插件 build.gradle plugins { id 'com.gradle.build-scan' version '1.10.2' } buildScan { // Uncommen ...
- spec.template.spec.initContainers[1].securityContext.privileged: Forbidden: disallowed by policy 问题解决
主要是执行系统特权应用解决方法: api server controller-manager 加上 --allow-privileged=true 即可 之后重启服务
- jenkins api 使用
1. java <dependency> <groupId>com.offbytwo.jenkins</groupId> <artifactId>je ...
- hadoop之 distcp（分布式拷贝）
概述 distcp(分布式拷贝)是用于大规模集群内部和集群之间拷贝的工具. 它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成. 它把文件和目录的列表作为map任务的输入,每个任务会 ...
- Linux VPS上DenyHosts阻止SSH暴力攻击
2009年07月23日 下午 | 作者:VPS侦探 现在的互联网非常不安全,很多人没事就拿一些扫描机扫描ssh端口,然后试图连接ssh端口进行暴力破解(穷举扫描),所以建议vps主机的空间,尽量设置复 ...
- Python学习总结之一 -- 基础篇
Python学习第一篇 一:写在前面 啊,最近我的新博客一直都没有更新学习内容了,只是最近一直都在忙着寻找实习机会(或许这只是一个借口,真实原因是我太懒惰了,改改改!).终于今天又投递了几个新的实习职 ...
- NetCore下模拟和使用Modbus工业通信协议
Tips: 1.目前NetCore下与Modbus通信的框架主要选择了 Modbus.Net https://github.com/parallelbgls/Modbus.Net 2.modbus是 ...
- 【AR实验室】mulberryAR：并行提取ORB特征
本文转载请注明出处 —— polobymulberry-博客园 0x00 - 前言 在[AR实验室]mulberryAR : ORBSLAM2+VVSION末尾提及了iPhone5s真机测试结果,其中 ...