Cách đăng nhập SSO Keycloak với ReactJs và Typescript

Tram Ho

Single Sign-On (SSO) là một kỹ thuật xác thực người dùng cho phép người dùng đăng nhập vào nhiều
ứng dụng khác nhau mà không cần phải nhập tên đăng nhập và mật khẩu cho mỗi ứng dụng.
SSO giúp người dùng dễ dàng quản lý tài khoản và giảm thiểu số lần người dùng phải nhập thông tin đăng nhập.

Keycloak là một hệ thống quản lý xác thực và quyền truy cập (Identity and Access Management – IAM) miễn phí và mã nguồn mở,
cho phép bạn xây dựng các giải pháp SSO cho các ứng dụng web và mobile. Keycloak cung cấp một giao diện người dùng để quản
lý người dùng, tài khoản và quyền truy cập, và có thể tích hợp với các hệ thống xác thực khác nhau như LDAP, SAML, v.v.
Keycloak cũng hỗ trợ các tính năng bảo mật như bảo mật mật khẩu, xác thực hai yếu tố, v.v.

Để sử dụng SSO (Single Sign-On) Keycloak trong React, bạn có thể thực hiện các bước sau:

  1. Cài đặt thư viện keycloak-js:
  • Trước tiên, bạn cần cài đặt thư viện keycloak-js bằng câu lệnh sau:

  • Sau đó, bạn có thể khởi tạo một đối tượng Keycloak như sau:

Trong đoạn code trên, chúng ta khởi tạo Keycloak với các thông tin:

  • url: Địa chỉ máy chủ Keycloak.
  • realm: Tên realm đã được cấu hình trên máy chủ Keycloak.
  • clientId: Tên client đã được cấu hình trên máy chủ Keycloak.
  1. Tiếp theo, viết một function implement tất cả các phương thức của đối tượng keycloak vừa tạo.

  1. Sử dụng function vừa tạo ở trên trong lớp container của ứng dụng để check đăng nhập:

  1. Sau khi khởi tạo xong, chúng ta tạo 2 class router để điều hướng cho ứng dụng:
  • Class chỉ được truy cập khi đã được đăng nhập:

  • Class được truy cập khi không cần đăng nhập sẽ check ngược lại với class trên:

  1. Kết nối API:
  • Sau khi người dùng đăng nhập thành công, bạn có thể sử dụng token truy cập của người dùng để gọi các API có yêu cầu xác thực. Để lấy token truy cập, bạn có thể sử dụng phương thức keycloak.token. Ví dụ:

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo