2016-12-24 9 views
1

私はAngular 2プロジェクトでKeycloak認証サービスを実装しています。 私はログイン、ログアウトなどのためにサービスを利用しています。Keycloak Angular 2 - 認証された状態を確認Keycloakオブジェクト

ユーザーの認証とログアウトはうまくいくようです。私は今、いくつかのルートを保護しようとしています。私は今、正常なAuthGuardを持っています。 ユーザーがAuthGuardにログインしているかどうかを確認するには、サービスにisAuthenticated()メソッドがあります。 これはサービスである:

import { Injectable } from '@angular/core'; 

declare let Keycloak: any; 

@Injectable() 
export class KeycloakService { 
    private keycloak = new Keycloak('app/keycloak/keycloak.json'); 

    constructor() { 
    this.keycloak.init({onload: 'check-sso'}); 
    console.log(this.keycloak); 
    } 

    public login() { 
    this.keycloak.login(); 
    } 

    public logout() { 
    this.keycloak.logout(); 
    } 

    public isAuthenticated() { 
    return this.keycloak.authenticated; 
    } 
} 

フロー:ユーザーがログインするユーザーがにisAuthenticated()経由でログインした場合、ユーザーは、保護されたルートに到達するためにAuthGuardチェックをしようとします。

注:完全な角度アプリのユーザーを認証したくありません。一部のルートのみ。

問題

ユーザーがログインした後、ユーザーが角度のアプリにリダイレクトされます。その後、isAuthenticated()メソッドはまだfalseを返します。理由は次のとおりです。

コンソールにKeycloakオブジェクトを記録しました。私は理解できなかったことを見つけました。ログイン後

Keycloak object after login redirect

Keycloakオブジェクトと同じKeycloakログインリダイレクト後のオブジェクト(ただし拡大)


をリダイレクト

まず、認証プロパティがfalseです。展開後、認証されたプロパティはtrueです。

質問

は、私は私のKeycloakが正しい道をオブジェクト維持しようとする方法ですか?

相談しソース

など

答えて

2
あなたはkeycloak JSとの相互作用にいくつかの相違点を見つけることができ keycloak's githubにAngular2例を提供し、コミュニティに

ベイシングアダプタ。 主に、認証された(そして場合によってはuserName)の実際のチェックは、initから返された約束に対して行われます。

static init(): Promise<any> { 
    let keycloakAuth: any = new Keycloak('keycloak.json'); 
    KeycloakService.auth.loggedIn = false; 

     return new Promise((resolve, reject) => { 
     keycloakAuth.init({ onLoad: 'login-required' }) 
      .success(() => { 
      KeycloakService.auth.loggedIn = true; 
      KeycloakService.auth.authz = keycloakAuth; 
      KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/protocol/openid-connect/logout?redirect_uri=/angular2-product/index.html"; 
      resolve(); 
      }) 
      .error(() => { 
      reject(); 
      }); 
     }); 
} 

また公式keycloak js adapter's documentationは、認証チェックの答えのための

<head> 
    <script src="keycloak.js"></script> 
    <script> 
     var keycloak = Keycloak(); 
     keycloak.init().success(function(authenticated) { 
      alert(authenticated ? 'authenticated' : 'not authenticated'); 
     }).error(function() { 
      alert('failed to initialize'); 
     }); 
    </script> 
</head> 
+0

感謝のための約束を使用しています。今の最大の課題は、ページリフレッシュが発生し、新しいKeycloakオブジェクトが作成され、ステータスが失われる場合です。 – xDs

+0

こんにちは、元の質問に答えたことを正しく理解していますか?そうであれば、回答を受け入れてください。 あなたの次のチャレンジとして、私は新しい質問を提案します。 – hakamairi

+0

Keycloakを統合し、より完全な機能セットを提供するAngular 2ライブラリがある場合は、https://github.com/atende/angular-spaのコードを確認することもできます。免責事項:私は著者です、あなたは私にフィードバックを送ることができます;-) –

関連する問題