Как реализовать аутентификацию React SPA с Keycloak и потоком PKCE?
Я впервые работаю с Keycloak. Я подготовил экземпляр Keycloak на своем локальном компьютере, в котором я могу создавать области, клиентов и т. д.
Я нашел примеры использования React + Keycloak, но ни один из них не использовал поток PKCE.
Я не знаю, как настроить Keycloak и React. Я знаю только, что клиентское приложение должно уметь генерировать верификатор кода и вызов кода.
Я ищу простой пример реализации авторизации с использованием реакции и Keycloak, который должен следовать гранту кода авторизации OAuth 2.0 с PKCE Flow, или советы о том, что делать на стороне React и что на стороне Keycloak для реализации OAuth 2.0.
Что я хочу сделать:
- Настройка экземпляра Keycloack (готово)
- Регистрация публичного клиента в Keycloack (готово)
- Реализация простого сценария входа в сеть (сценарий соответствует предоставлению кода авторизации OAuth 2.0 с потоком PKCE)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
(Старый интерфейс Keycloak)
Перейдите в свой мир, а затем в клиент и выберите своего клиента:
- Установите
Access Typeнаpublic - Включено
Standard Flow Enabled - Добавьте соответствующие
Valid redirect URIsиWeb origins - Перейдите к
Advanced Settingsи в полеProof Key for Code Exchange Code Challenge MethodвыберитеS256, а затем нажмите наSave.
(Новый интерфейс Keycloak)
Выберите свое Царство, а затем перейдите к клиенту и щелкните в своем клиенте:
- Установите
Client authenticationнаOFF - В
Authentication FlowвыберитеStandard flow - Добавьте соответствующие
Valid redirect URIsиWeb origins - Нажмите на кнопку
Save - Перейти на вкладку
Advanced - Перейти в раздел
Advanced Settingsи в полеProof Key for Code Exchange Code Challenge Methodи выберитеS256, а затем нажмите наSave.
В адаптере вашего приложения React добавьте «enable-pkce»: true.
Из документации keycloak:
Адаптер KeycloakInstalled поддерживает механизм PKCE [RFC 7636]. для обеспечения дополнительной защиты во время обмена кодом на токен в OIDC-протокол. PKCE можно включить с помощью «enable-pkce»: true настройка в конфигурации адаптера. Включение PKCE очень рекомендуется, чтобы избежать атак с внедрением кода и повторным воспроизведением кода.
Да, ваш ответ был очень полезным, это то, что мне было нужно.