手把手教你用Java實現一套簡單的鑒權服務

前言

時遇JavaEE作業,題目要求寫個簡單web登錄程序,按照老師的意思是用servlet、jsp和jdbc完成。本著要麼不做,要做就要做好的原則,我開始著手完成此次作業(其實也是寫實訓作業的用戶鑒權部分),而之前寫項目的時候也有相關經驗,這次正好能派上用場。

一、何為鑒權服務

引用百度百科的話說

鑒權(authentication)是指驗證用戶是否擁有訪問系統的權利。

鑒權包括兩個方面:

用戶鑒權,網絡對用戶進行鑒權,防止非法用戶占用網絡資源。
網絡鑒權,用戶對網絡進行鑒權,防止用戶接入瞭非法的網絡,被騙取關鍵信息。

而我們這裡的鑒權主要指用戶鑒權,即如何確認“你是你”。最簡單的體現便是平常用的用戶登錄登出。

現今大部分系統都會有自己的鑒權服務,它是用戶與系統交互的第一步,系統需要一系列步驟明白你是誰,你可以做哪些事,明白瞭這些之後它才能更好的服務於你。

二、利用servlet+jdbc實現簡單的用戶登錄程序

1.明確思路

首先,我們要仔細思考一下我們到底需要什麼?

先讓我們回想一下一般的登錄是如何做的呢?

對於網頁,首先會出現一個登錄頁面,然後呢,輸入賬號密碼,點擊登錄,就會彈出成功/失敗的頁面。

那如何去判斷成功/失敗呢?

思考一下,最簡單的方法便是拿到前端傳來的數據之後便將其拿到數據中去查,看看密碼是不是一樣,然後給前端回復說——我找到瞭,他就是XXX或者我找不到他的記錄,讓他重新輸入賬號密碼。

然後前端對此回復做出相應的操作,比如登錄成功便跳轉到首頁,失敗讓用戶重新輸入。

2.手把手教你實現一個簡單的web登錄程序

出於某些原因,我這裡手把手教你如何實現一個簡單的web登錄程序。

①創建web項目

打開idea,新建一個web項目

在這裡插入圖片描述

這裡為瞭方便jar包的管理,選擇maven結構的項目(至於什麼是maven結構,不懂的可以百度,瞭解概念即可),然後選擇從原型創建,選擇webapp(這裡隻是方便,你也可以選擇空項目,不過會費點時間)。

在這裡插入圖片描述

點擊下一步,輸入項目名稱

在這裡插入圖片描述

這裡選擇相應的maven,idea裡有自帶的maven和jar包倉庫,不過我是自己去官網下瞭一個(不下也完全可以)。

在這裡插入圖片描述

選擇完成,這樣一個最簡單的項目結構就出來瞭。

在這裡插入圖片描述

接下來需要配置一下pom.xml,因為要用到jdbc和tomcat的jar包(畢竟都是調用人傢的接口(笑哭))

<dependencies>
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-core</artifactId>
      <version>9.0.37</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.20</version>
    </dependency>
  </dependencies>

(加在project標簽裡就行),上面配置的意思就是導入兩個第三方工具包

②編寫簡單的登錄頁面

這裡我既想要好看,又想偷懶,所以用瞭layui框架的模板

<!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>

當然以上代碼有一部分註釋掉瞭,原因是如果用JSON格式發送post請求,後端的servlet(準確的說是Tomcat的解析)並沒有幫我們解析封裝這部分數據,所以我們無法直接get到,得自己另外解析數據,當然也有一些第三方的工具包可以幫我們做這些事情(如阿裡的fastjson等),這裡為瞭使其更加簡單,所以采用表單提交post請求的方式,這樣解析的工作就不用我們做瞭。

效果是這樣的:

在這裡插入圖片描述

如果你沒學過layui或者對前端不太行,你也可以這樣

<!DOCTYPE html>
<htmllang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶登錄</title>
</head>
<body>
<form action="/login" method="post">
    用戶名:<input type="text" name="uname">
    密碼:<input type="password" name="pwd">
    <input type="submit" value="login">
</form>
 
</body>
</html>

一樣的功能,不過看上去的效果就不怎麼好瞭。

③編寫servlet程序

當有瞭前端的頁面,看上去好瞭很多,但實質校驗的程序我們還沒有寫。

想象一下我們就是後端程序,當前端的數據歷經艱險,從錯綜復雜的網絡中到達我們的服務器,然後經過系統分發到相應端口,這時恰在此端口的tomcat程序接受到瞭HTTP請求並對其封裝,經過一系列騷操作後分發到瞭我們手中,而我們要做的就是拿著這個封裝好的請求進行校驗操作,然後對返回對象進行相應修改。

而這也是servlet類所需要做的(如果你想更好的理解servlet,可以看看bravo1988的回答),

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))){
            //響應
            result="登錄成功";
        }else {
            result="登錄失敗";
        }
        outputStream.write(result.getBytes());
    }
}

你可能會疑惑這個UserMapper是什麼,別急,後面會介紹。

④封裝jdbc操作,編寫簡單的數據庫連接池

在操作數據庫之前,最好寫個簡單的數據庫連接池。一個是簡化我們的操作,一個是節省開銷,提高性能(Connection是個非常耗費資源的對象,頻繁的創建和回收將會是一筆巨大的開銷)

package com.dreamchaser.loginTest.utils;

import java.sql.Connection;
import java.sql.Driver;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

/**
 * 一個簡單的數據庫連接池
 */
public class Pool {
    private static Driver driver;

