web-dev-qa-db-ja.com

現在ログインしているユーザーを取得するKeycloak JavaScript API

Keycloakを使用して、Javaで記述されたWebアプリやJavaScriptで記述されたWebアプリ（Reactを使用）を保護する予定です。

ユーザーがキークロークによってログインした後、それらの各Webアプリは、ログインしているユーザーと、ユーザーが持つレルム/クライアントの役割を取得する必要があります。

  • Javaアプリの場合、キークロークを試してみましたJava API (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims)。彼らはうまく働くようです

  • JavaScriptアプリの場合、次のコードを試しましたが、Keycloakを正常に初期化できませんでした（これは、ユーザーがkeycloakによって既に認証された後のWebアプリのコードにあることに注意してください。アプリは、どのロールでログインしたユーザーを取得しようとしているだけです）。

    var kc = Keycloak({
    url: 'https://135.112.123.194:8666/auth',
    realm: 'oneRealm',
    clientId: 'main'
}); 

//this does not work as it can't find the keycloak.json file under WEB-INF
//var kc = Keycloak('./keycloak.json'); 

kc.init().success(function () {
    console.log("kc.idToken.preferred_username: " + kc.idToken.preferred_username);
    alert(JSON.stringify(kc.tokenParsed)); 
    var authenticatedUser = kc.idTokenParsed.name; 
    console.log(authenticatedUser);  
}).error(function () {
    window.location.reload();
});

Webアプリが現在のユーザー情報を取得する必要があることはかなり一般的だと思います。上記のコードが機能しない理由を誰かが知っていますか？

ありがとう。

javascriptauthorizationkeycloak
7
Alex
    <script src="http://localhost:8080/auth/js/keycloak.js" type="text/javascript"></script>
<script type="text/javascript">
const keycloak = Keycloak({
    "realm": "yourRealm",
    "auth-server-url": "http://localhost:8080/auth",
    "ssl-required": "external",
    "resource": "yourRealm/keep it default",
    "public-client": true,
    "confidential-port": 0,
    "url": 'http://localhost:8080/auth',
    "clientId": 'yourClientId',
    "enable-cors": true
});
const loadData = () => {
    console.log(keycloak.subject);
    if (keycloak.idToken) {
        document.location.href = "?user="+keycloak.idTokenParsed.preferred_username;
        console.log('IDToken');
        console.log(keycloak.idTokenParsed.preferred_username);
        console.log(keycloak.idTokenParsed.email);
        console.log(keycloak.idTokenParsed.name);
        console.log(keycloak.idTokenParsed.given_name);
        console.log(keycloak.idTokenParsed.family_name);
    } else {
        keycloak.loadUserProfile(function() {
            console.log('Account Service');
            console.log(keycloak.profile.username);
            console.log(keycloak.profile.email);
            console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
            console.log(keycloak.profile.firstName);
            console.log(keycloak.profile.lastName);
        }, function() {
            console.log('Failed to retrieve user details. Please enable claims or account role');
        });
    }
};
const loadFailure =  () => {
     console.log('Failed to load data.  Check console log');
};
const reloadData = () => {
    keycloak.updateToken(10)
            .success(loadData)
            .error(() => {
                console.log('Failed to load data.  User is logged out.');
            });
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>

単純なJavaScriptクライアント認証フレームワークなし。まだ探している人のために...

6
Keshav Sharma

コードはKeycloakクライアントライブラリに初期化を要求しますが、ユーザーのログインやユーザーがすでにログインしているかどうかの確認は行いません。

詳細はマニュアルをご覧ください： http://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter

あなたがおそらくやりたいこと：

  • Initにcheck-ssoを追加して、ユーザーがログインしているかどうかを確認し、資格情報keycloak.init({ onLoad: 'check-sso' ... })を取得します。 login-requiredを使用することもできます。

  • フロントエンド用に別のクライアントを登録してください。 Javaバックエンドクライアントのタイプは機密（またはベアラのみ）ですが、JavaScriptクライアントのタイプはpublicです。

あなたは非常に最小限の例をここに見つけます： https://github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app。 js

または、ユーザー情報が取得されたときに通知されるonAuthSuccessのコールバックを登録できます。

フロントエンドでKeycloakを使用すると、バックエンドでRESTリソースを呼び出すときに、ベアラートークンを確認する必要があります。

4
ahus1

あなたはこの時までに問題を解決したかもしれません。この答えが問題の残りの人々の助けになることを願っています。

使用する場合JavaScript Adopter以下のJavaScriptをHTMLページに追加する必要があります。

    <script src="http://localhost:8080/auth/js/keycloak.js"></script>
            <script>
            /* If the keycloak.json file is in a different location you can specify it: 

Try adding file to application first, if you fail try the another method mentioned below. Both works perfectly.

            var keycloak = Keycloak('http://localhost:8080/myapp/keycloak.json'); */    

/* Else you can declare constructor manually  */
                var keycloak = Keycloak({
                    url: 'http://localhost:8080/auth',
                    realm: 'Internal_Projects',
                    clientId: 'payments'
                });


                keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
                    alert(authenticated ? 'authenticated' : 'not authenticated');
                }).catch(function() {
                    alert('failed to initialize');
                });    

                function logout() {
                    //
                    keycloak.logout('http://auth-server/auth/realms/Internal_Projects/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri')
                    //alert("Logged Out");
                }
             </script>

https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter 参照リンク。

注：json認証情報を追加する2つの方法のコメントをお読みください。

0
Deepa MG