转载请标明出处：
http://www.cnblogs.com/dingxiansen/；
本文出自:丁先森-博客园

周六和朋友去网吧开黑，开机打开TGP，朋友那边开始输入账号密码，我看了他一眼low逼，现在谁还手动输入，手机扫一扫就好了，然后打开手机app扫一扫登录成功，美滋滋。其实我们现在不难发现，很多的网页为了便捷登录除了第三方程序登陆，就是二维码扫描登录，比如某宝，某鱼等等，其实我认为二维码扫描不只是为了快捷登录，让人们省了输入账号密码的麻烦，还有一个是为了推广他们的app，不得不说这种也可以当成是推广app的一种手段，好了进入正题。

先说一下实现了什么效果，app扫描php写的页面(也可以java网页，都一样的思路和步骤),扫描成功后跳转进入主页，光和你们这么说，肯定有人说了，没图说个jb，这就出来一个问题，很多人写博客，看这标题特别符合自己的问题，然后兴致勃勃的进来了，一看，我去...尼玛全是代码，也不知道是不是我的那种问题和想要的那种效果，心里没谱啊，好了，上图：

别纠结这页面咋这么丑，没写样式，说一下我实现的思路哈，首先在数据库中新建一个表用来存储扫码登录信息(id,username,randomnum),这三个分别是id自增长，用户名，随机数——>点击生成二维码，生成随机数，可以用http://qr.topscan.com/api.php?text=" + data，可以使用这个生成二维码，当然你也可以自己写，这个操作就相当于某宝的那个二维码登录框，生成二维码之后，这个时候做了一个ajax请求操作，在刚才新建的那个表中插入数据，把生成的随机数保存到表中，这个时候username为空——>打开app进行扫码操作，app扫描完成之后，进行网络请求，把你扫描到的二维码当成参数，做修改操作，修改username为当前你的用户名——>网页使用每个几秒钟请求另外一个接口，根据随机数判断当前username是否为空，如果不为空(刚才扫码修改了username所以不为空)jquery操作做跳转操作，这个就是完整的流程。

说的简单的就是，生成二维码的时候只存入随机数(或者你自定义的随便信息)，使用app扫码之后根据随机数把用户名存进去，网页每隔5s请求另外一个接口时，如果username不为空好了跳转操作。大体就是这样的，有可能大神的实现也不是这样的，我就是把我理解的说出来，如果你们有另外的实现方法也可以在下边评论告诉我，共同学习，下面贴代码了。

部分php(新手可能不太规范，勿喷)login.php代码：

else if ($_REQUEST['act'] != '' && $_REQUEST['act'] == 'codeCreate') {

    //if userName为空--->表示网页第一次点击新建生成

    //网页生成二维码操作，同时添加数据到表中

    if ($_REQUEST['userName'] != '') {//不为空的时候表示修改

        $userName = $_REQUEST['userName'];

        $randomNum = $_REQUEST['randomNum'];

        echo "扫码成功";

        $sql = "update UserCodeLogin set username='$userName' WHERE randomnum='$randomNum'";

//        mysqli_query($conn, $sql);//插入成功

    } else {//为空的时候表示是新建二维码

        //生成随机数

        $randomNum = "";

        for ($i = 0; $i < 5; $i++) {

            $randomNum .= rand(0, 9);

        }

        echo $randomNum;//显示生成的随机数

        $sql = "insert into UserCodeLogin(username,randomnum) VALUES ('','$randomNum')";

//        mysqli_query($conn, $sql);//插入成功

    }

    mysqli_query($conn, $sql);//插入成功

} else if ($_REQUEST['act'] != '' && $_REQUEST['act'] == 'codeSelect') {//根据随机数查询表中的username是否为空

    $randomNum = $_REQUEST['randomNum'];

    if ($randomNum == '' && empty($randomNum)) {

    } else if ($randomNum != '') {

        $sql = "select username from UserCodeLogin where randomnum='$randomNum'";

        $result = mysqli_query($conn, $sql);

//        print_r($result);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $userName = $row['username'];

            }

            if ($userName == '' && $userName == null) {

                //说明客户端还未扫码修改过

            } else if ($userName != '') {

                //客户端扫码完成

                //跳转页面

                echo "客户端扫码成功，跳转中...";

            }

        }

    }

然后是login.html

<html>

