OpenIdDict AngularおよびIonicクライアントの暗黙的なフロー

Question

私たちはOpenIdDictをパスワードフローとともに使用してきました。

しかし、暗黙のフロー（openiddict認証サーバーのポップアップウィンドウ）に切り替える必要があります。 私は、ASP.NETアプリケーションのサンプルを見つけることができますが、我々は、これを使用する： 1 /角度1.0ウェブサイト 2 /イオン2.0アプリ

を誰かがしてこれにどのようにいくつかのヒントを与えることはできますか？ （Aureliaの例は近づいていますが、私たちはそれをIonicまたはAngularで動作させることはできません）。 どのライブラリを使用できますか、どのような呼び出しを行う必要がありますか？

どうもありがとう、

Frank 

Answer 1

私はtypescriptですとangular2アプリケーションからOpenIddictとの暗黙の流れを使用するが、私は強くあなたがoidc-clientを使用することをお勧めします。とにかく、すべてのSPAの同じ方法論が適用されます。

あなたは、私がangular2とoidc - クライアント間の互換性の問題はそう約束していた

@Injectable() 
export class OAuthService { 
    private client: UserManager; 
    private user: Promise<User | null>; 

    constructor(private ngZone: NgZone, @Inject(OAUTH_CONFIG_TOKEN) options: IOAuthConfig) { 
     Log.logger = console; 

     Log.level = Log.INFO; 
     this.client = new UserManager(<UserManagerSettings>{ 
      authority: options.authority, // the url of your openiddict service 
      client_id: options.client_id, // your openiddict application id 
      redirect_uri: options.redirect_uri, // the url of your app after login 
      post_logout_redirect_uri: options.post_logout_redirect_uri, // the url of your app after logout 
      scope: options.scope, // your openid scopes like 'openid email profile roles' 
      response_type: 'id_token token', //id + access token 
      filterProtocolClaims: true, 
      loadUserInfo: true, 
     }); 
     this.client.events.addUserLoaded(user => { 
      this.user = Promise.resolve(user); 
      Log.logger.info('OAuthService: User loaded'); 
     }); 
     this.client.events.addUserSignedOut(() => Log.logger.info('OAuthService: User signed out')); 
     this.client.events.addUserUnloaded(() => Log.logger.info('OAuthService: User unloaded')); 
     this.client.events.addSilentRenewError(err => Log.logger.error(err)); 
     this.user = this.ngZone.runOutsideAngular(() => { 
      return this.client.getUser().then((user) => { 
       if (user == null) { 
        return null; 
       } 
       return user; 
      }); 
     }); 
    } 

    public get events(): UserManagerEvents { 
     return this.client.events; 
    } 


    public signin(): Promise<any> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.client.signinRedirect() 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public signinCallback(): Promise<User|null> { 
     this.user = this.ngZone.runOutsideAngular(() => { 
      return this.client.signinRedirectCallback() 
       .then(user => { 
        if (user == null) { 
         return null; 
        } 
        return user; 
       }) 
       .catch(err => Log.logger.error(err)); 
     }); 
     return this.user; 
    } 

    public signout(): Promise<any> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.client.signoutRedirect() 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public signoutCallback(): Promise<any> { 
     return this.client.signoutRedirectCallback() 
      .catch(err => Log.logger.error(err)); 
    } 

    public authorizationHeader(): Promise<string> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user 
       .then(user => user == null ? '' : user.token_type + ' ' + user.access_token); 
     }); 
    } 

    public getUser(): Promise<User|null> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public isLoggedIn(debugToken = ''): Promise<boolean> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user.then(user => { 
       if (user != null) { 
        return !user.expired; 
       } 
       return false; 
      }); 
     }); 
    } 

} 

SIGNIN、signInCallbackのようないくつかのメソッドの速記とUserManagerとを含む、このライブラリをラップ角度サービスを...作ることができます私はNgZoneを使用しなければなりませんでした。

を注入このサービスはどこでもあなたはそれを（Userのprofile分野がそうでrole、unique_nameなど、あなたの主張が含まれています）が必要です。

LoginComponentとLogoutComponentのような2つのコンポーネントを作成して、単にsigninCallbackとsignoutCallbackを呼び出し、あなたのホームページのようなアプリケーションのどこかにリダイレクトします。

@Component({ 
    selector: 'app-logout', 
    templateUrl: './logout.template.html' 
}) 
export class LogoutComponent implements OnInit { 
    constructor(private router: Router, private oauthService: OAuthService) { } 

    ngOnInit() { 
     this.oauthService.signoutCallback().then(() => this.router.navigate([''])); 
    } 
} 

これらの2つのコンポーネントルートは、OAuthServiceコンストラクタの指定されたUserManager設定と一致する必要があります。例えば

{ 
    path: 'login', 
    component: LoginComponent 
}, 
{ 
    path: 'logout', 
    component: LogoutComponent 
}, 

redirect_uriがhttp://localhost:5000/loginとpost_logout_redirect_uriある場合は、あなたはおそらく、ユーザーがちょうどログインしたときに、いくつかのプロパティをリフレッシュするために、いくつかのイベントをサブスクライブする必要がありますhttp://localhost:5000/login

です。

public ngOnInit(): void { 
    this.onUserChange(); 
    this.oauthService.events.addUserLoaded(() => this.onUserChange()); 
    this.oauthService.events.addUserUnloaded(() => this.onUserChange()); 
} 

private onUserChange(): void { 
    this.oauthService.isLoggedIn().then(x => this.isLoggedIn = x); 
} 

これ以降、OpenIddictではサイレントログインがまだサポートされていませんが、まだ解決策が見つかりませんでした。

ここでも、これはすべての活字体/ Angular2ですが、それは