Today’s sharing started, please give us more advice ~
Nowadays, most systems have their own authentication service, which is the first step in the user’s interaction with the system. The system needs a series of steps to understand who you are and what you can do, so that it can better serve you.
I. What is the authentication service
Authentication verifies whether a user has the right to access the system.
Authentication involves two aspects:
- User authentication: The network authenticates users to prevent unauthorized users from occupying network resources.
- Network authentication: Users can authenticate networks to prevent users from accessing illegal networks and obtaining key information.
In this case, authentication mainly refers to user authentication, that is, how to confirm “you are you”. The simplest manifestation is the usual user login and logout.
Two, the use of servlet+ JDBC to achieve a simple user login procedures
1. Clear your mind
First, we need to think carefully about what we really need.
Let’s recall how a typical login is done.
For web pages, a login page will appear, then, enter the account password, click login, and a success/failure page will pop up.
How do you judge success/failure?
Think about it, the easiest way is to take the data from the front end and look it up in the data to see if the password is the same, and then reply to the front end: I found it, it is XXX or I can’t find his record, ask him to re-enter the account password.
Then the front end responds with corresponding operations, such as redirecting to the home page if the login succeeds, and allowing the user to re-enter if the login fails.
2. Hand in hand teach you to achieve a simple Web login procedures
① Create a Web project
Open IDEA and create a new Web project
Here to facilitate jar package management, select maven-structured project, then select From prototype creation, select WebApp (this is just convenient, you can also choose empty project, but it takes some time).
Click Next and enter the project name
Here select the corresponding Maven, idea has its own Maven and JAR repository.
Select complete, and the simplest project structure comes out.
The next step is to configure pom.xml, since you are using JDBC and Tomcat JARS (after all, you are calling other people’s interfaces)
(just add it to the project TAB), which means importing two third-party toolkits
② Write a simple login page
Here I want to be pretty and lazy, so I use the template of the Layui framework
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理-登陆</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.main-body {top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
.login-main .login-bottom .center .item input {display:inline-block;width:227px;height:22px;padding:0;position:absolute;border:0;outline:0;font-size:14px;letter-spacing:0;}
.login-main .login-bottom .center .item .icon-1 {background:url(../images/icon-login.png) no-repeat 1px 0;}
.login-main .login-bottom .center .item .icon-2 {background:url(../images/icon-login.png) no-repeat -54px 0;}
.login-main .login-bottom .center .item .icon-3 {background:url(../images/icon-login.png) no-repeat -106px 0;}
.login-main .login-bottom .center .item .icon-4 {background:url(../images/icon-login.png) no-repeat 0 -43px;position:absolute;right:-10px;cursor:pointer;}
.login-main .login-bottom .center .item .icon-5 {background:url(../images/icon-login.png) no-repeat -55px -43px;}
.login-main .login-bottom .center .item .icon-6 {background:url(../images/icon-login.png) no-repeat 0 -93px;position:absolute;right:-10px;margin-top:8px;cursor:pointer;}
.login-main .login-bottom .tip .icon-nocheck {display:inline-block;width:10px;height:10px;border-radius:2px;border:solid 1px #9abcda;position:relative;top:2px;margin:1px 8px 1px 1px;cursor:pointer;}
.login-main .login-bottom .tip .icon-check {margin:0 7px 0 0;width:14px;height:14px;border:none;background:url(../images/icon-login.png) no-repeat -111px -48px;}
.login-main .login-bottom .center .item .icon {display:inline-block;width:33px;height:22px;}
.login-main .login-bottom .center .item {width:288px;height:35px;border-bottom:1px solid #dae1e6;margin-bottom:35px;}
.login-main {width:428px;position:relative;float:left;}
.login-main .login-top {height:117px;background-color:#148be4;border-radius:12px 12px 0 0;font-family:SourceHanSansCN-Regular;font-size:30px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#fff;line-height:117px;text-align:center;overflow:hidden;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
.login-main .login-top .bg1 {display:inline-block;width:74px;height:74px;background:#fff;opacity:.1;border-radius:0 74px 0 0;position:absolute;left:0;top:43px;}
.login-main .login-top .bg2 {display:inline-block;width:94px;height:94px;background:#fff;opacity:.1;border-radius:50%;position:absolute;right:-16px;top:-16px;}
.login-main .login-bottom {width:428px;background:#fff;border-radius:0 0 12px 12px;padding-bottom:53px;}
.login-main .login-bottom .center {width:288px;margin:0 auto;padding-top:40px;padding-bottom:15px;position:relative;}
.login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
body {background:url(../images/loginbg.png) 0% 0% / cover no-repeat;position:static;font-size:12px;}
input::-webkit-input-placeholder {color:#a6aebf;}
input::-moz-placeholder {/* Mozilla Firefox 19+ */ color:#a6aebf;}
input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */ color:#a6aebf;}
input:-ms-input-placeholder {/* Internet Explorer 10-11 */ color:#a6aebf;}
input:-webkit-autofill {/* 取消Chrome记住密码的背景颜色 */ -webkit-box-shadow:0 0 0 1000px white inset !important;}
html {height:100%;}
.login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
.login-main .login-bottom .tip .login-tip {font-family:MicrosoftYaHei;font-size:12px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#9abcda;cursor:pointer;}
.login-main .login-bottom .tip .forget-password {font-stretch:normal;letter-spacing:0;color:#1391ff;text-decoration:none;position:absolute;right:62px;}
.login-main .login-bottom .login-btn {width:288px;height:40px;background-color:#1E9FFF;border-radius:16px;margin:24px auto 0;text-align:center;line-height:40px;color:#fff;font-size:14px;letter-spacing:0;cursor:pointer;border:none;}
.login-main .login-bottom .center .item .validateImg {position:absolute;right:1px;cursor:pointer;height:36px;border:1px solid #e6e6e6;}
.footer {left:0;bottom:0;color:#fff;width:100%;position:absolute;text-align:center;line-height:30px;padding-bottom:10px;text-shadow:#000 0.1em 0.1em 0.1em;font-size:14px;}
.padding-5 {padding:5px !important;}
.footer a,.footer span {color:#fff;}
@media screen and (max-width:428px) {.login-main {width:360px !important;}
.login-main .login-top {width:360px !important;}
.login-main .login-bottom {width:360px !important;}
}
</style>
</head>
<body>
<div class="main-body">
<div class="login-main">
<div class="login-top">
<span>LayuiMini后台登录</span>
<span class="bg1"></span>
<span class="bg2"></span>
</div>
<form class="layui-form login-bottom" action="/login" method="post">
<div class="center">
<div class="item">
<span class="icon icon-2"></span>
<input type="text" name="uname" lay-verify="required" placeholder="请输入登录账号" maxlength="24"/>
</div>
<div class="item">
<span class="icon icon-3"></span>
<input type="password" name="pwd" lay-verify="required" placeholder="请输入密码" maxlength="20">
<span class="bind-password icon icon-4"></span>
</div>
</div>
<div class="tip">
<span class="icon-nocheck"></span>
<span class="login-tip">保持登录</span>
<a href="javascript:" class="forget-password">忘记密码？</a>
</div>
<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
<button class="login-btn" type="submit" lay-submit="" lay-filter="login">立即登录</button>
</div>
</form>
</div>
</div>
<div class="footer">
©版权所有 2014-2018 叁贰柒工作室<span class="padding-5">|</span><a target="_blank" href="http://www.miitbeian.gov.cn">粤ICP备16006642号-2</a>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
//原本想用json的post发送，结果发现后端数据得自己解析，为了降低难度，直接用form表单的post提交，这样后端直接拿数据即可（不然还得解析Json数据）
// layui.use(['form','jquery'], function () {
// var $ = layui.jquery,
// form = layui.form,
// layer = layui.layer;
//
// // 登录过期的时候，跳出ifram框架
// if (top.location != self.location) top.location = self.location;
//
// $('.bind-password').on('click', function () {
// if ($(this).hasClass('icon-5')) {
// $(this).removeClass('icon-5');
// $("input[name='pwd']").attr('type', 'password');
// } else {
// $(this).addClass('icon-5');
// $("input[name='pwd']").attr('type', 'text');
// }
// });
//
// $('.icon-nocheck').on('click', function () {
// if ($(this).hasClass('icon-check')) {
// $(this).removeClass('icon-check');
// } else {
// $(this).addClass('icon-check');
// }
// });
//
// // 进行登录操作
// form.on('submit(login)', function (data) {
// data = data.field;
// if (data.uname == '') {
// layer.msg('用户名不能为空');
// return false;
// }
// if (data.pwd == '') {
// layer.msg('密码不能为空');
// return false;
// }
// $.ajax({
// url:'/login',
// method:'post',
// data:data,
// dataType:'JSON',
// success:function(res){
// if (res.msg==='登录成功'){
// layer.msg('登录成功', function () {
// window.location = '../index.html';
// });
// }else {
// layer.msg("登录失败");
// }
// },
// error:function (data) {
// }
// }) ;
//
//
// return false;
// });
// });
</script>
</body>
</html>
Copy the codeOf course, part of the above code is commented out. The reason is that if we send the POST request in JSON format, the servlet at the back end (specifically, Tomcat parsing) does not help us parse and encapsulate this part of data, so we cannot directly get it and have to parse the data by ourselves. Of course, there are some third-party toolkits that can do this for us (such as Fastjson from Alibaba, etc.), but to make it easier, we use a form to submit a POST request so that we don’t have to do the parsing.
It works like this:
If you haven’t learned Layui or are not very good at the front end, you can do this too
Same function, but it doesn’t look so good.
③ Write servlet programs
When we have the front page, it looks a lot better, but we haven’t written the actual validation yet.
Imagine that we are the back-end program. The data at the front end has gone through all kinds of difficulties, from the intricate network to our server, and then distributed to the corresponding port through the system. At this moment, the Tomcat program at this port receives the HTTP request, encapsulates it, and distributes it to us after a series of operations. All we have to do is take the wrapped request and verify it, and then modify the returned object accordingly. And that’s what the Servlet class needs to do.
package com.dreamchaser.loginTest; import com.dreamchaser.loginTest.mapper.UserMapper; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class LoginServlet extends HttpServlet { static UserMapper userMapper=UserMapper.getUserMapper(); @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String uname=req.getParameter("uname"); String pwd=req.getParameter("pwd"); ServletOutputStream outputStream = resp.getOutputStream(); String result; If (pwd.equals(usermapper.getPwdByName (uname))){// response result=" Login succeeded "; }else {result=" login failed "; } outputStream.write(result.getBytes()); }}Copy the codeYou may be wondering what this UserMapper is, but don’t worry, we’ll cover it later.
④ Encapsulate JDBC operation and write a simple database connection pool
Before working with the database, it is a good idea to write a simple database connection pool. One is to simplify our operations; the other is to save overhead and improve performance (Connection is a very resource-consuming object, frequent creation and reclamation will be a huge cost).
Of course, the above implementation is very crude, concurrency performance is not very good, high concurrency may also occur OOM, but make use of it.
⑤ Operating the database
The singleton design pattern is used to ensure that there is only one UserMapper object. (Very crude, implementation is not elegant, look at your code, suddenly feel framework is convenient)
The function here is to query the password based on the username.
6 configuration web. XML
Tomcat doesn’t know where your servlet class is, so it needs to know. The purpose of configuring web.xml is to tell Tomcat where it is (or more specifically, the servlet container) (with annotations, of course). The configuration is as follows:
Write the path to your servlet class in servlet-class.
⑦ IDEA Running configuration
Idea configuration is relatively convenient.
Click Edit configuration
Click + (Add button) and select Tomcat server (either is fine, I chose Tomcat local)
Then select the corresponding server program and configure the port on which tomcat will run (note: do not use the existing port, default 8080, I use 9090 because 8080 is occupied).
You also need to configure the artifacts here, because projects typically run in two ways:
One is to create a WAR package and put it in the Tomcat webapps directory
One is to jar it and run it directly (SpringBoot works this way because it has Tomcat built in)
The role of the artifact here is to form a WAR package, but for each run deployment? Idea will help you get it done! Is it convenient?
The purpose of the application context here is to prefix the access path
I’m just going to write “/”, so if we want to access login.html, isn’t that convenient?
⑧ Run the program
Click on the run
Access success. try the account password.
Now I only have root in my database
Incorrect password
Enter the correct password
At this point, we were relieved to finally complete the simple login function.
Third, review the improvement
Don’t worry, although we have achieved the login function, but the implementation is too simple, all sides did not consider, return to the page only login success, login failure prompt.
Let’s go back and think about what the problems were,
1. Password encryption streaking
2. The login information is not stored
4. Implement a simple authentication service (registration, login, permission control) with SpringBoot+SSM
summary
I saw a question asking me to write a simple Web login application, which means using servlets, JSP, and JDBC. In line with the principle of either don’t do it or do it well, I started to complete the topic (in fact, it is also to write the user authentication part of the practical training), and I have relevant experience before, this time just can be used.
Today’s share has ended, please forgive and give advice!