[JAVA] Créez une fonction de connexion / déconnexion avec Spring Security selon le guide officiel de Spring [pour les débutants]

*** Ajout: La description dans home.html et l'image du sukusho étaient incorrectes, je l'ai donc corrigée. *** ***

Hypothèses / environnement

Je voulais créer une fonction de connexion / déconnexion à l'aide de Spring Security, mais j'étais accro à diverses choses et je suis resté bloqué pendant environ 2 jours. Enfin, j'ai décidé de le faire selon le guide officiel du printemps. →https://spring.io/guides/gs/securing-web/

Comme toute la phrase est en anglais, j'ai réussi à la comprendre en écrivant tout en recherchant le sens, je vais donc la partager pour les débutants.

environnement:

• Windows 10
• Eclipse
• Spring Boot 2.1.4
• Java 8 --Construire avec Maven
• Le moteur de modèle est Thymeleaf

Créer un projet avec Spring Boot

Nouveau → Spring Starter Project Sélectionnez et créez avec les éléments suivants.

• Java 8 --Type: Maven --Sélectionnez uniquement Thymeleaf et Web comme dépendances

C'est absolument! Cela ne veut pas dire, mais je pense que le mouvement va changer en fonction de l'environnement, donc je pense que c'est mieux pour les gens qui veulent copier et coller pour le moment.

Présentation de Spring Security

Maintenant, modifions le projet créé.

Tout d'abord, ajoutez la description «J'utiliserai Spring Security!» À pom.xml. (Spring le fait officiellement après avoir créé l'application Hello World, mais cette fois je vais le faire en premier) Qu'est-ce que pom.xml? Si tel est le cas, essayez google. En gros, pom.xml est comme un fichier de configuration Maven. (Excusez-moi si je me trompe)

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>login-Training-SpringBoot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>login-Training-SpringBoot</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        //Ajoutez ici!
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Entre <dependencies> </ dependencies>

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-security</artifactId>
</dependency>

Ajouter. Avec cela, le paramètre «J'utiliserai Spring Security!» Est terminé.

Tout d'abord, créez une application non sécurisée

Tout d'abord, nous allons créer une application qui Hello World sans sécurité.

Création de home.html

Parce qu'il utilise le modèle Thymeleaf

src/main/resources/templates/home.html

Créez un fichier HTML sous le dossier des modèles comme indiqué ci-dessous.

• 4/25 corrigé

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
	<head>
		<meta charset="UTF-8">
		<title>Hello,SpringSecurity!</title>
	</head>
	<body>
		<h1>WELCOME!</h1>
		<br>
        <p>S'identifier<a th:href="@{/hello}">Ici</a></p>
　　　　 <p><a th:href="@{/}">Enregistrement d'un nouvel utilisateur</a></p>
	</body>
</html>

1. Description dans la balise html: déclaration d'utilisation de Thymeleaf, déclaration d'utilisation de sécurité, espace de noms XHTML
2. Lien vers "/ hello"

Tout d'abord sur l'espace de noms. Un espace de noms est un «espace de noms» créé pour qu'un ordinateur puisse identifier une combinaison de plusieurs vocabulaires sur XML, ce qui permet au langage de balisage d'être librement conçu. (au sens propre) C'est trop conceptuel et difficile à comprendre, Cet article est facile à comprendre sur les espaces de noms. Une brève description de l'espace de noms XML

Le "xmlns" utilisé cette fois est appelé "espace de noms XML", et il semble que l'ordinateur puisse être identifié en combinant le type de vocabulaire et l'URI.

Aussi,

Dans de nombreux cas, le schéma http: est utilisé pour l'URI qui indique l'espace de noms, j'ai donc l'impression que quelque chose peut être récupéré, mais c'est principalement le rôle de "ID" comme son nom l'indique. Veuillez comprendre qu'il sera rempli

Eh bien, je suis sûr que vous pensez que c'est un identifiant d'identification d'étiquette ici.

Ici, nous définissons l'espace de noms par défaut avec xmlns =" " Réglage de th: avecxmlns: th =" ", Le sec: est défini avec xmlns: sec =" "`.

Vient ensuite le lien vers "/ hello" Ici, le lien est affiché en notation Thymeleaf. La partie @ {...} de l'attribut th: href est la destination du lien. Dans ce cas, cela signifie qu'il est lié à "localhost: 8080 / hello". (Bien que le lien pour l'enregistrement d'un nouvel utilisateur soit également décrit, il n'est pas implémenté cette fois car il est uniquement affiché et non implémenté)

Comment écrire Thymeleaf Référence: Maîtrisez complètement Thymeleaf avec l'échantillon minimum requis

[hello.html] Maintenant, créez hello.html qui décrit le lien plus tôt.

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <meta charset="UTF-8">
        <title>Hello,SpringSecurity!</title>
    </head>
    <body>
        <h3>Bienvenue!</h3>
    </body>
</html>

Bienvenue ici une fois! Juste afficher.

Création de la classe MvcConfig

Ensuite, créez une classe pour définir MVC. src/main/java/hello/MvcConfig.java Placer dans.

MvcConfig.java

package hello;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer {
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/home").setViewName("home");
        registry.addViewController("/").setViewName("home");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/login").setViewName("login");
    }
}

1. Ajoutez l'annotation @Configuration
2. implémente WebMvcConfigurer

À propos des outils: Implémentez une interface! Comment utiliser les outils en Java [Pour les débutants]

Grosso modo interface (spécification) -> classe implémentée (insérer la définition réelle dans la spécification) -> utiliser cette méthode C'est une image comme ça.

Appliquer la sécurité à votre application

Créer une classe de configuration de sécurité (WebSecurityConfig.java)

Créez une classe de configuration qui hérite de la classe WebSecurityConfigurerAdapter. src/main/java/hello/WebSecurityConfig.java Arrangé comme ça.

WebSecurityConfig.java

package hello;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.provisioning.InMemoryUserDetailsManager;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception{
        http
            .authorizeRequests()
                // "/"Quand/la maison est accessible à tous les utilisateurs
                .antMatchers("/","/home").permitAll()
                //L'accès à d'autres que ceux ci-dessus nécessite une authentification
                .anyRequest().authenticated()
                .and()
            //Spécifications et autorisations d'URL de connexion et de déconnexion pour tous les utilisateurs
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }

    @Bean
    @Override
    public UserDetailsService userDetailsService() {
        UserDetails user =
                User.withDefaultPasswordEncoder()
                    .username("user")
                    .password("pass")
                    .roles("USER")
                    .build();
        return new  InMemoryUserDetailsManager(user);
    }
}

