Giter Club home page Giter Club logo

zineddinebk09 / keycloak-automatic-deployment-and-users-management-app Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 2.26 MB

NextJS 14 App for Efficient Keycloak Users Managemen & Openstack Deploymentt: Seamlessly handle mass user insertion, management, and more within your Keycloak environment. Simplify user administration.

Dockerfile 0.47% TypeScript 98.74% CSS 0.59% JavaScript 0.12% Shell 0.08%
crud-api keycloak keycloak-rest-api nextjs14 shadcn-ui tailwindcss openstack

keycloak-automatic-deployment-and-users-management-app's Introduction

Keycloak Management App

Introduction

Struggling with managing users in your Keycloak instance or deploying Keycloak on your OpenStack cloud environment? You're not alone. Many organizations face challenges in efficiently handling these tasks, especially when dealing with large numbers of users.

This Keycloak Management App is designed to streamline these processes, saving you time and effort. It provides a user-friendly web interface for two key functionalities:

  • Mass User Insertion: Effortlessly add multiple users to your Keycloak instance at once. Simply upload a CSV file containing user information, and the app takes care of the rest.
  • Seamless Keycloak Deployment on OpenStack: Deploy Keycloak on your OpenStack cloud environment with ease. The app guides you through configuring a Heat stack template to automate the deployment process.

Target Audience

This app is ideal for organizations that use Keycloak for user management and authentication. It's particularly useful for administrators who need to manage large numbers of users or deploy Keycloak on OpenStack.

Technologies

The Keycloak Management App is built using the following technologies:

  • Next.js: A React framework for building web applications.
  • TypeScript: A statically typed superset of JavaScript.
  • Tailwind CSS: A utility-first CSS framework for quickly styling web applications.
  • Keycloak Admin REST API: An API for managing Keycloak users and clients.
  • Openstack Compute API: An API for managing OpenStack cloud resources.
  • Openstack Networking API: An API for managing OpenStack networking resources.
  • OpenStack Heat: An orchestration service for managing cloud resources.
  • Docker: A platform for developing, shipping, and running applications in containers.
Next.js React Tailwind CSS TypeScript Docker

Key Features:

Mass User Insertion

The app allows you to upload a CSV file containing user information and add multiple users to your Keycloak instance at once. This feature is particularly useful for organizations that need to onboard large numbers of users quickly.

Upload CSV Page

Seamless Keycloak Deployment on OpenStack

Deploying Keycloak on OpenStack can be a complex process, involving multiple steps and configurations. The app simplifies this process by guiding you through configuring a Heat stack template to automate the deployment. This feature is ideal for organizations that want to deploy Keycloak on their OpenStack cloud environment.

OpenStack API Access Page

Gettings Started

To get started with the Keycloak Management App, follow these steps:

Normal Installation

  1. Clone the repository:

git clone https://github.com/ZineddineBk09/Keycloak-Users-Management-App.git
  1. Install the dependencies:

cd Keycloak-Users-Management-App
npm install
  1. Run Prisma Migrations

npx prisma migrate dev
  1. Run the app:

npm run dev

Docker Installation

  1. Clone the repository:

git clone https://github.com/ZineddineBk09/Keycloak-Users-Management-App.git
  1. Run postgres db:

sudo docker run -d --name postgres-db --network pfe -e POSTGRES_USER=cerist -e POSTGRES_PASSWORD=cerist -e POSTGRES_DB=PFE -p 5432:5432 postgres:13
  1. Build Docker Container

sudo docker build -t "keycloak-users-management-and-auto-deploy-app" .
  1. Run the container:

sudo docker run -p 3000:3000 -d keycloak-users-management-and-auto-deploy-app
  1. Open your browser and navigate to http://localhost:3000 to access the app.

    Keycloak Management App
  2. Seamless Keycloak Deployment on OpenStack:

    1. Configure OpenStack API access: Go to the /start-deploy page to check for the steps needed to configure the deployment.

      Start Deployment Page
    2. Register the OpenStack API access in the app: Go to the /deploy page and enter the OpenStack API access information (OpenStack Username, OpenStack Password, OpenStack Project Name, OpenStack Domain, OpenStack Identity API Base URL).

      OpenStack API Access Page
    3. Configure the Keycloak server deployment: on the 2nd step in the /deploy page enter the Keycloak server deployment information (Keycloak Server Name, Keycloak Server Flavor, Keycloak Server Network Name, Keycloak Running Port, Keycloak Server Key Pair Name).

      Openstack Keycloak Instance Page
    4. Configure the Keycloak deployment: on the 3rd step in the /deploy page enter the Keycloak deployment information (Keycloak Realm, Keycloak Admin Username, Keycloak Admin Password).

      Configure Deployment Page
    5. Review the deployment: Finally, review the deployment information and click on the "Deploy" button to start the deployment process.

      Review Deployment Page
    6. Once the deployment starts, you can monitor the progress, and once it's completed, you can view the Keycloak server URL.

      Deployment Loading PageDeployment Successful Page
  3. Mass User Insertion:

    1. Configure Keycloak client to allow the app to access the Keycloak Admin REST API.

      1. First, you need to create a client in Keycloak. To do this, click on the "Clients" tab in the app and then click on the "Create Client" button. Enter the client information and click "Save."
      Clients Page Create Client Page Client Details Page
      1. Next, you need to configure the client with the appropriate roles and permissions. To do this, click on the "Services accounts roles" tab in the app and then click on the "Assign role" button. Change the filter to "Filter by clients" and select the roles (manage-users, view-users, query-users, manage-clients, view-clients, query-clients) you want to assign to the client.
      Keycloak Client Service Account Roles Keycloak Client Service Account Roles
    2. Register the client in the app: Go to the /register page and enter the client information (Client ID, Client Secret, Realm, Authentication Protocol, Keycloak Admin Username, Keycloak Server URL).

      Register Page
    3. Upload the CSV file: Go to the /upload page and upload a CSV file containing user information.

      Upload CSV Page

Tip

You can use the file MOCK_DATA.csv provided in the repository as an example.

  1. The users /users, and clients /clients page both contains the list of users and clients respectively.
Users PageClients Page
  1. The /settings page allows you to change the settings entered in the registration page.

    Settings Page

Conclusion

The Keycloak Management App is a powerful tool for simplifying user management and Keycloak deployment on OpenStack. By providing a user-friendly interface and automating complex processes, the app saves time and effort for administrators. Whether you need to onboard multiple users quickly or deploy Keycloak on your OpenStack cloud environment, this app has you covered.

Acknowledgements

This project was developed as part of my final year project at the University of Science and Technology Houari Boumediene (USTHB). I would like to thank my supervisor, Dr. BOUABID Mohamed Amine , for his guidance and support throughout the project. and my collegue @Nouri-redouane for his hard work and dedication to the project.

keycloak-automatic-deployment-and-users-management-app's People

Contributors

zineddinebk09 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.