    static {
        try {
            driver = new com.mysql.cj.jdbc.Driver();
            DriverManager.registerDriver(driver);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
    }

    private static Map<Connection,Integer> pool=new HashMap<>();
    private static String url="jdbc:mysql://localhost:3306/depository?serverTimezone=Asia/Shanghai";
    private static String user="root";
    private static String password="jinhaolin";


    /**
     * 從連接池中獲取一個空閑連接,如果沒有則創建一個新的連接返回
     * synchronized確保並發請求時,數據庫連接的正確性
     * @return
     */
    public synchronized static Connection getConnection(){
        for (Map.Entry entry:pool.entrySet()){
            if (entry.getValue().equals(1)) {
                entry.setValue(0);
                return (Connection) entry.getKey();
            }
        }

        Connection connection=null;
        try {
            connection=DriverManager.getConnection(url,user,password);
            pool.put(connection,0);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return connection;
    }

    /**
     * 釋放connection連接對象
     * @param connection
     */
    public synchronized static void releaseConnection(Connection connection){
        pool.put(connection,1);
    }

}

當然上述實現非常簡陋,並發性能也不是很好,高並發時可能還會發生OOM,不過湊活著用吧(笑哭)。

⑤操作數據庫

package com.dreamchaser.loginTest.mapper;

import com.dreamchaser.loginTest.utils.Pool;

import java.sql.*;

/**
 * 查詢用戶的Mapper
 */
public class UserMapper {
    static UserMapper userMapper=new UserMapper();
    //單例
    public static UserMapper getUserMapper(){
        return userMapper;
    }
    private UserMapper(){
    }
    //默認數據庫中用戶名唯一
    public String getPwdByName(String name){
        Connection connection= Pool.getConnection();
        try {
            PreparedStatement statement=connection.prepareStatement("select pwd from `user` where uname=?");
            statement.setString(1,name);
            ResultSet rs=statement.executeQuery();
            //resultSet初始下標無法訪問,要調用next方法後移一位
            rs.next();
            return rs.getString(1);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }
}

這裡采用單例的設計模式,保證UserMapper對象隻有一個。(非常簡陋,實現也不優雅,看著自己的代碼,突然感覺框架好方便啊(笑哭))

這裡的作用就是根據用戶名查詢密碼。

⑥配置web.xml

雖然寫瞭servlet,但是tomcat並不知道你這個servlet的類在哪啊,所以必須讓tomcat知道,配置web.xml的目的就是通知tomcat在哪(更準確的說是servlet容器)的一種方式(當然也可以用註解)。
配置如下:

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.dreamchaser.loginTest.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>

</web-app>

servlet-class裡寫你這個Servlet類的路徑即可。

⑦idea運行配置

idea配置還是比較方便的。

點擊編輯配置,

在這裡插入圖片描述

點擊+(添加按鈕),選擇tomcat服務器(選哪個都可以,我選瞭tomcat本地)

在這裡插入圖片描述

然後選擇相應的服務器程序,配置項目訪問的端口,就是tomcat在哪個端口運行(註意不要占用已有端口,默認8080,我這裡是因為8080被占瞭,所以用瞭9090)

在這裡插入圖片描述

這裡還得配置一下工件,因為項目要運行一般有兩種方式:

  • 一種是打成war包放在tomcat的webapps目錄下
  • 一種是打成jar包直接運行(SpringBoot就是用這種方式,因為它內置tomcat)

在這裡插入圖片描述

這裡工件的作用就是打成war包,至於每次運行部署?idea都會幫你搞定!是不是很方便?

這裡那個應用程序上下文的作用就是給訪問路徑加個前綴

在這裡插入圖片描述

一般直接寫成”/”就行瞭,這樣我們要訪問login.html,隻需訪問http://localhost:9090/login.html就行瞭,是不是很方便?

⑧運行程序

點擊運行

在這裡插入圖片描述

訪問localhost:9090/login.html(我因為是在login.html外面放瞭一個pages包,所以路徑是http://localhost:9090/pages/login.html)

在這裡插入圖片描述

訪問成功,試試賬號密碼

在這裡插入圖片描述

我現在數據庫裡隻有root這一條數據,試試效果

輸入錯誤的密碼

在這裡插入圖片描述

輸入正確的密碼

在這裡插入圖片描述

到這裡,我們松瞭一口氣,終於完成瞭簡單的登錄功能。

三、回顧

別急,我們雖然實現瞭登錄這個功能,但是這個實現是在太簡陋瞭,各方各面都沒考慮,返回頁面也隻登錄成功,登錄失敗的提示。
我們回顧一下,仔細想想有哪些問題。

1.密碼未加密裸奔

我們在做上面的登錄時查詢時,密碼是查詢出來直接比對的,也就是說數據庫的密碼是明文存儲,而註冊登錄請求中密碼都是明文傳輸,這樣做的安全性極低,當黑客破解進入瞭你的數據庫時,你的數據庫的賬戶信息都在“裸奔”,比如前些年的csdn密碼泄露事件

在這裡插入圖片描述

如果我們存儲在數據庫的用戶密碼是加密過的,那麼就算黑客進入瞭你的數據庫,損失也不會像明文存儲那樣大。

2.登錄信息未存儲

對於這個登錄操作,登錄成功後並未做其他處理,也就是說每次訪問都要登錄(如果對請求進行瞭攔截),或者這個登錄操作就是擺設,用戶訪問其他資源依舊暢通無阻。

3.對於其他資源並未進行權限管理

對於其他資源,如果不進行權限管理,那麼登錄認證便失去瞭意義,不如做成一個靜態網頁來的省事。

四、優化設計

針對上述缺點,我們可以進行以下改進:

1.密碼加密存儲

針對密碼未加密裸奔的問題,我們可以選擇在註冊的時候對密碼進行加密,然後存儲;對於登錄功能,我們對前端傳過來的密碼進行加密,再根據這個密碼去數據庫中取數據,這樣我們就實現瞭對密碼的加密存儲

2.存儲登錄信息

對於登錄操作,我們必須記錄下此次登錄狀態,並在該用戶繼續訪問其他資源時予以放行,避免用戶多次進行登錄操作

3.對資源進行管理

對於系統資源我們必須進行管理,在用戶沒有相應權限時拒絕用戶的訪問請求,這個可以用過濾器或者SpringBoot的攔截器實現。

五、關於鑒權問題

在正式講思路之前,我還是想聊聊鑒權問題。

1.Cookie/Session機制

關於這個問題我不得不說說cookie/session機制(想瞭解的具體可以看這篇cookie和session的詳解與區別)。

總的來說,就是瀏覽器中有個叫做cookie的東西(其實就是個文件),它可以用來存儲一些信息,每次發送請求時,瀏覽器會自動把cookie字段信息加在請求頭裡發送出去

在這裡插入圖片描述

這有什麼用呢?

學過計算機網絡的人應該都清楚我們的http請求是無法保存狀態的,通俗點來講就是這次的請求無法知道上次的請求是什麼,而這也對一些場景帶來的一些不便,就比如說登錄,我們就需要保存上次登錄的信息。

可http請求無法保存狀態,所以我們必須把一些信息寫入到下次的請求裡,保證服務器知道之前的關鍵信息,以便對之後的請求做出特定的操作。

而cookie便是解決這個問題而出現的,當我們需要存儲一些信息(狀態),就可以把信息存入cookie,瀏覽器每次發送請求時都會把cookie放在請求頭中(但這個要註意跨域問題,cookie在遇到跨域訪問時會失效,不過這個無關此次主題,就不細講瞭,感興趣的自行百度吧)。

總而言之,cookie就是存儲在瀏覽器(客戶端)的數據(文件),每次訪問時會帶上對應的cookie。

而session是什麼呢?
session和cookie類似,也是用來存放信息的,不過它是放在服務器上的。不過呢,session的本質是存在於服務器內存中的對象,閱讀源碼我們可以發現其對應的就是一個ConcurrentMap(線程安全的map容器)

在這裡插入圖片描述

每一個客戶端會對應服務端一個session對象,而如何得到的關鍵就在於cookie中的JSESSIONID(tomcat默認是這個名字,名稱可以變,但用法是一樣的),其值便對應這map容器的鍵,而map的值便是session對象。這樣每次用戶發送請求來時,服務器就能準確的找到對應的session對象瞭。

在這裡插入圖片描述

2.用Cookie/Session解決鑒權問題?

明白瞭Cookie/Session的機制以後,我們不難設計出一套簡單的登錄方案——登錄成功後在對應的session對象中存放User信息並設置失效時間,每次訪問資源都看看session中有沒有對應user對象,如果有就說明之前登錄過瞭,直接通過即可,否則說明未登錄,此時可以跳轉至登錄頁面讓用戶進行登錄。

這一切看似都很完美,從某種角度上來說確實如此,但它沒有缺點嗎?

Cookie/Session機制的缺點

1.無法解決跨域問題

在跨域訪問時,cookie會失效,這是為瞭防止csrf攻擊(跨站請求偽造),但對於開發者來說造成瞭一定的困擾,因為現實中的服務器不可能隻有一臺,大概率是集群分佈,雖然可以用反向代理避免跨域訪問,但終究是有局限之處的。

2.session機制依賴於cookie

從cookie/session機制中我們不難看出,session的實現依賴於前端的cookie,因為其session的確定必須要前端請求中cookie,沒有瞭cookie,session是無法確定的。

而這會帶來什麼問題呢?那就是對於多端訪問,如手機App端,其並沒有cookie的直接實現(可以實現,其實也就是在請求頭中加入cookie字段,但使用此方式並不普遍,也挺麻煩的),如果cookie很難使用,那麼session也無法使用。

3.可拓展性不強

如果將來搭建瞭多個服務器,雖然每個服務器都執行的是同樣的業務邏輯,但是session數據是保存在內存中的(不是共享的),用戶第一次訪問的是服務器1,當用戶再次請求時可能訪問的是另外一臺服務器2,服務器2獲取不到session信息,就判定用戶沒有登陸過。

與此同時,當你使用session的時候你會發現一個很尷尬的事情——你無法直接獲取到存放session的map(除非你用反射),這樣就導致你的操作受限,比如你想以某個身份強制下線某個用戶時,session將會變得力不從心。

4.服務器壓力增大

session存在於服務器內存中,如果session很多,那麼服務器壓力便會很大。會頻繁觸發gc操作,導致服務器響應變慢,吞吐量下降。

5.安全性問題

Cookie/Session機制並不是絕對安全,你必須小心應對,當然我接下來說的token方式同樣也有這樣那樣的問題,但是我們要明白一件事情——沒有絕對安全的系統!

當前的所謂安全措施不過是在增加黑客入侵系統的成本,但你要註意的是你在增加黑客入侵的難度和成本的同時,也同樣在增加自己系統的維護成本,它必然是以一定的性能作為代價的

所以如何權衡安全和性能,這是永遠是一件值得我們深思的事情

3.使用token機制解決鑒權問題

什麼是token呢?

事實上它隻是我們自己實現的一套類似cookie/Session的機制。

至於為啥叫token?

你也可以叫它cat,dog之類的,隻要你喜歡,隨便你怎麼取名字(笑哭)。

好瞭,開個玩笑,咱們回到正題,在我看來,token隻是脫胎於cookie/session的一套機制,它的實現原理幾乎是和cookie/session一模一樣的(9成像,當然也有很多根據自己業務的變種)。

如果說cookie/session機制可以描述為下圖:

在這裡插入圖片描述

那麼token機制可以描述為以下形式:

在這裡插入圖片描述

怎麼樣?是不是很像?其實它們核心原理是一樣的。

那token機制相較於cookie/session機制有啥好處呢?

  • 1.可以直接操作token令牌池
  • 2.對於手機App端友好
  • 3.跨域問題可以間接解決
  • 4.對於服務器集群,token令牌池可以放在redis數據庫中(當然也可以是其他方案),這樣可以實現用戶登錄狀態多服務器共享

其實,總的來說,就隻有一條(笑哭),那就是靈活!因為token機制是我們自己實現的(當然也可以借助框架),這樣操作這些東西的時候就不必拘泥於條條框框,可以根據自己的業務需求制定適合的鑒權方案。

悄悄告訴你一句:csdn也是用token的哦!(不過具體實現可能並不一樣)

在這裡插入圖片描述

在這裡插入圖片描述

當然,相較於cookie/session機制而言,它也有個巨大的弊端——在網頁應用中,使用token機制會比使用cookie/session機制麻煩很多,所有都得“從頭再來”,不像cookie/session可以開箱即用。

六、用SpringBoot+SSM實現一套簡單的鑒權服務(註冊,登錄,權限控制)

這裡我是用token來實現鑒權服務的。
以下是我畫的大致流程圖(可能有點醜,有點亂)

在這裡插入圖片描述

在展示代碼實現時,你可能會對某些類比較疑惑,以下是對這些類的說明:

  • RestResponse 這是我用來封裝響應格式的,Status用來封裝響應狀態
  • CrudUtil 這是我用來封裝CRUD操作的工具類,該類主要為瞭簡化controller的響應操作

同時我會省略Service層和Dao層實現

1.註冊服務

①註冊頁面

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="static/css/public.css">
    <link rel="stylesheet"  href="static/lib/layui-v2.6.3/css/layui.css">
    <style>
        body {
            background: url("static/images/loginbg.png") 0% 0% / cover no-repeat;
            position: static;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-main layui-card" style="width: 500px;border-radius: 10px">
        <fieldset class="layui-elem-field" style="margin-top: 20%">
            <legend style="font-size: 30px;padding-top: 20px;text-align: center">用戶註冊</legend>
            <div class="layui-field-box">
                <div class="layui-form layuimini-form" style="margin: 20px;margin-top: 30px">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">用戶名</label>
                        <div class="layui-input-block">
                            <input type="text" name="uname" lay-verify="required" lay-reqtext="用戶名不能為空"
                                   placeholder="請輸入用戶名" value="" class="layui-input">
                            <tip>填寫自己真實姓名</tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">性別</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男" checked="">
                            <input type="radio" name="sex" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">手機</label>
                        <div class="layui-input-block">
                            <input type="number" name="phone" lay-verify="phone" placeholder="請輸入手機號" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">郵箱</label>
                        <div class="layui-input-block">
                            <input id="email" type="email" name="email" lay-verify="email" placeholder="請輸入郵箱" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">密碼</label>
                        <div class="layui-input-block">
                            <input type="text" name="pwd" lay-verify="required" placeholder="請輸入密碼" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">入職時間</label>
                        <div class="layui-input-block">
                            <input type="text" name="entryDate" id="date" lay-verify="date" placeholder="請選擇入職時間"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required" style="display: inline">郵箱驗證碼</label>
                        <input type="text" class="layui-input" name="code" placeholder="請輸入驗證碼" lay-verify="required"
                               maxlength="5" style="width:160px;display: inline">
                        <button id="saveBtn" lay-filter="saveBtn" class="layui-btn layui-btn-normal layui-btn-sm"
                                style="display: inline;margin-left: 10px">發送驗證碼
                        </button>
                    </div>


                    <div class="layui-form-item" style="margin-top: 20px">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-lg" style="width: 150px" lay-submit
                                    lay-filter="registerBtn">註冊
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>


    </div>
</div>

<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer', 'laydate','element'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            element=layui.element,
            $ = layui.$;

        //日期
        laydate.render({
            elem: '#date'
        });

        //監聽提交
        $('#saveBtn').bind('click', function () {
            var email = $('#email').val();
            if (email===''||email==null){
                layer.msg("請輸入正確的郵箱!");
            }else {
                $.ajax({
                    url: "/sendCode",
                    data:'{"email":'+JSON.stringify(email)+'}',
                    type: "post",
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.status !== 200) {
                            layer.msg(data.statusInfo.message);//失敗的表情
                            return;
                        } else {
                            layer.msg("驗證碼發送成功,請前往郵箱查看", {
                                icon: 6,//成功的表情
                                time: 1000 //1秒關閉(如果不配置,默認是3秒)
                            }, function () {

                            });
                        }
                    }
                });
            }
        });
        //監聽提交
        form.on('submit(registerBtn)', function (data) {
            $.ajax({
                url: "/register",
                data: JSON.stringify(data.field),
                type: "post",
                dataType: 'JSON',
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.status !== 200) {
                        layer.msg(data.statusInfo.message);//失敗的表情
                        return;
                    } else {
                        layer.msg("註冊成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒關閉(如果不配置,默認是3秒)
                        }, function () {
                            window.location = '/login';
                        });
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>

②發送驗證碼

sendcode接口

/**
     * 驗證是否有此賬號,然後發送驗證碼
     * @param map 主要認證主體,如賬號,郵箱,qq的openID,wechat的code等
     * @return restResponse,附帶憑證token
     */
    @PostMapping("/sendCode")
    public RestResponse sendCode(@RequestBody Map<String,Object> map){
        if (userService.findUserByCondition(map)==null){
            String principal;
            if (map.get("phone")!=null){
                principal=String.valueOf(map.get("phone"));

            }else if (map.get("email")!=null){
                principal=String.valueOf(map.get("email"));
            }else {
                return CrudUtil.ID_MISS_RESPONSE;
            }
            //創建一個驗證碼
            VerificationCode v=new VerificationCode();
            //將驗證碼存入驗證碼等待池
            VerificationCodePool.addCode(principal,v);
            //發送郵箱驗證碼
            sendEmail(principal,v.getCode());
            return new RestResponse();
        }
        return new RestResponse("",304,new StatusInfo("發送驗證碼失敗,該賬戶已存在!","發送驗證碼失敗,該賬戶已存在!"));
    }

郵件發送方法(調用SpringBoot提供的mail服務(需要導包))

/**
     * 發送帶有驗證碼的郵件信息
     */
    private void sendEmail(String email,String code){
        //發送驗證郵件
        try {
            SimpleMailMessage mailMessage = new SimpleMailMessage();

            //主題
            mailMessage.setSubject("倉庫管理系統的驗證碼郵件");

            //內容
            mailMessage.setText("歡迎使用倉庫管理系統,您正在註冊此賬戶。" +
                    "\n您收到的驗證碼是: "+code+" ,請不要將此驗證碼透露給別人。");

            //發送的郵箱地址
            mailMessage.setTo(email);
            //默認發送郵箱郵箱
            mailMessage.setFrom(fromEmail);

            //發送
            mailSender.send(mailMessage);
        }catch (Exception e){
            throw new MyException(e.toString());
        }
    }

驗證碼對象

package com.dreamchaser.depository_manage.security.bean;

import lombok.Data;

import java.time.Instant;
import java.util.Random;

/**
 * 驗證碼,默認有效期為五分鐘
 * @author 金昊霖
 */
@Data
public class VerificationCode {
    /**
     * 默認持續時間
     */
    private final long DEFAULT_TERM=60*5;
    /**
     * 驗證碼
     */
    private String code;
    /**
     * 創建時刻
     */
    private Instant instant;
    /**
     * 有效期
     */
    private long term;

    /**
     * 根據時間判斷是否有效
     * @return boolean值
     */
    public boolean isValid(){
        return Instant.now().getEpochSecond()-instant.getEpochSecond()<=term;
    }

    public VerificationCode(Instant instant, long term) {
        //生成隨機驗證碼code
        generateCode();
        this.instant = instant;
        this.term = term;
    }


    public VerificationCode(Instant instant) {
        //生成隨機驗證碼code
        generateCode();
        this.instant = instant;
        this.term=DEFAULT_TERM;
    }

    public VerificationCode() {
        //生成隨機驗證碼code
        generateCode();
        this.instant=Instant.now();
        this.term=DEFAULT_TERM;
    }

    private void generateCode(){
        StringBuilder codeNum = new StringBuilder();
        int [] numbers = {0,1,2,3,4,5,6,7,8,9};
        Random random = new Random();
        for (int i = 0; i < 5; i++) {
            //目的是產生足夠隨機的數,避免產生的數字重復率高的問題
            int next = random.nextInt(10000);
            codeNum.append(numbers[next % 10]);
        }
        this.code= codeNum.toString();
    }


}

驗證碼池

package com.dreamchaser.depository_manage.security.pool;

import com.dreamchaser.depository_manage.security.bean.VerificationCode;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 驗證碼等待池
 * @author 金昊霖
 */
public class VerificationCodePool {
    private static Map<String, VerificationCode> pool=new ConcurrentHashMap<>(10);

    /**
     * 增加一條驗證碼
     * @param principal 主要內容,如郵箱,電話號碼等
     * @param verificationCode 驗證碼
     */
    public static void addCode(String principal,VerificationCode verificationCode){
        pool.put(principal, verificationCode);
    }

    /**
     * 根據principal主要信息獲取未過期的驗證碼,如果沒有未過期的令牌則返回null
     * @param principal 主要內容,如郵箱,電話號碼等
     * @return verificationCode 未過期的驗證碼或者null
     */
    public static VerificationCode getCode(String principal){
        VerificationCode verificationCode=pool.get(principal);

        //如果沒有相應驗證碼則直接返回null
        if (verificationCode==null){
            return null;
        }

        //判斷令牌是否過期
        if (verificationCode.isValid()){
            //將驗證碼取出
            pool.remove(principal);
            return verificationCode;
        }else{
            //清除過期驗證碼
            pool.remove(principal);
            return null;
        }
    }

    /**
     * 根據主要信息principal刪除對應的驗證碼
     * @param principal 主要信息
     */
    public static void removeCode(String principal){
        pool.remove(principal);
    }
}

③註冊用戶

MD5加密類

	/*
	 * Copyright (c) JForum Team All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1) Redistributions of
	 * source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2) Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
	 * following disclaimer in the documentation and/or other materials provided with the distribution. 3) Neither the name of "Rafael Steil" nor the names of its contributors may be used to endorse or promote products
	 * derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
	 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
	 * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
	 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE This file creation date: Mar 29, 2003 /
	 * 1:15:50 AM The JForum Project http://www.jforum.net
	 */
	package com.dreamchaser.depository_manage.utils;
	
	import java.security.MessageDigest;
	import java.security.NoSuchAlgorithmException;
	
	/**
	 * MD5加密
	 */
	public class Md5 {
	
		/**
		 * Encodes a string
		 * @param str String to encode
		 * @return Encoded String
		 */
		public static String crypt(String str) {
			if (str == null || str.length() == 0) {
				throw new IllegalArgumentException("String to encript cannot be null or zero length");
			}
			StringBuilder hexString = new StringBuilder();
			try {
				MessageDigest md = MessageDigest.getInstance("MD5");
				md.update(str.getBytes());
				byte[] hash = md.digest();
				for (byte b : hash) {
					if ((0xff & b) < 0x10) {
						hexString.append("0").append(Integer.toHexString((0xFF & b)));
					} else {
						hexString.append(Integer.toHexString(0xFF & b));
					}
				}
			} catch (NoSuchAlgorithmException e) {
				e.printStackTrace();
			}
			return hexString.toString();
		}
	
	}

註冊用戶接口

/**
     * 註冊用戶(通常為手機或者郵箱註冊)
     * @param map 參數列表,包括賬號(手機註冊就是phone,郵箱就是email)、密碼
     * @return 成功則返回憑證,否則返回驗證失敗
     */
    @PostMapping("/register")
    public RestResponse register(@RequestBody Map<String,Object>map){
        String principal;
        Object password=map.get("pwd");
        Object code=map.get("code");
        UserToken userToken;
        //判斷必要參數是否滿足
        if (password==null||code==null){
            return CrudUtil.ID_MISS_RESPONSE;
        }

        //從map中獲取對應參數
        if (map.get("email")!=null){
            principal=String.valueOf(map.get("email"));
            userToken=new UserToken(LoginType.EMAIl_PASSWORD,principal,String.valueOf(password));
        }else {
            return CrudUtil.ID_MISS_RESPONSE;
        }
        //驗證碼正確且成功插入數據
        if (checkCode(principal,String.valueOf(code))){
            //對密碼進行加密然後存儲用戶信息
            map.put("pwd",Md5.crypt(String.valueOf(map.get("pwd"))));
            //如果用戶記錄插入成功
            if (userService.insertUser(map)==1){
                String token= Md5.crypt(userToken.getPrincipal()+userToken.getInstant());
                //返回憑證
                return new RestResponse().setData(token);
            }
        }else {
            //驗證碼錯誤
            return CrudUtil.CODE_ERROR;
        }
        return 

這裡的LoginType是登錄方式,這個之後會提到

檢驗驗證碼方法

/**
     * 用於註冊用戶的方法,主要為號碼驗證和郵箱驗證提供驗證碼核對的服務
     * @param principal 認證主體
     * @param code 驗證碼
     * @return 是否驗證通過
     */
    private boolean checkCode(String principal,String code){
        if (code!=null){
            VerificationCode verificationCode=VerificationCodePool.getCode(principal);
            if (verificationCode!=null){
                return code.equals(verificationCode.getCode());
            }
        }
        return false;
    }

2.登錄服務

登錄界面

這裡為瞭方便起見,我把token存儲在cookie中

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<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="static/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>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1E9FFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>倉庫信息管理系統登錄</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" ></label>
                    <input type="text" name="principal" lay-verify="required|account" placeholder="請輸入郵箱" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" ></label>
                    <input type="password" name="credentials" lay-verify="required|password" placeholder="密碼" autocomplete="off" class="layui-input">
                </div>
                <!-- 徒有其表的驗證碼,主要是不想另外弄瞭 -->
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" ></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="圖形驗證碼" autocomplete="off" class="layui-input verification captcha">
                    <div class="captcha-img">
                        <img id="captchaPic" src="static/images/captcha.jpg">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="記住密碼">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script  src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script  src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script  src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script  src="static/js/cookie.js" charset="utf-8"></script>
<script>
    layui.use(['layer','form'], function () {
        var form = layui.form,
            layer = layui.layer;


        // 登錄過期的時候,跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子線條背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });
        });

        // 進行登錄操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.principal === '') {
                layer.msg('用戶名不能為空');
                return false;
            }
            if (data.credentials === '') {
                layer.msg('密碼不能為空');
                return false;
            }
            if (data.captcha === '') {
                layer.msg('驗證碼不能為空');
                return false;
            }
            data.loginType="email";
            $.ajax({
                url:"/login",
                type:'post',
                dataType:'json',
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(data),
                beforeSend:function () {
                    this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                },
                success:function(data){
                    if(data.status !== 200){
                        layer.msg(data.statusInfo.message);//失敗的表情
                        return;
                    }else{
                        layer.msg("登錄成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒關閉(如果不配置,默認是3秒)
                        }, function(){
                            cookieUtil.createCookie("token",data.data)
                            window.location = '/index';
                        });

                    }
                },
                complete: function () {
                    layer.close(this.layerIndex);
                }
            })
            return false;
        });
    });
</script>
</body>
</html>

當然這裡封裝瞭cookie的操作

var cookieUtil={
    createCookie:function (name,value,days){
        var expires="";
        if (days){
            var date=new Date();
            date.setTime(date.getTime()+(days*14*24*3600*1000));
            expires=";expires="+date.toGMTString();
        }
        document.cookie=name+"="+value+expires+";path=/";
    },
    /*設置cookie*/
    set:function(name,value,expires,path,domain,secure){
        var cookie=encodeURIComponent(name)+"="+encodeURIComponent(value);
        if(expires instanceof Date){
            cookie+="; expires="+expires.toGMTString();
        }else{
            var date=new Date();
            date.setTime(date.getTime()+expires*24*3600*1000);
            cookie+="; expires="+date.toGMTString();
        }
        if(path){
            cookie+="; path="+path;
        }
        if(domain){
            cookie+="; domain="+domain;
        }
        if (secure) {
            cookie+="; "+secure;
        }
        document.cookie=cookie;
    },
    /*獲取cookie*/
    get:function(name){
        var cookieName=encodeURIComponent(name);
        /*正則表達式獲取cookie*/
        var restr="(^| )"+cookieName+"=([^;]*)(;|$)";
        var reg=new RegExp(restr);
        var cookieValue=document.cookie.match(reg)[2];
        /*字符串截取cookie*/
        /*var cookieStart=document.cookie.indexOf(cookieName+“=”);
        var cookieValue=null;
        if(cookieStart>-1){
            var cookieEnd=document.cookie.indexOf(";",cookieStart);
            if(cookieEnd==-1){
                cookieEnd=document.cookie.length;
            }
            cookieValue=decodeURIComponent(document.cookie.substring(cookieStart
            +cookieName.length,cookieEnd));
        }*/
        return cookieValue;
    }
}

登錄接口

這裡的token憑證是根據用戶密碼+當前時刻(鹽)加密得到的

/**
     * 登錄接口
     * @param map 登錄信息
     *  loginType 登錄方式,目前支持的有email,qq,wechat
     *  principal 主要認證主體,如賬號,郵箱,qq的openID,wechat的code等
     *  credentials 類似於密碼,如果是qq,wechat則不需要傳改參數
     *  restResponse,附帶憑證token
     */
    @PostMapping("/login")
    public RestResponse login(@RequestBody Map<String,String> map) {
        UserToken userToken=new UserToken(LoginType.getType(map.get("loginType"))
                ,map.get("principal"),map.get("credentials"));
        return login(userToken);
    }

認證方法

/**
     * 將生成的令牌拿去認證,如果認證成功則返回帶有token憑證響應,否則返回用戶密碼錯誤的響應
     * @param userToken 未認證的令牌
     * @return restResponse 如果認證成功則返回帶有token憑證響應,否則返回用戶密碼錯誤的響應
     */
    private RestResponse login(UserToken userToken) {
        String token=loginRealms.authenticate(userToken);
        if (token!=null){
            return new RestResponse(token);
        }else {
            return CrudUtil.NOT_EXIST_USER_OR_ERROR_PWD_RESPONSE;
        }
    }

登錄方式enum類

這裡可以看到我裡面有多種方式登錄,不過我的代碼裡隻實現瞭郵箱登錄,其餘方式可以自己去實現拓展

package com.dreamchaser.depository_manage.security.bean;

/**
 * 登錄方式枚舉類
 * @author 金昊霖
 */

public enum LoginType {
    /**
     * 通用
     */
    COMMON("common_realm"),
    /**
     * 用戶密碼登錄
     */
    EMAIl_PASSWORD("user_password_realm"),
    /**
     * 手機驗證碼登錄
     */
    USER_PHONE("user_phone_realm"),
    /**
     * 第三方登錄(微信登錄)
     */
    WECHAT_LOGIN("wechat_login_realm"),
    /**
     * 第三方登錄(qq登錄)
     */
    QQ_LOGIN("qq_login_realm");


