最详细的Keycloak教程（建议收藏）：Keycloak实现手机号、验证码登陆——（三）基于springboot&keycloak+vue的前后端分离项目

最新推荐文章于 2025-06-01 09:06:28 发布

原创

最新推荐文章于 2025-06-01 09:06:28 发布 · 置顶 · 7.4k 阅读

52 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #vue.js #后端 #keycloak #java #redis

在前面两节分别介绍了 Keycloak的下载与使用和keycloak与springboot的集成。
接下来第三节让我们一步步的去完成一个简单的前后端分离项目，并且可以扩展实现sso。

一、简介

本文将介绍如何使用Spring Boot、Keycloak和Vue构建一个具有前后端分离架构的Web应用程序。通过将前端与后端完全独立开发和部署，我们可以实现更高效的团队协作和灵活的技术选型。Spring Boot提供了一个稳定可靠的后台框架，Keycloak提供了身份验证和授权的解决方案，而Vue作为一种灵活易用的前端框架，使我们能够快速开发出优秀的用户界面。

二、keycloak配置

首先回顾一下上一节提到的访问类型：

public： 适用于客户端应用，如前端web系统，包括采用vue、react实现的前端项目等。不需要秘钥访问。
confidential： 适用于服务端应用，比如需要浏览器登录以及需要通过密钥获取access token的web系统。需要秘钥访问。
bearer-only： 适用于服务端应用，只允许使用bearer token请接口，项目里的权限是针对接口做校验，请求没有带上token就会返回401。需要秘钥访问。

在这里我们新创一个keycloak客户端，因为我们的项目是前后端分离的，所以此客户端的访问类型为 bearer-only。
create-client

三、springboot配置

创建好一个新的springboot项目之后，配置yml文件，下面是我的配置，仅供大家参考。

keycloak:
  realm: springboot
  resource: sso-project-backend
  auth-server-url: http://localhost:8080/
  ssl-required: NONE
  bearer-only: true
  credentials:
    secret: nCTbFSEBZDTME14MMf0LBxyzSmmPzbee
  cors: true #允许跨域
  #  use-resource-role-mappings: false
  #鉴权
  security-constraints:
    #需要用户权限的接口
    - auth-roles:
        - user
        - admin
      security-collections:
        - name: user-role
        - patterns:
            - /api/v1/*
    #放行接口
    - auth-roles:
      security-collections:
        - name: any
        - patterns:
            - /api/v1/user/login
            - /api/v1/user/register
            - /api/v1/user/register/register-captcha
            - /api/v1/user/login/captcha
            - /api/v1/user/retrieve-pwd/captcha
            - /api/v1/user/getTokenByRefreshToken

里面的相关数据在keycloak客户端的“安装”中，选择json格式，复制粘贴即可。

秘钥我们前两节也讲过了。
在这里插入图片描述

四、代码实现

最简单的实现思路：前端通过调用后端的注册、登录接口，在后端使用api请求keycloak的相关接口去创建、更新、删除用户的信息。

废话不多说，直接上代码。

4.1 后端接口的实现

在controller层创建一个名为LoginController的文件，在里面编写相关的接口，包括注册、登录、获取验证码等等，示例如下：

@RestController
@RequestMapping("/api/v1/user")
public class LoginController {
   
   

    @Autowired
    private LoginService loginService;

    @SneakyThrows
    @PostMapping("/register")
    public Response userRegister(@RequestBody Register register) {
   
   
        return Response.status(loginService.doRegister(register));
    }

    @SneakyThrows
    @PostMapping("/login")
    public Response userLogin(@RequestBody Login login) {
   
   
        return Response.success(loginService.doLogin(login));
    }

    @SneakyThrows
    @GetMapping("/getTokenByRefreshToken")
    public Response getTokenByRefreshToken(String refreshToken) {
   
   
        if (refreshToken == null) {
   
   
            throw new AuthException("无权限访问！");
        }
        return Response.success(loginService.getTokenByRefreshToken(refreshToken));
    }

    @SneakyThrows
    @GetMapping("/login/captcha")
    public Response captcha() {
   
   
        return Response.success(loginService.captcha());
    }

    @SneakyThrows
    @GetMapping("/register/register-captcha")
    public Response registerPhoneCaptcha(String phoneNumber) {
   
   
        return Response.status(loginService.phoneCaptcha(phoneNumber, SmsTypeEnum.USER_REGISTER.getType()));
    }

    @SneakyThrows
    @GetMapping("/retrieve-pwd/captcha")
    public Response forgotPwdCaptcha(String phoneNumber) {
   
   
        return Response.