单点登录

概述

本文档旨在介绍如何实现单点登录（SSO），使用户在多个系统中只需登录一次即可访问其他系统。其中涉及后端采用 sa-token 框架，前端使用 Vue3 框架进行集成，并且在 Spring Boot 工程中使用了 @EnableInfraSsoApi 注解以启用基础设施的单点登录相关的 API。

你将获取

• 单点登录的实施方法和配置说明
• 前端和后端的代码示例
• 多个系统之间的身份认证和会话管理说明

后端集成配置

在 Spring Boot 的 application.yml（或 application.properties）文件中添加 sa-token 的配置，示例如下：

# sa-token配置
sa-token:
  token-name: satoken
  host-path: http://alinesno-infra-base-identity-auth-application.beta.base.infra.linesno.com
  sso:
    auth-url: ${sa-token.host-path}/login
    is-http: true
    check-ticket-url: ${sa-token.host-path}/sso/checkTicket
    slo-url: ${sa-token.host-path}/sso/signout
    get-data-url: ${sa-token.host-path}/sso/getData
  sign:
    secret-key: [your_secret_key_here]

在启动类上添加 @EnableInfraSsoApi 注解以启用基础设施的单点登录相关的 API，示例如下：

@EnableInfraSsoApi
@SpringBootApplication
public class BaseWorkflowApplication {

    public static void main(String[] args) {
        SpringApplication.run(BaseWorkflowApplication.class, args);
    }

}

确保 @EnableInfraSsoApi 注解所引用的 InfraSsoApiConfiguration 类中包含了单点登录相关的配置和逻辑。

前端集成示例

以下是一个基于 Vue3 的前端组件代码示例，用于处理单点登录流程。

<template>
  <div>
    <!-- SSO登录页面内容 -->
    <p>这是一个SSO登录页面</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import router from '@/router'
import useUserStore from '@/store/modules/user'
import { setToken } from '@/utils/auth'
import { getParam } from '@/utils/ruoyi'

// 定义变量
const isLogin = ref(false)
const back = getParam('back') || router.currentRoute.value.query.back
const ticket = getParam('ticket') || router.currentRoute.value.query.ticket

// 检查用户登录状态
useUserStore().isSsoLogin().then((res) => {
  isLogin.value = res.data
})

// 页面加载后执行
onMounted(() => {
  if (ticket) {
    doLoginByTicket(ticket)
  } else {
    goSsoAuthUrl()
  }
})

// 重定向至认证中心进行登录
function goSsoAuthUrl() {
  const clientLoginUrl = `${location.origin}/sso/login?back=${encodeURIComponent(location.href)}`

  useUserStore().goSsoAuthUrl(clientLoginUrl).then((res) => {
    location.href = res.data
  })
}

// 使用ticket值进行登录
function doLoginByTicket(ticket) {
  useUserStore().doLoginByTicket(ticket).then((res) => {
    localStorage.setItem('satoken', res.data)
    setToken(res.adminToken)
    location.href = decodeURIComponent(back)
  })
}
</script>

注意事项

• 前端代码中的示例是一个简化的单点登录页面的 Vue3 组件。建议根据实际情况进行适当的调整和修改，包括注释、错误处理以及安全措施等。
• 单点登录的成功与否会影响用户体验和安全性，请确保代码的稳健性和安全性。