    private String type;

    LoginType(String type) {
        this.type = type;
    }

    public String getType() {
        return type;
    }

    /**
     * 根據簡單的字符串返回對應的LoginType
     * @param s 簡單的字符串
     * @return 對應的LoginType
     */
    public static LoginType getType(String s){
        switch (s) {
            case "email":
                return EMAIl_PASSWORD;
            case "qq":
                return QQ_LOGIN;
            case "wechat":
                return WECHAT_LOGIN;
            case "phone":
                return USER_PHONE;
            default:
                return null;
        }

    }

    @Override
    public String toString() {
        return this.type;
    }
}

登錄方式類

這裡面可以根據自己的業務拓展,我隻實現瞭郵箱登錄

package com.dreamchaser.depository_manage.security.bean;

import com.dreamchaser.depository_manage.entity.User;
import com.dreamchaser.depository_manage.exception.MyException;
import com.dreamchaser.depository_manage.security.pool.AuthenticationTokenPool;
import com.dreamchaser.depository_manage.service.UserService;
import com.dreamchaser.depository_manage.utils.Md5;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

/**
 * 內置多種登錄方式,和shiro中的realm類似
 * @author 金昊霖
 */
@Component
public class LoginRealms {
    @Autowired
    private UserService userService;

    /**
     * 認證,如果認證成功則返回憑證,否則返回null
     * @param userToken 未認證的令牌
     * @return 如果認證成功則返回憑證,否則返回null
     */
    public String authenticate(UserToken userToken){
        if (userToken.getCredentials()!=null){
            //對密碼加密
            userToken.setCredentials(Md5.crypt(userToken.getCredentials()));
        }
        if (userToken.getLoginType().equals(LoginType.EMAIl_PASSWORD)){
            return handle(userToken,emailLogin(userToken));
        }
        //else if (其他登錄方式...)
        //如果無匹配的認證方式則視為驗證失敗
        return null;
    }

