spring boot 实例之 用户登录

Posted 2023-04-26

参考技术A 上两篇完成了用户信息表的增删查，接下来增加用户登录功能。采用spring security来进行权限控制。我们希望用户可以通过用户名+密码、邮箱+密码、手机号+验证码、微信登录三种登录途径。
先用来完成用户名+密码或手机号+验证码登录。
前面做的用户信息表不是用来登录的，那些信息只是用户的基本信息。为了在用户列表请求得到的数据中不包含密码、手机号等敏感信息。把登录用的数据分开保存，关联到用户信息。

创建数据模型 Safety

这里我们先做一个保存的API，如果不保存一个密码的话，登录的功能不方便测试。先简单的实现用户登录的功能，接下去再优化，修改。把能考虑到的不安全因素解决。

创建一个用户名为biboheart，手机号为15000000000，密码为test的用户。用户前面的列表接口能查到最新创建的用户。

引入spring security组件，开始开发用户登录功能。

创建包：com.biboheart.demo.user.security，用户登录功能都在这个包中完成。
创建security配置文件

因为我们有两种登录方式，所以我们建立usernamePasswordAuthenticationProvider和mobileCodeAuthenticationProvider两个provider来处理登录请求。
UsernamePasswordAuthenticationToken是spring security内置的token对象。我们就不再定义了，需要定义一个MobileCodeAuthenticationToken在包com.biboheart.demo.user.security.tokens中

创建一个过滤器，替换掉原来的UsernamePasswordAuthenticationFilter过滤器。定义为BhAuthenticationFilter 继承至 AbstractAuthenticationProcessingFilter。

对于登录请求，我们接收三个参数。分别是：username，password，autype。autype参数用于告知登录类型：默认为用户名密码方式，mobileCode为手机号验证码方式。如果是mobileCode方式，那么username对应的是手机号，password对应的是验证码。
通过SecurityConfiguration中的.addFilterAt(bhAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)插入过滤器。

用户名密码认证的实现

手机号验证码认证的实现

更多的认证方式照着扩展就可以了。

用户登录需要界面，未登录时要跳转到登录界面，登录成功后要跳转到首页。
页面跳转控制器

首页控制器

index.html

hello.html

login.html

在pom.xml中引入组件

首页是允许访问的，点击“这里”的链接。就进入登录页面。

选择手机号验证码登录：

可以点击注销，再试试用户名密码登录。

如何使用 Spring-Boot、MySQL 和 Thymeleaf 更新登录用户的用户详细信息？

【中文标题】如何使用 Spring-Boot、MySQL 和 Thymeleaf 更新登录用户的用户详细信息？

【英文标题】：How to update user details of a LOGGED IN user using Spring-Boot, MySQL and Thymeleaf?

【发布时间】：2021-01-25 08:47:46

【问题描述】：

我需要在我的 Spring Boot 应用程序中添加一个“更新配置文件”页面。

这意味着当 ROLE_USER 登录用户帐户时，该用户应该能够通过 thymeleaf 表单更新 MySql 数据库中的详细信息。

我已经为 ROLE_ADMIN 实现了编辑详细信息功能。但这完全不同。在这种情况下，我不知道如何使用principal 对象。

CustomerDetailsS​​ervice.java：

@Service
public class CustomerDetailsService implements UserDetailsService
    
    @Autowired
    private CustomerRepository customerRepository;
   
    
    /*
     * Search function implementation for admin dashboard, customer details.
     */    
    public List<Customer> listAll(String keyword) 
        if (keyword != null) 
            return customerRepository.search(keyword);
        
        return customerRepository.findAll();
    
    


    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException 

        Customer customer = customerRepository.findByEmailIdIgnoreCase(username);
        GrantedAuthority authority = new SimpleGrantedAuthority(customer.getRoleid());
    
        UserDetails userDetails = (UserDetails)new User(customer.getEmailId(),
                customer.getPassword(), Arrays.asList(authority));
        return userDetails;
    

