keyclock使用

一、Keycloak的安装与配置

1.按需下载keycloak包

官网下载

linux下执行：

./standalone.sh
复制代码

windows下执行：

./standalone.bat
复制代码

执行命令成功后，可以访问localhost:8080会有以下界面：

2.初始化admin账号

在localhost:8080的页面中创建一个账号，笔者这里设置账号和密码分别为admin/admin，点击“create”按钮之后就会进入下面的页面：

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配置

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与React集成应用（上篇）：用户登录

keycloak 自定义登录页面

Keycloak - Extend theme in 10 mins

Keycloakify: Create Keycloak themes using React - npm

Tyk开发者门户-使用 Keycloak 的分步指南

Authenticating and Authorizing Users via Keycloak

Customizing the Login Page for Keycloak

[github.com/FX-HAO/keyc…]