<head>

    <title>这是首页</title>

</head>

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>

<body>

<script type="text/javascript">

    var type = 1;

    var randomNum;

    function clickBtn() {

        $.post("../login.php?act=codeCreate&userName=",

            function (data) {

                alert("-------random:" + data);

                randomNum = data;

                $("#img").attr('src', "http://qr.topscan.com/api.php?text=" + data);

            });

        type = 2;

    }

    function time() {

        $.post("../login.php?act=codeSelect&randomNum=" + randomNum,

            function (data) {

                if (data) {

                    alert(data);

                    $(location).attr('href', 'index.html');

                } else {

                }

            })

    }

    setInterval("time()", 4000);

</script>

<button type="submit" id="btn" onclick="clickBtn()"> 点击生成二维码</button>

<!--src="https://www.baidu.com/img/baidu_jgylogo3.gif"-->

<img id="img" style="visibility: visible" width="250px"/>

</body>

</html>

上边就是服务端的部分代码，放心有源码，下边写完一起给

下面开始android了关于android的扫码第三方开源的有挺多的，这里使用的是Zing，他可以实现的挺多的二维码，条形码，生成二维码。。。

建类库，导jar包，掉用，你们可以直接拿过这个类库去，然后自己改需要的样式。

这个图是目录结构

主要的就是mainActivity.java里边的调用了

扫码成功之后的回掉：

@Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

        // 扫描二维码/条码回传

        if (requestCode == REQUEST_CODE_SCAN && resultCode == RESULT_OK) {

            if (data != null) {

                String content = data.getStringExtra(Constant.CODED_CONTENT);

                result.setText("扫描结果为：" + content);

                /*执行网络请求*/

                String username = "dingchao";

                volleyScanCodeLogin(content, username);

                Log.e("aaa","volleyScanCodeLogin。。。3");

            }

        }

    }
volleyScanCodeLogin()方法：
/**

     * 网络请求

     * 使用Volley进行网络请求

     *

     * @param content  携带的随机数和用户名

     * @param username 用户名

     */

    private void volleyScanCodeLogin(final String content, final String username) {

        Log.e("aaa","volleyScanCodeLogin。。。1");

        final RequestQueue mQueue = Volley.newRequestQueue(MainActivity.this);

        StringRequest stringRequest = new StringRequest(Request.Method.POST, "http://你自己的目录地址/webcodelogin/login.php", new Response.Listener<String>() {

            @Override

            public void onResponse(String s) {

                Log.e("aaa","volleyScanCodeLogin。。。2");

                Toast.makeText(MainActivity.this, "" + s, Toast.LENGTH_SHORT).show();

            }

        }, new Response.ErrorListener() {

            @Override

            public void onErrorResponse(VolleyError volleyError) {

            }

        }) {

            @Override

            protected Map<String, String> getParams() throws AuthFailureError {

                Map<String, String> map = new HashMap<String, String>();

                map.put("act", "codeCreate");

                map.put("userName", username);

                map.put("randomNum", content);

                return map;

            }

        };

        mQueue.add(stringRequest);/*请求数据*/

    }


上边那些就是主要的工程代码，然后源码我打包放到百度云盘中，链接：https://pan.baidu.com/s/1slsQM2D 密码：gdyp


新的地址链接：链接：https://pan.baidu.com/s/1pwCnhNCBxbLpIl2-p6WEGQ 密码：833v


