登机牌认证Demo

  1 <style>
  3 body{
  4   background-color:#fff;
  5 }
  6 .auth-tab-wrapper{
  7   height:70px;
  8 }
  9 #sms-tab,#boarding-tab{
 10   float:left;
 11   height:60px;
 12   padding-top:10px;
 13   width:50%;
 14   background-color:#fff;
 15   text-align:center;
 16   font-family:‘微软雅黑‘;
 17 }
 18 #boarding-tab{
 19   background-color:#5fd7f6;
 20 }
 21 .phoneBox{
 22  margin:10px 0 0 10%;
 23  height:40px;
 24  width:80%;
 25 }
 26 #phoneNumID{
 27   height:40px;
 28   width:60%;
 29 }
 30 .sms-btn{
 31   height:40px;
 32   width:35%;
 33 }
 34 #passwordID{
 35   margin:10px 10% 0 10%;
 36   height:40px;
 37   width:80%;
 38 }
 39 .sms-sub{
 40   margin:10px 10% 0 10%;
 41   width:80%;
 42   height:40px;
 43 }
 44 .auth-content-wrapper{
 45   padding-top:10px;
 46 }
 47
 48 #boarding-content{
 49   display:none;
 50 }
 51 table,tr,td{
 52   border:0;
 53 }
 54 #boarding-content table{
 55   width:90%;
 56   margin:0 auto;
 57   font-family:‘微软雅黑‘;
 58   font-size:12px;
 59 }
 60 #boarding-content input[type=text]{
 61   margin:3px 0;
 62   height:40px;
 63   width:100%;
 64 }
 65 #boarding-content input[type=button]{
 66   margin-top:3px;
 67   height:40px;
 68   width:100%;
 69 }
 70 #second-page{
 71   display:none;
 72 }
 73
 74
 75 </style>
 76
 77
 78 <div id="first-page">
 79
 80   <!--滚动图片需要按照下面的html代码构建-->
 81   <div id="html-slider" class="swipe">
 82     <div class="swipe-wrap">
 83      <div><img class=‘swipe-img‘ src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226800258.jpg" /></div>
 84     <div><img  class=‘swipe-img‘ src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226803744.jpg" /></div>
 85     <div><img  class=‘swipe-img‘ src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226825527.jpg" /></div>
 86     </div>
 87   </div>
 88
 89
 90   <div class="auth-box">
 91       <div class="auth-tab-wrapper">
 92          <div id="sms-tab" onclick="showAuthContent(‘sms‘)">短信认证<br/>SMS Auth</div>
 93          <div id="boarding-tab" onclick="showAuthContent(‘boarding‘)">登机牌认证<br/>Bording Pass Auth</div>
 94       </div>
 95       <div class="auth-content-wrapper">
 96          <div id="sms-content">
 97              <div class=‘phoneBox‘>
 98              <input id="phoneNumID" type="text" placeholder=‘请输入手机号‘ />
 99              <input class="sms-btn" type="button" onclick="sendMessage()" value="获取验证码" />
