i am integrating angular keycloak 7.3.1 into my application in angular 9 After initializing keycloak I do not go to the keycloak login page. I don't see any calls starting, neither login, nor token, nor info. How can I solve this problem? I don't use a function as in the guide but I integrated keycloak in an ngrx effect, but even following the guide the results were not better
the config:
window.oidcConfig = {
config: {
/**
* URL to the Keycloak server, for example: http://keycloak-server/auth
*/
url: `${DOMAIN}/auth`,
/**
* Name of the realm, for example: 'myrealm'
*/
realm: 'quake',
/**
* Client identifier, example: 'myapp'
*/
clientId: 'quake',
},
initOptions: {
/**
* Adds a [cryptographic nonce](https://en.wikipedia.org/wiki/Cryptographic_nonce)
* to verify that the authentication response matches the request.
* @default true
*/
useNonce: true,
/**
*
* Allow usage of different types of adapters or a custom adapter to make Keycloak work in different environments.
*
* The following options are supported:
* - `default` - Use default APIs that are available in browsers.
* - `cordova` - Use a WebView in Cordova.
* - `cordova-native` - Use Cordova native APIs, this is recommended over `cordova`.
*
*/
adapter: 'default',
/**
* Specifies an action to do on load.
* 'login-required'|'check-sso'
*/
onLoad: 'login-required',
/**
* Set an initial value for the token.
*/
token: '',
/**
* Set an initial value for the refresh token.
*/
refreshToken: '',
/**
* Set an initial value for the id token (only together with `token` or
* `refreshToken`).
*/
idToken: '',
/**
* Set an initial value for skew between local time and Keycloak server in
* seconds (only together with `token` or `refreshToken`).
*/
timeSkew: 0,
/**
* Set to enable/disable monitoring login state.
* @default true
*/
checkLoginIframe: true,
/**
* Set the interval to check login state (in seconds).
* @default 5
*/
checkLoginIframeInterval: 5,
/**
* Set the OpenID Connect response mode to send to Keycloak upon login.
* @default fragment After successful authentication Keycloak will redirect
* to JavaScript application with OpenID Connect parameters
* added in URL fragment. This is generally safer and
* recommended over query.
* 'query'|'fragment'
*/
responseMode: 'fragment',
/**
* Specifies a default uri to redirect to after login or logout.
* This is currently supported for adapter 'cordova-native' and 'default'
*/
redirectUri: `${DOMAIN}/quake`,
/**
* Specifies an uri to redirect to after silent check-sso.
* Silent check-sso will only happen, when this redirect uri is given and
* the specified uri is available whithin the application.
*/
silentCheckSsoRedirectUri: window.quixConfig.baseUrl + '/assets/silent-check-sso.html',
/**
* Specifies whether the silent check-sso should fallback to "non-silent"
* check-sso when 3rd party cookies are blocked by the browser. Defaults
* to true.
*/
silentCheckSsoFallback: false,
/**
* Set the OpenID Connect flow.
* @default standard
* 'standard'|'implicit'|'hybrid';
*/
flow: 'standard',
/**
* Configures the Proof Key for Code Exchange (PKCE) method to use.
* The currently allowed method is 'S256'.
* If not configured, PKCE will not be used.
*/
pkceMethod: 'S256',
/**
* Enables logging messages from Keycloak to the console.
* @default false
*/
enableLogging: true
},
/**
* boolean
*/
enableBearerInterceptor: true,
/**
* boolean
*/
loadUserProfileAtStartUp: false,
/**
* \{url: string;httpMethods?: HttpMethods\}list
*/
bearerExcludedUrls: [],
/**
* string
*/
authorizationHeaderName: '',
/**
* string
*/
bearerPrefix: '',
}
the service:
export class AuthService {
public config: any
public authConfig: any
constructor(
@Optional() config: QuangAuthConfig,
private keyCloak: KeycloakService,
private store: Store<any>,
) {
if (config) {
this.config = config;
}
}
startAuth() {
if (_window().oidcConfig) {
this.authConfig = _window().oidcConfig
} else if (this.config.oidcConfig) {
this.authConfig = this.config.oidcConfig
} else {
alert('[AUTH SERVICE] No auth config')
}
return from(this.keyCloak.init(this.authConfig))
}
startAuthAndDispatch() {
if (_window().oidcConfig) {
this.authConfig = _window().oidcConfig
} else if (this.config.oidcConfig) {
this.authConfig = this.config.oidcConfig
} else {
alert('[AUTH SERVICE] No auth config')
}
from(this.keyCloak.init(this.authConfig)).subscribe(isLogged => {
if (isLogged) {
this.store.dispatch(userLogin({isLogged: isLogged}))
}
})
}
getUserInfo() {
return from(this.keyCloak.loadUserProfile())
}
getUserInfoAndDispatch() {
from(this.keyCloak.loadUserProfile()).subscribe((user: any) => {
this.store.dispatch(userInfoLogin({userData: user}))
})
}
refreshToken() {
return from(this.keyCloak.updateToken(30))
}
logout() {
return from(this.keyCloak.logout())
}
logoutAndDispatch() {
from(this.keyCloak.logout()).subscribe(
() => {
this.store.dispatch(userLogout())
this.store.dispatch(userInfoLogout())
}
)
}
}
the effect
export class AuthEffects {
constructor(
private actions$: Actions,
private authService: AuthService
) {
}
startAuthEffect$ = createEffect(
() => this.actions$.pipe(
ofType(ROOT_EFFECTS_INIT),
exhaustMap(action =>
this.authService.startAuth().pipe(
map(is => userLogin({isLogged: is}))
)
)
)
);
getInfoUserEffect$ = createEffect(
() => this.actions$.pipe(
ofType(userLogin),
exhaustMap(action =>
this.authService.getUserInfo().pipe(
map((user: any) => userInfoLogin({userData: user}))
)
)
)
);
endAuthEffect$ = createEffect(
() => this.actions$.pipe(
ofType(userLogout),
exhaustMap(action =>
this.authService.logout().pipe(
map(() => userInfoLogout())
)
)
)
);
}