johnny 5 johnny 5 - 6 months ago 491
TypeScript Question

Configure Identity Server 4 With Ionic 2

I'm trying to configure Identity Server to work with Ionic 2. I'm a bit confused on how to configure the Redirect urls. For when I'm testing in the browser.

I'm in the process of updating and integrating an OIDC Cordova component.
The old component git hub is here:
https://github.com/markphillips100/oidc-cordova-demo

I've created a typescript provider and registered it with my app.module.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Component } from '@angular/core';
import * as Oidc from "oidc-client";
import { Events } from 'ionic-angular';
import { environment } from "../rules/environments/environment";

export class UserInfo {
user: Oidc.User = null;
isAuthenticated: boolean = false;
}

@Injectable()
export class OidcClientProvider {

USERINFO_CHANGED_EVENT_NAME: string = ""
userManager: Oidc.UserManager;
settings: Oidc.UserManagerSettings;
userInfo: UserInfo = new UserInfo();
constructor(public events:Events) {

this.settings = {
//authority: "https://localhost:6666",
authority: environment.identityServerUrl,
client_id: environment.clientAuthorityId,
//This doesn't work
post_logout_redirect_uri: "http://localhost/oidc",
redirect_uri: "http://localhost/oidc",
response_type: "id_token token",
scope: "openid profile",

automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true,
//popupNavigator: new Oidc.CordovaPopupNavigator(),
//iframeNavigator: new Oidc.CordovaIFrameNavigator(),
}

this.initialize();
}

userInfoChanged(callback: Function) {
this.events.subscribe(this.USERINFO_CHANGED_EVENT_NAME, callback);
}

signinPopup(args?): Promise<Oidc.User> {
return this.userManager.signinPopup(args);
}

signoutPopup(args?) {
return this.userManager.signoutPopup(args);
}

protected initialize() {

if (this.settings == null) {
throw Error('OidcClientProvider required UserMangerSettings for initialization')
}

this.userManager = new Oidc.UserManager(this.settings);
this.registerEvents();
}

protected notifyUserInfoChangedEvent() {
this.events.publish(this.USERINFO_CHANGED_EVENT_NAME);
}

protected clearUser() {
this.userInfo.user = null;
this.userInfo.isAuthenticated = false;
this.notifyUserInfoChangedEvent();
}

protected addUser(user: Oidc.User) {
this.userInfo.user = user;
this.userInfo.isAuthenticated = true;
this.notifyUserInfoChangedEvent();
}

protected registerEvents() {
this.userManager.events.addUserLoaded(u => {
this.addUser(u);
});

this.userManager.events.addUserUnloaded(() => {
this.clearUser();
});

this.userManager.events.addAccessTokenExpired(() => {
this.clearUser();
});

this.userManager.events.addSilentRenewError(() => {
this.clearUser();
});
}
}


I'm trying to understand how I would configure the redirect urls so I can authenticate normally in the browser. Normally you would configure a redirect
url to take your process the token and claims after login.

this.settings = {
authority: environment.identityServerUrl,
client_id: environment.clientAuthorityId,
post_logout_redirect_uri: "http://localhost:8100/oidc",
redirect_uri: "http://localhost:8100/oidc",
response_type: "id_token token",
scope: "openid profile AstootApi",

automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true,
//popupNavigator: new Oidc.CordovaPopupNavigator(),
//iframeNavigator: new Oidc.CordovaIFrameNavigator(),
}


Ionic 2 doesn't use urls for routing, Supposing I have a component
AuthenticationPage
which handles storing the authentication token.
How can I configured a redirect url so it navigates to the authentication page, so I can test this in the browser?

Answer Source

I had to do a few things to get this working.
I didn't realize at first but My Redirect Urls had to be matching for what my client has stored in identity server.

new Client
{
    ClientId = "myApp",
    ClientName = "app client",
    AccessTokenType = AccessTokenType.Jwt,
    RedirectUris = { "http://localhost:8166/" },
    PostLogoutRedirectUris = { "http://localhost:8166/" },
    AllowedCorsOrigins = { "http://localhost:8166" },
    //...
}

So the OIDC client in Typescript needed to be updated too.

this.settings = {
    authority: environment.identityServerUrl,
    client_id: environment.clientAuthorityId,
    post_logout_redirect_uri: "http://localhost:8166/",
    redirect_uri: "http://localhost:8166/",
    response_type: "id_token token",
}

Also since I didn't feel like setting up routing in Ionic I needed to figure out a way to a url to communicate with Ionic (For Browser testing purpose, normal commucation will be done through cordova).

So I pointed the redirct url to be the url ionic is hosting my application and on app.Component.ts in the Constructor I added code to try to get my authentication token.

constructor(
  public platform: Platform,
  public menu: MenuController,
  public oidcClient: OidcClientProvider
)
{
  try {
      oidcClient.userManager.signinPopupCallback().then(user => {
          console.log(user);
      }, err => { console.log(err); });
  }
  catch (ex)
  {
        console.log(ex);
  }
  //...
}

I'm sure there is a better do the redirect to a different route, This is just a quick and dirty hack

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download