如有缺点或不足请不吝指教，如果集成有问题，请留言，或者邮箱dingchao7323@qq.com
												


											
android扫描网页二维码进行网页登录的更多相关文章
	

    
								
  1. Android进阶笔记06：Android 实现扫描二维码实现网页登录
		
    一. 扫描二维码登录的实现机制: 详细流程图: (1)PC端打开网页(显示出二维码),这时候会保存对应的randnumber(比如:12345678). (2)Android客户端扫码登录,Andro ...
    
		
    2. 
						
  2. android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)
		
    写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载   zbarLib编译project  project下载0积分 bug 在2.3的系统中Hol ...
    
		
    3. 
						
  3. Android快速实现二维码扫描--Zbar
		
    Android中二维码扫描的最常用库是zxing和zbar,上一篇<Android快速实现二维码扫描–Zxing>介绍了Zxing.这次说Zbar,Zbar速度极快,我就比较常用,项目地址 ...
    
		
    4. 
						
  4. Android开发 QRCode二维码开发第三方框架
		
    前言 Android开发里二维码开发经常用到,这里简单的介绍下Android开发里的二维码. 最广泛使用的二维码库zxing zxing是最广泛的二维码库各个平台都可以适用它,但是Android平台使 ...
    
		
    5. 
						
  5. HTML5实现扫描识别二维码/生成二维码
		
    扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源.  2. 利用canvas使用相关算法分析图片识别图 ...
    
		
    6. 
						
  6. Android Wear和二维码
		
    这是一篇发布在Android官方开发者社区博客,15年年初的时候就看到了这篇文章,直到现在才有时间把它翻译下来. 这是一篇如何在Android Wear上面如何正确地展示二维码的文章,里面有许多的经验 ...
    
		
    7. 
						
  7. 网页二维码推广App的实现
		
    移动互联网时代,一个APP的平均推广成本早已经超过了10块.而推广通常分二类: 1.已经下载过的用户,可以直接打开应用(一般人的手机上安装的应用都非常多,要快速找到某个应用是很困难的事情,而且Andr ...
    
		
    8. 
						
  8. 二维码合成，将苹果和安卓（ios和android）合成一个二维码，让用户扫描一个二维码就可以分别下载苹果和安卓的应用
		
    因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站 网站名称叫:好推二维码  https ...
    
		
    9. 
						
  9. Android仿微信二维码扫描
		
    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 华为笔试题--LISP括号匹配 解析及源码实现
			
    在17年校招中3道题目AC却无缘华为面试,大概是华为和东华互不待见吧!分享一道华为笔试原题,共同进步! ************************************************ ...
    
			
    2. 
						
  2. Hibernate的一对多查询及去掉重复的对象distinct
			
    问:sql 中 select * from A left join B on A.id=B.id where A.id=? 如果在Hibernate 中 用HQL 怎么表达呢 ?答:from A le ...
    
			
    3. 
						
  3. 【转】漫谈linux文件IO--io流程讲的很清楚
			
    [转]漫谈linux文件IO--io流程讲的很清楚 这篇文章写的比较全面,也浅显易懂,备份下.转载自:http://blog.chinaunix.net/uid-27105712-id-3270102 ...
    
			
    4. 
						
  4. Python实现正交实验法自动设计测试用例
			
    1.简介 正交试验法是研究多因素.多水平的一种试验法,它是利用正交表来对试验进行设计,通过少数的试验替代全面试验,根据正交表的正交性从全面试验中挑选适量的.有代表性的点进行试验,这些有代表性的点具备了 ...
    
			
    5. 
						
  5. Stack by pointer
			
    前言:因为栈的很多操作是基于表的,所以这篇文章里的例程就不再大面积地写注释了,有不理解的地方可以翻看之前的链表笔记,或者直接写在评论区. 咳咳,说到这个栈,很多人乍听之下感觉很陌生.卧槽这是什么玩意. ...
    
			
    6. 
						
  6. Fastify 系列教程四 （求对象、响应对象和插件）
			
    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...
    
			
    7. 
						
  7. BZOJ-1225-[HNOI2001] 求正整数
			
    Description 对于任意输入的正整数n,请编程求出具有n个不同因子的最小正整数m.例如:n=4,则m=6,因为6有4个不同整数因子1,2,3,6:而且是最小的有4个因子的整数. Input n ...
    
			
    8. 
						
  8. [Bayesian] “我是bayesian我怕谁”系列 - Exact Inferences
			
    要整理这部分内容,一开始我是拒绝的.欣赏贝叶斯的人本就不多,这部分过后恐怕就要成为“从入门到放弃”系列. 但,这部分是基础,不管是Professor Daphne Koller,还是统计学习经典,都有 ...
    
			
    9. 
						
  9. struts2（一）之初识struts2
			
    前言 我们都知道struts2是一个框架,那什么是框架呢?很多人其实不太明白,其实框架就是一个半成品,别人将一些功能已经写好了,我们只需要拿来用即可,像我们之前 使用的dbutils框架,操作数据,只 ...
    
			
    10. 
						
  10. rem 单位
			
    rem(font size of the root element)是指相对于根元素的字体大小的单位.   主流的一些web app的适配解决方案: 流式布局: 流式布局在页面布局的时候都是通过百分比 ...
    
			
    11.