    /**
     * 郵箱登錄方式
     * @param userToken 令牌
     * @return 認證成功返回SimpleUser
     */
    private User emailLogin(UserToken userToken){
        return userService.findUserByEmail(userToken.getPrincipal());
    }

    /**
     * 根據傳入的user是否為null(是否認證通過)來對令牌做剩下的操作(將user刻入令牌,並將該令牌放入令牌池中)
     * @param userToken 經過驗證後的令牌
     * @return token 根據令牌生成的憑證 ,如果認證未成功則返回null
     */
    private String handle(UserToken userToken,User user){
        if (user==null){
            //說明賬戶不存在
            throw new MyException(409,"該用戶不存在,請註冊後再登錄!");
        }
        //判斷密碼是否正確
        if (user.getPwd().equals(userToken.getCredentials())){
            //將User信息刻入令牌
            userToken.setUser(user);
            //獲取token憑證
            String token=Md5.crypt(userToken.getPrincipal()+userToken.getInstant());
            //將令牌放入認證令牌池
            AuthenticationTokenPool.addToken(token,userToken);
            return token;
        }
        return null;
    }
}

認證令牌類

package com.dreamchaser.depository_manage.security.bean;


import com.dreamchaser.depository_manage.entity.User;
import lombok.Data;

import java.time.Instant;


/**
 * 登錄令牌,默認有效期為7天
 * @author 金昊霖
 */
@Data
public class UserToken{

