How to Implement SSO Login with Spring Security and Vue: Step‑by‑Step Guide

Effect Demonstration

Login Process Explanation

Browser visits sso-server and specifies the callback URL of the business system front‑end.

http://localhost:3000/oauth/authorize?response_type=code&scope=server&client_id=ruoyi&state=ruoyi&redirect_uri=xx

Login on sso-server loginPage using the authentication center's account database.

Submit login form to sso-server.

After successful form login, sso-server redirects to the front‑end address specified in step 1.

Front‑end receives code and calls the business system back‑end to exchange the code for login.

Back‑end returns a token to the front‑end, which then redirects to index.

Core Refactoring Points

Front‑end takes over part of the server work: obtain the SSO callback code and actively request the back‑end login API.

export default {
    name: 'sso',
    created() {
      Cookies.remove('Admin-Token')
      const url = window.location.href.replace('#/authredirect', '')
      this.loginForm.ssoCode = getQueryString(url, 'code')
      this.$store.dispatch("Login", ssoCode)
        .then(() => {this.$router.push({path: "/"});})
    }
}

Back‑end adds an interface to exchange the code for its own system token, calling the sso‑server API to verify the user, similar to WeChat or other third‑party flows.

public String loginBySso(String ssoCode) {
    // exchange code for sso token & username
    String json = getAccessToken(ssoCode);
    String username = JSONObject.parseObject(json).getString("username");
    // user authentication
    Authentication authentication;
    try {
        authentication = authenticationManager
                .authenticate(new UsernamePasswordAuthenticationToken(username, "SSO"));
    } catch (Exception e) {
        throw new CustomException(e.getMessage());
    }
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username.toString(), Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
    LoginUser loginUser = (LoginUser) authentication.getPrincipal();
    // generate token
    return tokenService.createToken(loginUser);
}

Refactor the existing business system (Spring Security) for password‑less login.

public class SsoBCryptPasswordEncoder extends BCryptPasswordEncoder {
    @Override
    public boolean matches(CharSequence rawPassword, String encodedPassword) {
        // treat raw password "SSO" as a special flag
        if ("SSO".equals(rawPassword.toString())) {
            return true;
        }
        return super.matches(rawPassword, encodedPassword);
    }
}

Related Source Code

Business system demo: https://gitee.com/pig4cloud/RuoYi-Vue

Server sso-server: https://gitee.com/log4j/pig