Пытаюсь обезопасить страницу реакции переднего конца с сервером keycloak, но у меня появляется эта ошибка 'keycloak.init (...). Тогда это не функция'

Question

Я пытаюсь защитить реагирующий компонент с помощью keycloak, и пока что все сделал, как он сказал:

-Я установил пакеты KEycloak через NPM -Я поставил Keycloak.json в публичной папке -Я изменил свой компонент, чтобы он монтировался при перенаправлении страницы, но в конце я получаю эту ошибку: keycloak.init (...). Тогда это не функция

Я пыталсядля замены логина требуется check-sso

, вот мой код, введенный в мой компонент:

import Keycloak from 'keycloak-js';

componentDidMount() {
        const keycloak = Keycloak('./public/keycloak.json');
        keycloak.init({onLoad: 'login-required'}).then(authenticated => {
          this.setState({ keycloak: keycloak, authenticated: authenticated })
        })
    }

render(){
 if (this.state.keycloak) {
        if (this.state.authenticated)
        return(

 <div className="container text-dark"> 

````

) ;
 else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Initializing Keycloak...</div>
);

    }

}

Снимок ошибки

Answer 1

Вместо:

const keycloak = Keycloak('./public/keycloak.json');

Попробуйте это:

const keycloak = Keycloak('/keycloak.json');

и установите promiseType на native в следующих параметрах инициализации (в вашем случае):

keycloak.init({onLoad: 'login-required', promiseType: 'native'}).then(authenticated => { this.setState({ keycloak: keycloak, authenticated: authenticated }) })

Answer 2

Пожалуйста, убедитесь, что keycloak.json содержит следующие значения: -

{
    "realm": "...",
    "auth-server-url": "http://...",
    "ssl-required": "none",
    "resource": "...",
    "public-client": true,
    "confidential-port": 0
}