1. Hériter de WebSecurityConfigurerAdapter
2. Écrivez l'annotation @EnableWebSecurity
3. Définissez le chemin de l'URL et les autorisations
4. userDetailsService () utilise l'annotation @Bean pour définir le nom d'utilisateur et le mot de passe

Tout d'abord, l'héritage doit être hérité lors de la création d'une classe.

Donc, @EnableWebSecurity, mais il semble que vous pouvez utiliser la fonction WebSecurity en écrivant ceci. Eh bien, c'est une fonctionnalité de sécurité sur le Web! Telle est la description. Je laisse la définition exacte à Google Sensei. ..

Quant au chemin de l'URL et aux droits d'accès, comme décrit dans les commentaires. Autoriser l'accès à tous les utilisateurs avec permitAll () Nécessite une authentification avec authenticated () Je me sens comme.

Enfin, la partie userDetailsService (), Premièrement, @Bean est identique à JavaBeans, Vous pouvez générer un bean utilisateur (contenu concret) à l'aide de l'annotation @Bean. Il remplace également la classe UserDetailsService, où vous spécifiez votre nom d'utilisateur et votre mot de passe. Ici, le nom d'utilisateur est le nom d'utilisateur, le mot de passe est pass et le rôle est USER.

Créez login.html

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <meta charset="UTF-8">
        <title>LoginPage</title>
    </head>
    <body>
        <div th:if="${param.error}">
Le pseudo ou mot de passe est incorect
        </div>
        <div th:if="${param.logout}">
Déconnecté
        </div>
        <form th:action="@{/login}" method="post">
            <div><label>Nom d'utilisateur:<input type="text" name="username" /></label></div>
            <div><label>mot de passe:<input type="password" name="password" /></label></div>
            <div><input type="submit" value="S'identifier" /></div>
        </form>
    </body>
</html>

src/main/resources/templates/login.html Créé en.

$ {param} est un objet inconnu appelé "objet implicite". Pour l'expliquer grossièrement, il récupère les paramètres après le. (Point). (Rechercher "$ {param} EL expression") Ainsi, vous pouvez obtenir le paramètre d'erreur avec $ {param.error}. Dans ce cas, si l'erreur est vraie, un message d'erreur s'affiche et si la déconnexion est vraie, un message à cet effet s'affiche.

