最近项目需要导入keyclaok,记录一下使用过程。
什么是KeyCloak?
keycloak是一个开源的进行身份认证和访问控制的软件。是由Red Hat基金会开发的,我们可以使用keycloak方便的向应用程序和安全服务添加身份认证,非常的方便。
基本概念
Realms: 领域,领域管理着一批用户,证书、角色、组,一个用户只能属于并且登录到一个域,域之间是相互独立隔离的,一个域只能管理它下面所属用户 (类似于租户的概念)
Clients: 客户端,需要接入Keyclock并被keyclock 保护的应用和服务
Roles: 角色,用来对用户权限进行管理
User: 用户,使用并需要登录系统的对象
配置keycloak
1. 创建Relams
2.创建客户端
- Access Type 选择
confidential:适用于服务端应用,且需要浏览器登录以及需要通过密钥获取access token的场景。典型的使用场景就是服务端渲染的web系统。
public:适用于客户端应用,且需要浏览器登录的场景。典型的使用场景就是前端web系统,包括采用vue、react实现的前端项目等。
bearer-only:适用于服务端应用,不需要浏览器登录,只允许使用bearer token请求的场景。典型的使用场景就是restful api。- 配置 Vaild Redirect URLS 和 Web Origins ,否则会导致安全漏洞
** Vaild Redirect URLS: 重定向URL必须要与访问地址相同
** Web Origins : 允许跨域访问,则添加*
a. 创建前端client
b.创建后端client
这里需要注意的是要记住图二中的secret,在springboot中需要配置。
3. 创建Roles
4. 创建User
React应用集成Keycloak
1. 引入依赖
npm install keycloak-js
2. 下载配置文件keycloak.json(也可选择手动配置,如下初始化Keycloak Adapter)
如下图,在Installation里选择Json文件下载
3. 基本应用
a.初始化Keycloak Adapter
const keyCloak = new keyCloak() const initKeyCloak = ()=>{
keycloak
.init()
.then((auth) => { --判断是否认证成功
if (auth) {
console.log('success')
} else {
console.log('error');
}
})
.catch((error) => {
console.log('error', error);
})
}
a.1 配置文件
const keyCloak = new keyCloak('/keycloak.json').
a.2 手动配置
const keyCloak = new keyCloak( {
url: "https://XXXXXXXXX/auth/" , -- keyCloak网址
relam: "XXXXXXXXXXXXX", -- 创建的域
clientId: "keycloak-ui" -- 创建clientID
})
a.3 身份验证
默认情况下,需要进行身份验证,因此需要调用登录功能,有2个选项可以使适配器自动进行身份验证。可以通过login-required 和check-sso到init().
其中,login-required: 如果用户登录到keyCloak,将对客户端进行身份验证,如果没有,则显示登录页面。
keycloak.init({ onLoad: 'login-required'
})
其次,check-sso: 只有在用户已经登录的情况下,才会对客户端进行身份验证,如果没有用户登录,浏览器将重定向到应用程序,并保持未经身份验证。如果要使用check-sso方式登录,必须提供一个silentCheckSsoRedirectUri .
keycloak.init({ onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
})
– silent-check-sso.html
<html> <body>
<script>
parent.postMessage(location.href, location.origin)
</script>
</body>
</html>
使用实例
UserService.ts
import Keycloak from 'keycloak-js';
const _kc = new Keycloak('/keycloak.json');
// onAuthenticatedCallback() 放跳转页面
const initKeycloak = (onAuthenticatedCallback: () => void) => {
_kc
.init({
onLoad: 'login-required',
// redirectUri: window.location.origin + '/weclome',
})
.then((auth) => {
if (auth) {
console.log('login success');
onAuthenticatedCallback();
} else {
console.log('login error');
}
});
};
const username = () => _kc.tokenParsed?.given_name; --当前登录人姓名
const empid = () => _kc.tokenParsed?.preferred_username; --当前登录人工号
const tokenParsed = () => _kc.tokenParsed; ---获取登录人基本信息
const hasRealmRole = _kc.hasRealmRole; --- 角色
const logout = _kc.logout; --- 登出
const isLoggedIn = () => !!_kc.token; --- token
const UserService = {
initKeycloak,
logout,
hasRealmRole,
tokenParsed,
username,
empid,
isLoggedIn,
};
export default UserService;
index.ts
UserService.initKeycloak(() => {
render(<Welcome />, document.getElementById('root'));
});
权限卡控
UserService.hasRealmRole('reamlRole') 权限卡控 只有是reamlRole角色下面的人 才可以操作
Springboot 应用集成keycloak简明指南
1. 引入依赖
<dependency>
<groupId>org.keycloak</groupId>
<artifactId>keycloak-spring-boot-starter</artifactId>
<version>10.0.0</version>
</dependency>
2. 配置文件
keycloak:
realm: XXXXXXXXXX --realm 名称
auth-server-url: http://keycloak.com/auth --keycloak地址
resource: spring-boot-demo --客户端名称
ssl-required: external
credentials:
secret: XXXXXXXXXXXXXX --客户端密码
# bearer-only: true
use-resource-role-mappings: false
cors: true --设置为true表示允许跨域访问
security-constraints:
- authRoles:
- offline_access --设定角色
securityCollections:
- name: customer --name可以随意设定
patterns:
- /* --角色可访问的路径(不在该角色下的用户,不可访问)
- authRoles:
- Admin
securityCollections:
- name: admin
patterns:
- /admin
使用过程中遇到的问题,还未解决,有小伙伴知道咋解决的话,可以帮忙指点一下,感谢~~
1 . react中初始化keycloak ,init()后不继续执行.then() ,只有我再次运行后,才可以打印出login success
const initKeycloak = (onAuthenticatedCallback: () => void) => {
_kc
.init({
onLoad: 'login-required',
// redirectUri: window.location.origin + '/weclome',
})
.then((auth) => {
if (auth) {
console.log('login success');
onAuthenticatedCallback();
} else {
console.log('login error');
}
});
};