泛微E9下实现自定义手机端扫码登录PC端
前言
只是简单打个样，涉及二维码超时，页面绘制美观等问题可以自己处理。
本demo模型的需求实际为扫描某某客户的门户系统二维码,实现登录门户系统的逻辑。实际实现的整体过程大概思路是一样的。
实现涉及模块
- 移动建模
使用其拍照组件 - 表单建模
绑定用户和二维码值的表 uf_userscanlogin
实现思路
1、pc端需要一个二维码的页面。
2、页面打开时生成一个随机值的二维码
3、并将二维码的随机值写入建模表 uf_userscanlogin，并轮询该表是否有对应的用户ID产生。
4、手机端使用移动建模扫一扫功能，扫描该二维码，获取对应的值。
5、移动建模中获取当前用户id
6、将用户ID和扫到的二维码的值传给PC端后端接口。
7、二维码页面轮训到用户ID后，使用SSOTOKEN方式登录到系统里。
二维码页面小样
doctype html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="js/jquery-1.11.3.min.js">script>
<script type="text/javascript" src="js/jquery.qrcode.min.js">script>
<title>扫码登录title>
<style>
.container {
margin: 250px 550px;
}
style>
head>
<body>
<div id="code" class="container">div>
<script>
//测试地址 http://192.168.1.19:8088/weavernorth/scanlogin/sample/QueryCode.html
var code = Date.parse(new Date()) + "i";
//text 属性的值长度不能太长，最大字节数 10208
//text 字符串太长 微信/支付宝等扫一扫无法识别，微博识别内容更多
//微博扫一扫：大约200 字以内，微信扫一扫：大约 160字以内，支付宝扫一扫：大约130字符以内
$('#code').qrcode({
text: toUtf8(code),
width: 150,
height: 150
});
$().ready(function () {
//简简单单插入数据到建模里
saveScanUID(code);
//扫描数据库中是否有用户ID了
scanUser(code);
})
//如果内容中有中文，在生成二维码钱就要把字符串转换成utf-8
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
//轮询扫描后台是否有用户ID
function scanUser(uid) {
var timer = null;
timer = setInterval(getUser, 1000, uid);
}
//保存uid
function saveScanUID(uid) {
console.log("uid写入数据库=" + uid);
var params = "method=insertuid&uid=" + uid;
//获取返回值
var result;
$.ajax({
type: "POST",
data: params,
cache: false,
dataType: "text",
url: "/weavernorth/scanlogin/sample/ajaxScanLogin.jsp",
async: false,
success: function (data) {
result = $.parseJSON(data);
//result = data;
},
});
return result;
}
//根据uid查询用户数据能查到
function getUser(uid) {
console.log("执行轮训uid=" + uid);
var params = "method=getUser&uid=" + uid;
//获取返回值
var result;
$.ajax({
type: "POST",
data: params,
cache: false,
dataType: "text",
url: "/weavernorth/scanlogin/sample/ajaxScanLogin.jsp",
async: false,
success: function (data) {
result = $.parseJSON(data);
//result = data;
if (result.code == "S") {
var ssoToken = result.ssoToken;
location.href = "/wui/index.html?ssoToken=" + ssoToken + "#main";
}
},
});
return result;
}
script>
body>
html>
请求后端处理的jsp
为了方便，直接写了个jsp，也可以根据实际改成Ec9的api4层架构方式。
<%@ page import="weaver.conn.RecordSet" %>
<%@ page import="cn.hutool.json.JSONObject" %>
<%@ page import="weaver.integration.logging.LoggerFactory" %>
<%@ page import="weaver.integration.logging.Logger" %>
<%@ page import="weaver.hrm.User" %>
<%@ page import="weaver.general.Util" %>
<%@ page import="cn.hutool.http.HttpRequest" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
Logger log = LoggerFactory.getLogger();
String method = request.getParameter("method");
JSONObject object = new JSONObject();
if ("getUser".equals(method)) {
String uid = request.getParameter("uid");
log.info("uid=" + uid);
RecordSet rs = new RecordSet();
String sql = "select userid from uf_userscanlogin where uid1 = ?";
rs.executeQuery(sql, uid);
String userid = null;
if (rs.next()) {
userid = rs.getString("userid");
}
if (userid != null && !"".equals(userid)) {
User user = new User(Util.getIntValue(userid));
String loginid = user.getLoginid();
object.put("code", "S");
String ssoToken = getSSOTokenStrByLoginid(loginid);
object.put("ssoToken", ssoToken);
} else {
object.put("code", "E");
}
//log.info("获取用户返回值=" + object.toString());
out.print(object.toString());
}
if ("saveUser".equals(method)) {
log.info("执行更新用户！");
String uid = request.getParameter("uid");
String userid = request.getParameter("userid");
RecordSet rs = new RecordSet();
String sql = "update uf_userscanlogin set userid = ? where uid1=?";
boolean b = rs.executeUpdate(sql, userid, uid);
if (b) {
object.put("code", "S");
} else {
object.put("code", "E");
}
log.info("保存用户=" + object.toString());
out.print(object.toString());
}
if ("insertuid".equals(method)) {
String uid = request.getParameter("uid");
RecordSet rs = new RecordSet();
String sql = "insert into uf_userscanlogin (uid1) values (?)";
boolean b = rs.executeUpdate(sql, uid);
if (b) {
object.put("code", "S");
} else {
object.put("code", "E");
}
log.info("插入uid=" + object.toString());
out.print(object.toString());
}
%>
<%!
public String getSSOTokenStrByLoginid(String loginid) {
String address = "http://192.168.231.136:8088";
String ssoToken = HttpRequest.post(address + "/ssologin/getToken")
.form("loginid", loginid)
.form("appid", "forE9")
.execute()
.body();
return ssoToken;
}
%>
移动建模的扫一扫页面
可以在移动建模使用html组件，将该代码放到html组件的代码块中去。
<script>
$().ready(function () {
//扫一扫的结果
Mobile_NS.scanQRCode(function (result) {
var uid = result;
//当前用户id
var userid = Mobile_NS.getCurrUser();
saveUser(userid, uid);
});
})
function saveUser(userid, uid) {
var params = "method=saveUser&userid=" + userid + "&uid=" + uid;
//获取返回值
var result;
$.ajax({
type: "POST",
data: params,
dataType: "text",
async: false,
url: "/weavernorth/scanlogin/sample/ajaxScanLogin.jsp",
success: function (data) {
// result = $.parseJSON(data);
result = data;
if (result.code == "S") {
Mobile_NS.alert("登录成功", function () {
var res = em.checkJsApi("closeWindow");
if (res) {
em.ready(function () {
em.closeWindow();
});
} else {
history.go(-1);
}
});
} else {
Mobile_NS.alert("登录失败，请重新扫描！");
}
}
});
return result;
}
script>
总结
通过以上几个过程即可实现简单的手机端扫一扫，pc端登录的效果。
手机端扫码效果
图片违规？看不了了
这是pc端效果