    final long DEFAULT_TERM=60*60*24*7;
    /**
     * 登錄方式
     */
    private LoginType loginType;
    /**
     * 微信、qq的code,郵箱,或者用戶名之類的
     */
    private String principal;

    /**
     * 相當於密碼(一般是加密過的)
     */
    private String credentials;

    /**
     * 放入的時間
     */
    private Instant instant;

    /**
     * 有效期(單位:秒)
     */
    private long term;

    /**
     * 可以放一些不敏感的信息,以便下次訪問時可以直接取出,如果user屬性太多可以另外寫個類,比如SimpleUser,
     * 存放一些經常需要用到的信息。
     */
    private User User;

    /**
     * 根據時間判斷是否有效
     * @return 有效則返回true,否則返回false
     */
    public boolean isValid(){
        return Instant.now().getEpochSecond()-instant.getEpochSecond()<=term;
    }

    public UserToken(LoginType loginType, String principal, String credentials, Instant instant, long term, User user) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = instant;
        this.term = term;
        this.User = user;
    }

    public UserToken(LoginType loginType, String principal, String credentials, Instant instant, long term) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = instant;
        this.term = term;
    }

    public UserToken(LoginType loginType, String principal, String credentials) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = Instant.now();
        this.term=DEFAULT_TERM;
    }

    public UserToken(LoginType loginType, String principal) {
        this.loginType = loginType;
        this.principal = principal;
        this.instant=Instant.now();
        this.term=DEFAULT_TERM;
    }
}