customerAccountEdit.html：（这是用于更新详细信息的表单。）

            <div class="wrapper" style="background-image: url('images/bg-registration-form-2.jpg');">
            <div class="inner">
                <form action="#" th:action="@/saveuser" method="post">
                    <h3>Edit Your Profile</h3>
                    <div class="form-group">
                        <div class="form-wrapper">
                            <label for="firstName">First Name</label>
                            <input th:field="*firstName" type="text" name="firstName" class="form-control" ></input>
                        </div>
                        <div class="form-wrapper">
                            <label for="lastName">Last Name</label>
                            <input th:field="*lastName" type="text" name="lastName" class="form-control" ></input>
                        </div>
                    </div>
                    <div class="form-wrapper">
                        <label for="dob">Date of Birth</label>
                        <input th:field="*dob" type="date" name="dob" class="form-control" ></input>
                    </div>
                    <div class="form-wrapper">
                        <label for="telephone">Telephone</label>
                        <input th:field="*telephone" type="text" name="telephone" class="form-control" ></input>
                    </div>
                    <div class="form-wrapper">
                        <label for="emailId">Email</label>
                        <input th:field="*emailId" type="email" name="emailId" class="form-control" ></input>
                    </div>
                    <div class="form-group">
                        <div class="form-wrapper">
                            <label for="street">Street</label>
                            <input th:field="*street" type="text" name="street" class="form-control" ></input>
                        </div>
                        <div class="form-wrapper">
                            <label for="city">City</label>
                            <input th:field="*city" type="text" name="city" class="form-control" ></input>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-wrapper">
                            <label for="district">District</label>
                            <input th:field="*district" type="text" name="district" class="form-control" ></input>
                        </div>
                        <div class="form-wrapper">
                            <label for="province">Province</label>
                            <input th:field="*province" type="text" name="province" class="form-control" ></input>
                        </div>
                    </div>
                    
                        <div class="form-wrapper">
                            <label for="password">Password</label>
                            <input th:field="*password" type="password" name="password" class="form-control" ></input>
                        </div>

                    <button>Save</button>               

                
                </form>
            </div>
        </div>

customerAccount.html :（这是一个ROLE_USER成功登录后的登陆页面）

        <section class="product-filter-section">
        <div class="container">
            <div class="section-title">
                <h3>WELCOME TO YOUR USER-ACCOUNT</h3>   
                
                <form th:action="@/app-logout" method="post">
                <Input type="submit" class="myButton0" value="Sign Out"></Input>
                </form>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="product-item">
                        <div class="pi-pic">
                            <img src="./img/product/wishlist.jpg" ></img>
                            <div class="pi-links">
                                <a href="#" class="add-card"><i class="flaticon-heart"></i><span>My Wishlist</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="product-item">
                        <div class="pi-pic">
                            <img src="./img/product/promotions.jpg" ></img>
                            <div class="pi-links">
                                <a href="#" class="add-card"><i class="flaticon-heart"></i><span>Promotions</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="product-item">
                        <div class="pi-pic">
                            <img src="./img/product/tips.jpg" ></img>
                            <div class="pi-links">
                                <a href="#" class="add-card"><i class="flaticon-heart"></i><span>Fashion Tips</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="product-item">
                        <div class="pi-pic">
                            <img src="./img/product/editprofile.jpg" ></img>
                            <div class="pi-links">
                                <a href="/customerAccountEdit" class="add-card"><i class="flaticon-heart"></i><span>Edit Profile</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                </div>
                
    </section>

我不知道该怎么做。任何想法我该怎么办？提前致谢！

【参考方案1】：

添加此依赖后：

<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

你可以使用sec:authorize，请看::

<div sec:authorize="hasRole('ROLE_ADMIN')">
  This content is only shown to administrators.
</div>
<div sec:authorize="hasRole('ROLE_USER')">
  This content is only shown to users.
</div>