一、Keycloak的安装与配置
1.按需下载keycloak包
官网下载
下载完成之后，解压包之后，终端进入其中的bin文件夹，并执行下列命令：
linux下执行：
./standalone.sh
windows下执行：
./standalone.bat
执行命令成功后，可以访问localhost:8080会有以下界面：
2.初始化admin账号
在localhost:8080的页面中创建一个账号，笔者这里设置账号和密码分别为admin/admin，点击“create”按钮之后就会进入下面的页面：
点击上图的
Administration Console 按钮，将会弹出登录页面：
输入账号和密码之后进入管理页面：
3.按需设置语言
二、keycloak配置
1.添加一个域（Realm）
域和域之间的资源（包括用户、角色、客户端等一切信息）是相互隔离的。为了安全性不太建议与管理员共用Realm。笔者这里新增的realm名称为realm_demo。
2.创建并设置客户端（client）——以前端客户端为例
按下面的图创建一个client，其中client ID为client_of_realm_demo,配置项为：
访问类型（Access Type）：public（默认），对于web前端应用，Access Type必须是public有效的重定向URI（Valid Redirect URLS）：笔者这里配置为http://localhost:3000/*，认证成功后跳转到的页面地址根 URL（Base URL）： 一般配置成微服务首页即可Web Origins：虽然不是必须的，但是一般都需要设置，以避免因跨域而无法访问的问题。
Keycloak目前的访问类型共有3种：
confidential：适用于服务端应用，且需要浏览器登录以及需要通过密钥获取access token的场景。典型的使用场景就是服务端渲染的web系统。
public：适用于客户端应用，且需要浏览器登录的场景。典型的使用场景就是前端web系统，包括采用vue、react实现的前端项目等。
bearer-only：适用于服务端应用，不需要浏览器登录，只允许使用bearer token请求的场景。典型的使用场景就是restful api。
3.创建角色
创建两个角色：admin_role与sub_admin_role
4.创建用户并分配角色、设置密码
创建两个用户：admin_user与sub_admin_user，分别赋予角色admin_role与sub_admin_role：
二、React应用集成Keycloak
1.在React项中引入官方Keycloak js
yarn add keycloak-js
2.导入keycloakd的client配置
将下载下来的
keycloak.json文件放入react项目中的public文件夹下。
3.初始化
新建keycloak.js文件
import Keycloak from "keycloak-js";
class KeycloakClient {
constructor() {
this.initialized = false;
this.keycloak = new Keycloak("/keycloak.json");
}
init = (callback) => {
this.keycloak
.init({ onLoad: "login-required" })
.success((authenticated) => {
if (authenticated) {
this.initialized = true;
callback(this.keycloak);
}
});
};
}
const keycloakClient = new KeycloakClient();
export default keycloakClient;
修改index.tsx文件
// 初始化keycloak之后才渲染页面
import keycloakClient from './keycloak'
if (!keycloakClient.initialized) {
keycloakClient.init((keycloak: any) => {
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
})
}
// ReactDOM.render(
// <React.StrictMode>
// <App/>
// </React.StrictMode>,
// document.getElementById('root')
// );
此时，进入前端地址localhost:3000就会重定向到keycloak的登录页面，其中，这个登录页面是可以自定义的，如何操作可以下面的参考文章，亲测有效。
参考文章：
Keycloak快速上手指南，只需10分钟即可接入Spring Boot/Vue前后端分离应用实现S
Keycloak - Extend theme in 10 mins
Keycloakify: Create Keycloak themes using React - npm
Authenticating and Authorizing Users via Keycloak