認證令牌池

package com.dreamchaser.depository_manage.security.pool;


import com.dreamchaser.depository_manage.security.bean.UserToken;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 認證後的令牌連接池(由於獲取全局的session比較麻煩,所以自己維護一個類似session的令牌池)
 * @author 金昊霖
 */
public class AuthenticationTokenPool {
    /**
     * 認證後的令牌連接池
     */
    private static Map<String, UserToken> pool=new ConcurrentHashMap<>(10);

    public static void addToken(String token,UserToken userToken){
        pool.put(token, userToken);
    }

    /**
     * 根據token憑證獲取未過期的令牌,如果沒有未過期的令牌則返回null
     * @param token 憑證
     * @return userToken 未過期的令牌
     */
    public static UserToken getToken(String token){
        UserToken userToken=pool.get(token);

        //如果沒有相應令牌則直接返回null
        if (userToken==null){
            return null;
        }

        //判斷令牌是否過期
        if (userToken.isValid()){
            return userToken;
        }else{
            //清除過期令牌
            pool.remove(token);
            return null;
        }
    }

    /**
     * 根據憑證刪除對應的令牌
     * @param token 憑證
     */
    public static void removeToken(String token){
        pool.remove(token);
    }

}

3.權限控制(攔截器)

由於大作業的規模也沒這麼大,權限並沒有劃分很細,所以這裡我隻做瞭鑒權的操作,如果需要對不同資源采取不同的權限控制,我的方案是寫多個攔截器,同時對於不同權限資源路徑加上不同的前綴以便區分控制。(這塊我並未細想,可能還有更好的方案,日後補充吧)

