Co PlatformAppearance
对接 co-sso 登录
基于 springboot 框架，maven 管理的示例 demo ，进行举例说明。
demo
工程包结构如下所示：
pom.xml
内容如下所示：
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 https://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.6.2</version>
<relativePath/>
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--引入spring web-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</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>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
<?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 https://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.6.2</version>
<relativePath/>
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--引入spring web-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</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>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
application.properties
内容如下所示：
properties
server.port=8080
server.port=8080
最重要对接单点登录系统的前端对接示例参考代码
index.html
代码如下所示：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>第三方系统-主页</title>
</head>
<body>
<div
style="margin: 100px auto; width: 600px; height: 600px;background-color: limegreen;"
>
welcome，home
<button type="button" onclick="logout()" style="float: right">
退出
</button>
</div>
<!--config.js中可以存放前期准备的配置信息-->
<!--<script type="text/javascript" src="js/config.js"></script>-->
<!--引入jquery,便于js操作-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--引入base64对参数进行编解码-->
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript">
// 一、前期准备配置信息（可以将配置文件放入js配置文件，这边为了方便参考直接导入html代码中）
// 1.sso的单点登录页面，可用于登录生成access_token
var loginUrl = 'http://192.168.1.122:9527/login.html'
// 2.sso的单点退出页面，可用于退出注销access_token
var logoutUrl = 'http://192.168.1.122:9527/logout.html'
// 3.当前第三方系统主页
var dsfHome = 'http://192.168.1.122:8080/index.html'
// 按照文档系统《第三方对接》中要求拼接的浏览器中输入的地址，此处的flag=4只是为了标记是第三方系统对接单点登录，可以不拼接这个参数
var targetUrl =
loginUrl + '?' + $.base64.encode('callBackUrl=' + dsfHome + '&flag=4')
// 示例参考targetUrl：http://192.168.1.122:9527/login.html?Y2FsbEJhY2tVcmw9aHR0cDovLzE5Mi4xNjguMS4xMjI6ODA4MC9pbmRleC5odG1sJmZsYWc9NA==
// 二、检测access_token是否存储
// 判断用户是否登录过，access_token有无存储到localStorage，没有存储直接调用单点登录系统提供的退出页面进行清除操作
judge()
function judge() {
var access_token = localStorage.getItem('access_token')
if (access_token == null || access_token.trim().length == 0) {
location.href = targetUrl
}
}
// 三、单点登录系统登录完成之后的处理（最重要）
// 示例参考：http://192.168.1.122:8080/index.html?access_token=091f44ae-5c87-479f-9f90-43d7dccbef36
jump()
function jump() {
var href = window.location.href
console.log(href)
var url = href.split('?')
if (url.length <= 1) {
return
}
var param = url[1].split('=')
if (param[0] == 'access_token') {
// 1.access_token存储到localStorage
localStorage.setItem('access_token', param[1])
// 2.浏览器隐藏access_token
location.href = url[0]
} else {
logout()
}
}
// 四、注销退出
function logout() {
// 获取access_token以备下面调用单点登录系统提供的退出页面进行清除操作
var access_token = localStorage.getItem('access_token')
// 1.无论有无存储access_token，都执行清除操作
localStorage.removeItem('access_token')
// // 方式一：调用单点登录系统提供的注销退出接口(不建议)
// var domainName = 'http://192.168.1.122:7001';// sso启动的ip和port
// $.ajax({
// type : 'get',
// url : domainName + '/co/auth/logout?access_token=' + access_token + '&callBackUrl=' + dsfHome,
// success : function(data) {
// console.log(data);
// location.href = targetUrl;
// }
// });
// 方式二：2.跳转到单点登录系统提供的注销退出页面即可(建议)，此处的flag=4只是为了标记是第三方系统对接退出，可以不拼接这个参数
location.href =
logoutUrl +
'?callBackUrl=' +
dsfHome +
'&access_token=' +
access_token +
'&flag=4'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>第三方系统-主页</title>
</head>
<body>
<div
style="margin: 100px auto; width: 600px; height: 600px;background-color: limegreen;"
>
welcome，home
<button type="button" onclick="logout()" style="float: right">
退出
</button>
</div>
<!--config.js中可以存放前期准备的配置信息-->
<!--<script type="text/javascript" src="js/config.js"></script>-->
<!--引入jquery,便于js操作-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--引入base64对参数进行编解码-->
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript">
// 一、前期准备配置信息（可以将配置文件放入js配置文件，这边为了方便参考直接导入html代码中）
// 1.sso的单点登录页面，可用于登录生成access_token
var loginUrl = 'http://192.168.1.122:9527/login.html'
// 2.sso的单点退出页面，可用于退出注销access_token
var logoutUrl = 'http://192.168.1.122:9527/logout.html'
// 3.当前第三方系统主页
var dsfHome = 'http://192.168.1.122:8080/index.html'
// 按照文档系统《第三方对接》中要求拼接的浏览器中输入的地址，此处的flag=4只是为了标记是第三方系统对接单点登录，可以不拼接这个参数
var targetUrl =
loginUrl + '?' + $.base64.encode('callBackUrl=' + dsfHome + '&flag=4')
// 示例参考targetUrl：http://192.168.1.122:9527/login.html?Y2FsbEJhY2tVcmw9aHR0cDovLzE5Mi4xNjguMS4xMjI6ODA4MC9pbmRleC5odG1sJmZsYWc9NA==
// 二、检测access_token是否存储
// 判断用户是否登录过，access_token有无存储到localStorage，没有存储直接调用单点登录系统提供的退出页面进行清除操作
judge()
function judge() {
var access_token = localStorage.getItem('access_token')
if (access_token == null || access_token.trim().length == 0) {
location.href = targetUrl
}
}
// 三、单点登录系统登录完成之后的处理（最重要）
// 示例参考：http://192.168.1.122:8080/index.html?access_token=091f44ae-5c87-479f-9f90-43d7dccbef36
jump()
function jump() {
var href = window.location.href
console.log(href)
var url = href.split('?')
if (url.length <= 1) {
return
}
var param = url[1].split('=')
if (param[0] == 'access_token') {
// 1.access_token存储到localStorage
localStorage.setItem('access_token', param[1])
// 2.浏览器隐藏access_token
location.href = url[0]
} else {
logout()
}
}
// 四、注销退出
function logout() {
// 获取access_token以备下面调用单点登录系统提供的退出页面进行清除操作
var access_token = localStorage.getItem('access_token')
// 1.无论有无存储access_token，都执行清除操作
localStorage.removeItem('access_token')
// // 方式一：调用单点登录系统提供的注销退出接口(不建议)
// var domainName = 'http://192.168.1.122:7001';// sso启动的ip和port
// $.ajax({
// type : 'get',
// url : domainName + '/co/auth/logout?access_token=' + access_token + '&callBackUrl=' + dsfHome,
// success : function(data) {
// console.log(data);
// location.href = targetUrl;
// }
// });
// 方式二：2.跳转到单点登录系统提供的注销退出页面即可(建议)，此处的flag=4只是为了标记是第三方系统对接退出，可以不拼接这个参数
location.href =
logoutUrl +
'?callBackUrl=' +
dsfHome +
'&access_token=' +
access_token +
'&flag=4'
}
</script>
</body>
</html>
DemoApplication
启动类如下所示：
java
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
启动类启动如下所示：
浏览器输入第三方系统主页 http://192.168.1.122:8080/index.html ，即刻检测 access_token 有无存储，如果没有存储，则直接跳转到单点登录页并带上base64编码的回调地址，如下图所示：
输入用户名和密码登录完成之后，跳转到第三方系统的主页 http://192.168.1.122:8080/index.html ，注意 access_token 已经存储 localStorage ，如下图所示：
点击退出按钮，可以注销退出清除 access_token 。