100              </div>
101              <input id="passwordID" type="password" placeholder=‘请输入验证码‘/><br/>
102              <input class="sms-sub" type="button" onclick="authOnline(1)" value="认证上网" />
103          </div>
104          <div id="boarding-content">
105              <table>
106                 <tr><td>证件号/POSSPORT:</td>
107                      <td><input type="text"id="boarding-certificateNo" /></td></tr>
108                 <tr><td>航班号/FLIGHT:</td>
109                      <td> <input type="text" id="boarding-flyNo"/></td></tr>
110                 <tr><td> 座位号/SEAT:</td>
111                      <td><input type="text" id="boarding-userName"/></td></tr>
112                 <tr><td colspan=‘2‘>
113  <input type="button" value="登机牌认证/Bording Pass Auth" onclick="authOnline(7)"/></td></tr>
114              </table>
115
116          </div>
117       </div>
118   </div>
119 </div>
120
121 <div id="second-page">
122     <img src="http://172.24.128.187/ngProxy//imagesuqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150519/1432029502296.jpg" width="100%"/>
123
124 </div>
125
126
127 <script>
128
129 function showAuthContent(type){
130    if(‘sms‘==type){
131      $(‘#sms-tab‘).css(‘background-color‘,‘#fff‘);
132      $(‘#boarding-tab‘).css(‘background-color‘,‘#5fd7f6‘);
133      $(‘#sms-content‘).show();
134      $(‘#boarding-content‘).hide();
135    }else if(‘boarding‘==type){
136      $(‘#sms-tab‘).css(‘background-color‘,‘#5fd7f6‘);
137      $(‘#boarding-tab‘).css(‘background-color‘,‘#fff‘);
138      $(‘#sms-content‘).hide();
139      $(‘#boarding-content‘).show();
140    }
141 }
142
143
144 function sendMessage(){
145     var result = sendSMS("#phoneNumID");
146     if(result==‘succ‘){
147         alert("短信发送成功!");
148     }else if(result==‘fail‘){
149         alert("短信发送失败!");
150     }
151 }
152
153 //认证上网函数
154 function authOnline(type){
155   var result;
156   if(1==type){
157     //短信认证
158     result = authenticate(1, ‘#phoneNumID‘, ‘#passwordID‘);
159   }else if(7==type){
160     //登机牌认证
161     result = authenticate(7,‘#boarding-userName‘,‘#boarding-certificateNo‘,‘#boarding-flyNo‘);
162   }else{
163     //这个判断分支必须存在,不能删除
164     result = authenticate();
165   }
166   if(result == ‘succ‘){
167     //这里可以编写任意认证上网成功的页面效果,例如:
168     $(‘#first-page‘).hide();
169     $(‘#second-page‘).show();
170   }else if(result == ‘fail‘){
171     //这里可以编写任意认证上网失败的页面效果,例如:
172     alert("用户名和密码错误");
173   }
174 }
175
176 </script>
时间: 2024-10-08 05:49:27

登机牌认证Demo的相关文章

oauth简单使用

一.oauth原理参考 理解OAuth 2.0 二.本例中采用授权码模式 大致流程 (A)用户访问客户端,后者将前者导向认证服务器. (B)用户选择是否给予客户端授权. (C)假设用户给予授权,认证服务器将用户导向客户端事先指定的"重定向URI"(redirection URI),同时附上一个授权码. (D)客户端收到授权码,附上早先的"重定向URI",向认证服务器申请令牌.这一步是在客户端的后台的服务器上完成的,对用户不可见. (E)认证服务器核对了授权码和重定向

restful-framwork续集2

1.版本控制 1.1版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 随着我们项目的更新~版本就越来越多~~我们不可能新的版本出了~以前旧的版本就不进行维护了~~~ 那我们就需要对版本进行控制~~这个DRF也给我们提供了一些封装好的版本控制方法~~ 1.2版本控制怎么用 之前我们学视图的时候知道APIView,也知道APIView返回View中的view函数,然后调用的dispatch方法~ 那我们现在看下APIView.d

shiro 之 认证登录的demo

1 shiro登录的简单demo 1.1 web.xml添加shiroFilter <!-- shiro过虑器,DelegatingFilterProx会从spring容器中找shiroFilter --> <filter> <filter-name>shiroFilter</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</fi

一个简单的MariaDB认证插件demo

代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的语句是: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 这样创建的用户,登录时的认证方式是密码.其实创建用户的语句还可以是: CREATE USER 'username'@'host' IDENTIFIED VIA 'pluginna

springboot+spring security +oauth2.0 demo搭建(password模式)(认证授权端与资源服务端分离的形式)

项目security_simple(认证授权项目) 1.新建springboot项目 这儿选择springboot版本我选择的是2.0.6 点击finish后完成项目的创建 2.引入maven依赖  下面是我引入的依赖 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q

2.阿里实人认证 .net 准备工作2 转换demo

1.引入阿里的SDK 2. 搬一下java 的代码 DefaultProfile profile = DefaultProfile.GetProfile( "cn-hangzhou", //默认 "YourAccessKeyID", //您的Access Key ID "YourAccessKeySecret"); DefaultProfile profile = DefaultProfile.GetProfile( "cn-hangz

401认证钓鱼demo

<?php //@b4dboy if(!isset($_SERVER['PHP_AUTH_USER']) && !isset($_SERVER['PHP_AUTH_PW'])) { Header("WWW-Authenticate: Basic realm=\"USER LOGIN\""); Header("HTTP/1.0 401 Unauthorized"); } else { @file_put_contents('.

asp.net权限认证:HTTP基本认证

一.HTTP基本认证示意图 HTTP基本认证,即http basic认证. 客户端向服务端发送一个携带基于用户名/密码的认证凭证的请求.认证凭证的格式为“{UserName}:{Password}”,并采用Base64编码,经过编码的认证凭证被存放在请求报头Authorization中,Authorization报头值类似:Basic MTIzNDU2OjEyMzQ1Ng==.服务端接收到请求之后,从Authorization报头中提取凭证并对其进行解码,最后采用提取的用户名和密码实施认证.认证

给某单位的远程接入动态密码认证 建设方案

目         录 一.       远程接入身份认证应用概述.... 3 2.1         远程接入身份认证应用现状... 3 2.2         双因素认证方案建设意见... 3 2.3         认证双因素基本原理... 5 二.       身份认证解决方案.... 5 3.1         动联身份认证系统介绍... 6 3.1.1          认证服务... 7 3.1.2          管理中心... 9 3.1.3          动码令. 12