攔截器UserInterceptor

其實登出的操作也在這裡做瞭,相對應的logout方法隻是返回響應而已(笑哭)

package com.dreamchaser.depository_manage.intercepter;

import com.dreamchaser.depository_manage.exception.MyException;
import com.dreamchaser.depository_manage.security.pool.AuthenticationTokenPool;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 認證攔截器,如果請求頭中有相應憑證則放行,否則攔截返回認證失效錯誤
 * @author 金昊霖
 */
@Slf4j
@Component
public class UserInterceptor extends HandlerInterceptorAdapter {

    @Override
    public boolean preHandle(HttpServletRequest request,
                             HttpServletResponse response, Object handler) throws MyException {

        //拿到requset中的head
        String token =null;
        Cookie[] cookies=request.getCookies();
        for (Cookie c:cookies){
            if (c.getName().equals("token")){
                token=c.getValue();
                break;
            }
        }

        if (token==null){
            System.out.println(request.getRequestURI());
            throw new MyException(401,"未授權,請重新登錄!");
        }
        //如果是訪問logout則刪除對應的令牌
        if ("/logout".equals(request.getServletPath())){
            AuthenticationTokenPool.removeToken(token);
            return true;
        }

        if (AuthenticationTokenPool.getToken(token)!=null){
            return true;
        }else {
            throw new MyException(407,"認證失效,請重新登錄!");
        }
    }
}

