Як налаштувати автентифікацію за допомогою Keycloak у React додатку

Keycloak - чудовий вибір для автентифікації в React додатках!

• Єдина автентифікація (SSO)
• Підтримка OAuth2, OpenID Connect (OIDC)
• Рольова система доступу
• Легка інтеграція з додатками

Налаштування сервера Keycloak

• Завантажте та встановіть Keycloak:
• Відкрийте термінал та перейдіть до директорії встановлення Keycloak. Запустіть сервер Keycloak: ./bin/kc.sh start-dev , Для користувачів Windows: .\bin\kc.bat start-dev
• Відкрийте http://localhost:8080, оберіть ім'я адміністратора та встановіть пароль.
• Створіть нову область (Realm):

• Створіть новий клієнт і додайте допустимі URL для редіректу (Для React додатка на етапі розробки, http://localhost:3000, та порт бекенду, якщо необхідно):

• Додайте нову роль для користувачів:

• У розділі користувачів оберіть потрібного користувача, Users > User details > Role mapping > Призначити роль_.

Роль адміністратора призначена користувачу Test

Налаштування адаптера Keycloak для React

• Створіть та налаштуйте React додаток
• Для інтеграції Keycloak у ваш React додаток, необхідно встановити JavaScript адаптер Keycloak, ми використаємо keycloak-js: npm install keycloak-js
• Ініціалізуйте Keycloak та створіть кастомний хук для управління автентифікацією

кастомний хук useKeycloak

Тепер, ми можемо легко використовувати наш кастомний хук для захисту маршрутів та безпечної роботи з даними по всьому React додатку:

Після входу:

Це навантаження запиту токена з використанням OAuth 2.0 Authorization Code Flow з PKCE. Він обмінює код авторизації на токен доступу, використовуючи clientid_, redirecturi_, та codeverifier_ для безпечної комунікації між React додатком та Keycloak.

Коли використовувати Keycloak:

• Коли вам потрібне комплексне рішення для IAM, що включає в себе функції безпеки, ролі, SSO та управління користувачами.
• Коли ви розробляєте більші додатки або мікросервіси, що вимагають централізованої автентифікації та авторизації.
• Коли потрібно забезпечити підтримку взаємодії з сторонніми постачальниками ідентичності та стандартними протоколами індустрії.

Підсумовуючи, звичайний захист JWT підходить для менших проектів, де ви хочете зберегти повний контроль і простоту, тоді як захист за допомогою Keycloak надає більш надійне, масштабоване і безпечне рішення для управління автентифікацією та авторизацією користувачів у більших або складніших додатках.

Перекладено з: How to Set Up Keycloak Authentication in a React App