javascript - 登录表单可操作
问题描述
我有一个登录表单，但我不知道如何使它起作用。我希望它只让我在列表中的人登录其他人无法登录。就像在公司中一样，只有该公司的员工可以登录。此外，当该人登录时，我想进入 PF1.1.html 并保存用户名以显示在该 html 页面的右下角，这样就可以知道谁的会话被启动了不知道我是否'我说得很清楚，但提供了一些反馈，所以我尝试更好地解释。
$(document).ready(function() {
var state = false;
//$("input:text:visible:first").focus();
$('#accesspanel').on('submit', function(e) {
e.preventDefault();
state = !state;
if (state) {
document.getElementById("litheader").className = "poweron";
document.getElementById("go").className = "";
document.getElementById("go").value = "Initializing...";
}else{
document.getElementById("litheader").className = "";
document.getElementById("go").className = "denied";
document.getElementById("go").value = "Access Denied";
}
});
});@import url(https://fonts.googleapis.com/css?family=Audiowide);
::-moz-selection {
background: #cc0000;
text-shadow: none;
}
::selection {
background: #cc0000;
text-shadow: none;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
text-rendering: optimizeLegibility;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
body {
color: #FFF;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 12px;
line-height: 1;
}
.background-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
* {
box-sizing: border-box;
cursor: default;
outline: none;
}
form {
background: #111;
border: 1px solid #191919;
border-radius: .4em;
bottom: 0;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
height: 1000px;
left: 0;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 1500px;
}
form:after {
background: linear-gradient(to right, #111111, #444444, #b6b6b8, #444444, #2F2F2F, #272727);
content: "";
display: block;
height: 1px;
left: 50px;
position: absolute;
top: 0;
width: 150px;
}
form:before {
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
content: "";
display: block;
height: 5px;
left: 34%;
position: absolute;
top: -7px;
width: 8px;
}
.inset {
border-top: 1px solid #19191a;
padding: 20px;
}
form h1 {
font-family: 'Audiowide';
border-bottom: 1px solid #000;
font-size: 200px;
padding: 15px 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #000;
}
form h1 {
color: #FFbb00;
font-family: Audiowide;
font-weight: normal;
}
form h1.poweron {
color: #ffffff;
transition: all 0.5s;
animation: flicker 1s ease-in-out 1 alternate, neon 1.5s ease-in-out infinite alternate;
animation-delay: 0s, 1s;
}
form h1:after {
position: absolute;
width: 250px;
height: 180px;
content: "";
display: block;
pointer-events: none;
top: 0;
margin-left: 138px;
transform-style: flat;
transform: skew(20deg);
background: -moz-linear-gradient(top, hsla(0,0%,100%,0.1) 0%, hsla(0,0%,100%,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,0.2)), color-stop(100%,hsla(0,0%,100%,0)));
background: -webkit-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
background: -o-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
background: -ms-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42ffffff', endColorstr='#00ffffff',GradientType=0 );
background: linear-gradient(to bottom, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
}
input[type=text], input[type=password] {
background: linear-gradient(#1f2124,#27292c);
border: 1px solid #222;
border-radius: .3em;
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
color: #FFF;
font-size: 150px;
margin-bottom: 20px;
padding: 20px 10px;
width: 100%;
}
input[type=text]:disabled, input[type=password]:disabled {
color: #999;
}
label[for=remember] {
color: #bbb;
display: inline-block;
height: 20px;
line-height: 20px;
vertical-align: top;
padding: 0 0 0 5px;
}
.p-container {
padding: 0 20px 20px;
}
.p-container:after {
clear: both;
content: "";
display: table;
}
.p-container span {
color: #0d93ff;
display: block;
float: left;
padding-top: 8px;
}
input[type=submit] {
background: #fb0;
border: 1px solid rgba(0,0,0,0.4);
border-radius: .3em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1);
color: #873C00;
cursor: pointer;
font-size: 100px;
font-weight: bold;
height: 150px;
padding: 20px 20px;
width: 100%;
}
.denied {
color: white !important;
text-shadow: 0 0 1px black;
background: #EE0000 !important;
}
input[type=submit]:hover, input[type=submit]:focus {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -10px 10px rgba(255,255,255,0.1);
}
input[type=text]:hover:not([disabled]),
input[type=text]:focus,
input[type=password]:hover:not([disabled]),
input[type=password]:focus,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background: #27292c;
}
@keyframes neon {
from {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
to {
text-shadow:
0 0 3px #fff,
0 0 7px #fff,
0 0 13px #fff,
0 0 17px #B6FF00,
0 0 33px #B6FF00,
0 0 38px #B6FF00,
0 0 48px #B6FF00,
0 0 63px #B6FF00;
}
}
@keyframes flicker {
0% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
2% {
text-shadow: none;
}
8% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
10% {
text-shadow: none;
}
20% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
22% {
text-shadow: none;
}
24% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
28% {
text-shadow: none;
}
32% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
34% {
text-shadow: none;
}
36% {
text-shadow: none;
}
42% {
text-shadow: none;
}
100% {
text-shadow:
0 0 2.5px #fff,
0 0 5px #fff,
0 0 7.5px #fff,
0 0 10px #B6FF00,
0 0 17.5px #B6FF00,
0 0 20px #B6FF00,
0 0 25px #B6FF00,
0 0 37.5px #B6FF00;
}
}<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.css">
<script src="PF1.js"></script>
</head>
<body>
<div id="Locked Screen">
<div id="Login">
<div class="background-wrap">
<div class="background"></div>
</div>
<form id="accesspanel" action="login" method="post">
<h1 id="litheader">Desk+</h1>
<div class="inset">
<p>
<input type="text" name="username" id="email" placeholder="Username">
</p>
<p>
<input type="password" name="password" id="password" placeholder="Password">
</p>
<div style="text-align: center;">
<input class="loginLoginValue" type="hidden" name="service" value="login" />
</div>
<p class="p-container">
<input type="submit" name="Login" id="go" value="Login">
</p>
</form>
</div>
</body>
</html>当这个人无法登录时，我希望它和这个人一样：https ://codepen.io/aecend/pen/JoLzqr
解决方案
PHP 登录应用程序
我尝试使用 PHP 进行后端处理来回答这个问题。
我没有尝试自己写。我搜索了一个简单的脚本作为示例。
信用：thedevdojo
https://github.com/thedevdojo/php-login-script
这是基于后端的 PHP 解决方案，但我修改为使用 Ajax 并使用您的样式表和装饰性 javascript。
这仅作为示例，可能存在一些严重的安全漏洞。如果您的应用程序面向互联网，而不是在专用网络上，那么我会考虑更多地研究前端安全性。
这是该过程的简单流程。
.
注册.php
我包含了注册功能，因为它使用 php password_hash 来加密密码。我不太了解这有多安全，但它确实对密码进行了加密，因此密码不会以明文形式存储在数据库中。此脚本不发送电子邮件，而是使用电子邮件地址作为用户名。
https://php.net/manual/de/function.password-hash.php
<?php
session_start();
if( isset($_SESSION['user_id']) ){
header("Location: /");
}
require 'database.php';
$message = '';
if(!empty($_POST['email']) && !empty($_POST['password'])):
// Enter the new user in the database
$sql = "INSERT INTO myAppUsers (email, password) VALUES (:email, :password)";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':email', $_POST['email']);
$stmt->bindParam(':password', password_hash($_POST['password'], PASSWORD_BCRYPT));
if( $stmt->execute() ):
$message = 'Successfully created new user';
else:
$message = 'Sorry there must have been an issue creating your account';
endif;
endif;
?>
<!DOCTYPE html>
<html>
<head>
<title>Register Below</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<a href="/">Your App Name</a>
</div>
<?php if(!empty($message)): ?>
<p><?= $message ?></p>
<?php endif; ?>
<h1>Register</h1>
<span>or <a href="login.php">login here</a></span>
<form action="register.php" method="POST">
<input type="text" placeholder="Enter your email" name="email">
<input type="password" placeholder="and password" name="password">
<input type="password" placeholder="confirm password" name="confirm_password">
<input type="submit">
</form>
</body>
</html>
数据库.php
您会注意到其他页面需要 database.php 这是您放置数据库登录信息的地方。
<?php
$dbHost = "localhost";
$dbUsername = "yourdbusername";
$dbPassword = "yourdbpassword";
$dbName = "yourdbname";
try{
$conn = new PDO("mysql:host=$dbHost;dbname=$dbName;", $dbUsername, $dbPassword);
} catch(PDOException $e){
die( "Connection failed: " . $e->getMessage());
}
检查登录.php
这是执行数据库查找的 php 代码，通过 ajax 从 javascript 调用。同样，可能存在安全漏洞，但它有效。
这使用 php password_verify 函数来查看加密密码是否匹配。
https://www.php.net/manual/en/function.password-verify.php
<?php
require 'database.php';
if(!empty($_POST['email']) && !empty($_POST['password'])):
$records = $conn->prepare('SELECT id,email,password FROM myAppUsers WHERE email = :email');
$records->bindParam(':email', $_POST['email']);
$records->execute();
$results = $records->fetch(PDO::FETCH_ASSOC);
$message = '';
if(count($results) > 0 && password_verify($_POST['password'], $results['password']) ){
$_SESSION['user_id'] = $results['id'];
//header("Location: /tutorials/2019042902/private/");
echo "success";
} else {
echo "fail";
//$message = 'Sorry, those credentials do not match';
}
endif;
登录.php
顶部的 php 代码检查会话以查看它是否已设置并自动重定向。不确定您是否想要该功能，但它就在那里。这是加密/解密工作所必需的。
<?php
session_start();
if( isset($_SESSION['user_id']) ){
header("Location: /tutorials/2019042902/private/");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login Below</title>
<!--<link rel="stylesheet" type="text/css" href="assets/css/style.css">-->
<link rel="stylesheet" type="text/css" href="assets/css/customstyle.css">
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="background-wrap">
<div class="background"></div>
</div>
<form id="accesspanel" action="login.php" method="post">
<h1 id="litheader">LOGIN</h1>
<div class="inset">
<p>
<input type="text" name="email" id="email" placeholder="Email address">
</p>
<p>
<input type="password" name="password" id="password" placeholder="Access code">
</p>
<div style="text-align: center;">
<div class="checkboxouter">
<input type="checkbox" name="rememberme" id="remember" value="Remember">
<label class="checkbox"></label>
</div>
<label for="remember">Remember me for 14 days</label>
</div>
<input class="loginLoginValue" type="hidden" name="service" value="login" />
</div>
<p class="p-container">
<input type="submit" name="Login" id="go" value="Authorize">
</p>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/js/script.js?version=20190430v01"></script>
</body>
</html>
资产/js/script.js
带有调用 checklogin.php 的 ajax 的 javascript
$(document).ready(function() {
var state = false;
//$("input:text:visible:first").focus();
$('#accesspanel').on('submit', function(e) {
e.preventDefault();
document.getElementById("litheader").className = "poweron";
document.getElementById("go").className = "";
document.getElementById("go").value = "Initializing...";
$.ajax({
type: "POST",
url: 'checklogin.php',
data: $(this).serialize(),
success: function(data)
{
if (data === 'success') {
window.location = 'private/index.php';
}
else {
//alert('Invalid Credentials');
document.getElementById("litheader").className = "";
document.getElementById("go").className = "denied";
document.getElementById("go").value = "Access Denied";
//alert(data);
}
}
});
/*
state = !state;
if (state) {
document.getElementById("litheader").className = "poweron";
document.getElementById("go").className = "";
document.getElementById("go").value = "Initializing...";
}else{
document.getElementById("litheader").className = "";
document.getElementById("go").className = "denied";
document.getElementById("go").value = "Access Denied";
}
*/
});
});
注销.php
如果您希望用户能够注销。我注意到您的对话具有记住我 14 天的功能。我没有实施。
<?php
session_start();
session_unset();
session_destroy();
header("Location: /");
推荐阅读
- r - 如何将函数应用于特定列
- swift - JSONDecodable 和必需的初始化
- firebase - 我可以使用 Terraform 部署 Firebase https 可调用 (.onCall) 吗？
- angular - 在引导网格中循环角度对象
- html - 以 Latin-1 编码但以 UTF-8 读取的文件可以解决任何问题吗？
- php - 如何在 json laravel 中获取条带错误？
- python - 编码概率加权函数误差
- java - 如何从 Java 中的另一种方法访问变量？
- ios - UITableViewCell 强引用循环，但未被 Instruments 中的 Leaks 拾取
- sql - Sql Json - 使用 SQL Server 2017 Express 更新数组中的 Json 属性