De plus, selon le responsable de Spring, si la connexion échoue, il sera redirigé vers " / login? Error ".

If the user fails to authenticate, the page is redirected to "/login?error" and our page displays the appropriate error message.

Au fait, il semble qu'il soit nécessaire d'ajouter / à la fin de la balise d'entrée lors de l'écriture de XML. Raison de l'erreur si vous n'ajoutez pas "/>" et slash à la balise d'entrée dans Spring Boot 2

Enfin, affichez votre nom d'utilisateur et votre lien de déconnexion dans hello.html

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <meta charset="UTF-8">
        <title>Hello,SpringSecurity!</title>
    </head>
    <body>
        <h2>Hello!</h2>
        <h1 th:inline="text">Hello[[${#httpServletRequest.remoteUser}]]!</h1>
        <form th:action="@{/logout}" method="post">
            <input type="submit" value="Se déconnecter" />
        </form>
        <p></p>
    </body>
</html>

La partie d'affichage du corps a été réécrite.

1. Affichez le nom d'utilisateur avec [[$ {# httpServletRequest.remoteUser}]]
2. Créez un bouton de déconnexion

Récupérez le nom d'utilisateur dans la partie [[$ {# httpServletRequest.remoteUser}]] et affichez-le à l'écran.

We display the username by using Spring Security’s integration with HttpServletRequest#getRemoteUser(). (Du guide officiel)

Ici, utilisez la méthode getRemoteUser () de HttpServletRequest pour obtenir le nom d'utilisateur! Est écrit. En utilisant cette idée, Obtenez les données remoteUser avec httpServletRequest C'est une image comme ça. Les doubles crochets [[]] semblent être pour la conversion de données pour autant que je puisse voir. Je pense que c'est parce que je prends deux étapes: l'obtenir → le formater pour la sortie. Peut-être.

Créer une classe pour exécuter l'application

Je suis enfin là! Tout ce que vous avez à faire est de configurer votre projet pour qu'il s'exécute.

Officiellement, une nouvelle classe d'exécution Application.java est créée dans le package hello, mais en pensant qu'elle est déjà dans le package com.example.demo par défaut ... Quand je l'ai lu, il a dit quelque chose comme "Que dois-je faire s'il est dans le paquet hello?", Donc je l'ai créé au cas où. (Cela peut ne pas avoir de sens car je ne l'ai pas traduit correctement)

@ComponentScan tells Spring to look for other components, configurations, and services in the hello package, allowing it to find the controllers.

src/main/java/hello/Application.java Je vais y arriver.

Application.java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <meta charset="UTF-8">
        <title>Hello,SpringSecurity!</title>
    </head>
    <body>
        <h2>Hello!</h2>
        <h1 th:inline="text">Hello[[${#httpServletRequest.remoteUser}]]!</h1>
        <form th:action="@{/logout}" method="post">
            <input type="submit" value="Se déconnecter" />
        </form>
        <p></p>
    </body>
</html>

Je pense qu'il est normal de supprimer la classe d'exécution par défaut. J'ai peur alors j'ai commenté le texte intégral w

Courir!

Enfin terminé! Lançons-le maintenant.

Vous pouvez le démarrer en cliquant avec le bouton droit de la souris sur l'application projet → Exécuter → Spring Boot. Après cela, essayez d'accéder en tapant http: // localhost: 8080 dans le champ de saisie URL de votre navigateur.

• 4/25 corrigé

home.html

Tout d'abord, l'écran d'accueil a été affiché. Vous pouvez voir le lien vers la page de connexion. Je ne l'ai pas encore utilisé, mais l'enregistrement d'un nouvel utilisateur est également affiché.

Appuyez sur Déconnexion.

login.html

Vous êtes passé à l'écran de connexion. Puisque les informations utilisateur sont "Déconnecté", elles sont affichées comme "Déconnecté".

Ensuite, connectons-nous en entrant le nom d'utilisateur (utilisateur) et le mot de passe (pass) que vous avez spécifiés.

hello.html

J'ai pu me connecter! Puisque le nom d'utilisateur est «utilisateur», c'est un peu difficile à comprendre, mais il se présente sous la forme de «Hello + user +!».

Maintenant, entrons le mauvais nom d'utilisateur ou mot de passe.

login.html

L'erreur s'affiche correctement.

Hmm, c'était si long. Si cela peut être fait après avoir compris le mécanisme, l'application sera efficace.

Je vous remercie pour votre travail acharné!