MVC配置類

註意過濾掉註冊,登錄,登出的接口

package com.dreamchaser.depository_manage.config;

import com.dreamchaser.depository_manage.intercepter.UserInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new UserInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/login", "/register", "/sendCode", "/error")
                .excludePathPatterns("/static/**");
    }

    //    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
//            "classpath:/META-INF/resources/", "classpath:/resources/",
//            "classpath:/static/", "classpath:/public/" };
//    @Override
//    public void addResourceHandlers(ResourceHandlerRegistry registry) {
//        if (!registry.hasMappingForPattern("/webjars/**")) {
//            registry.addResourceHandler("/webjars/**").addResourceLocations(
//                    "classpath:/META-INF/resources/webjars/");
//        }
//        if (!registry.hasMappingForPattern("/**")) {
//            registry.addResourceHandler("/**").addResourceLocations(
//                    CLASSPATH_RESOURCE_LOCATIONS);
//        }
//
//    }
}



七、效果展示

1.註冊

在這裡插入圖片描述

發送驗證碼

在這裡插入圖片描述

註冊成功

在這裡插入圖片描述

數據庫新增一條記錄,並且密碼加密存儲

在這裡插入圖片描述

2.登錄

在這裡插入圖片描述

輸入錯誤的密碼

在這裡插入圖片描述

輸入正確的密碼
在這裡插入圖片描述

同時跳轉至首頁

在這裡插入圖片描述

這裡為瞭方便起見,我把token存儲在cookie中,看看cookie信息

在這裡插入圖片描述

可以看到cookie中已經有token憑證

3.訪問其他資源

未登錄訪問

在這裡插入圖片描述

登錄後訪問

在這裡插入圖片描述

寫在最後

說實話,寫這篇博文花瞭我不少時間,光寫博文都花瞭兩個晚上,更別說自己實際去操作去找資料瞭。別看我現在講的頭頭是道的,當初我為瞭解決這個問題可花瞭不少心力,不說四處查資料學習,光光坑我就踩瞭一堆。

當然瞭,我寫的方案也並非是最好的,隻是用Java實現的一套的簡單的鑒權服務,如果你學過SpringSecurity或者shiro這種權限管理框架,那你肯定能或多或少看出一點它們的影子,因為我有一部分是模仿它們寫的(當然寫的很簡陋罷瞭)。

到此這篇關於手把手教你用Java實現一套簡單的鑒權服務的文章就介紹到這瞭,更多相關Java 鑒權內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: