You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
information-system/application/third_party/dinglogin/views/login-indx.php

125 lines
4.4 KiB
PHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>value系统登录</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/js/poshytip/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="/js/modaldialog/css/jquery.modaldialog.css" type="text/css" />
<link rel="stylesheet" href="/js/kindeditor/themes/default/default.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/poshytip/jquery.poshytip.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.min.js"></script>
<script type="text/javascript" src="/js/modaldialog/jquery.modaldialog.js"></script>
<script type="text/javascript" src="/js/kindeditor/kindeditor-min.js"></script>
<script type="text/javascript" src="/js/basic.js"></script>
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></script>
<link rel="shortcut icon" href="http://data.chtcdn.com/bootstrap/img/glyphicons_290_skull.png">
</head>
<style>
.ding_login{
width:365px;
height:400px;
margin:0 auto;
}
.login_header{
width: 100%;
height: 64px;
font-size: 18px;
color: #898d90;
overflow: hidden;
border-bottom: 1px solid #e8e8e8;
}
.login_type{
width: 50%;
line-height: 60px;
text-align: center;
border-bottom: 4px solid transparent;
float: left;
cursor: pointer;
}
.login_type_active{
color: #38adff;
border-bottom: 4px solid #38adff;
cursor: default;
}
.hide{
display: none;
}
</style>
<body>
<div class="row-fluid">
<div class="span3"></div>
<div class="span6">
<form action="<?php echo site_url('login/check') ?>" class="form-horizontal" name="form_login" id="form_login" method="post">
<legend>
<p>Welcome</p>
<div class="login_header">
<div class="login_type login_type_active">钉钉扫码登录</div>
<div class="login_type"><a href="https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoagxeeheunc0p95eu8&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://www.mycht.cn/webht.php/apps/dingmail/index/auth_login">钉钉账号密码登录</a></div>
</div>
</legend>
<div class="ding_login">
<div id="login_container"></div>
</div>
</form>
<div class="alert alert-error">
<h4>IE6 isn't allowed!</h4>
Please use Google Chrome, Firefox, Safair, or IE7+.
</div>
</div>
<div class="span3"></div>
</div>
</body>
<script>
$(function(){
var url = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoalutppbmywhkyorfp&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://ding.lvh.me:9091/info.php/apps/dinglogin/login/check_login");
var obj = DDLogin({
id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id例如<div id="login_container"></div><span id="login_container"></span>
goto: url,
style: "",
href: "",
width : "300px",
height: "300px"
});
var hanndleMessage = function (event) {
var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
var origin = event.origin;
login_url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoalutppbmywhkyorfp&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://ding.lvh.me:9091/info.php/apps/dinglogin/login/check_login&loginTmpCode='+loginTmpCode;
window.location.href = login_url;
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', hanndleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', hanndleMessage);
}
$('.login_type').click(function(){
console.log($(this).html());
if($(this).html() == '钉钉帐号密码登录'){
$('.pc_login').removeClass('hide');
$('#login_container').addClass('hide');
$('.ding_login').addClass('hide');
$(this).addClass('login_type_active');
$(this).prev().removeClass('login_type_active');
}
if($(this).html() == '钉钉扫码登录'){
$('.ding_login').removeClass('hide');
$('#login_container').removeClass('hide');
$('.pc_login').addClass('hide');
$(this).addClass('login_type_active');
$(this).next().removeClass('login_type_active');
}
});
});
</script>
</html>