正在使用Angular获取Key斗篷服务令牌

Question

我正试图从一个有角度的前端中的密钥斗篷服务获取令牌值。我使用的是Angular 10.1.3和keycloft Angular 8.0.1。

我的类的构造函数中有Key斗篷服务，我现在尝试将令牌拉到那里。

函数"令牌"显示了我尝试访问令牌的不同方式，所有这些方式都未定义。

keycloft实例显示它在那里，就好像我可以像this.kc.getKeycloakInstance().token一样访问它一样，但这也给出了未定义。

constructor(private kc: KeycloakService){
this.theToken();
}
async theToken() {
const inst = await this.kc.getKeycloakInstance();
console.log(inst)
const token1 = await this.kc.getToken();
console.log('token1', token1)
const token2 = await inst.token
console.log('token2', token2)
const token3 = inst.idToken
console.log('token3', token3)
const token4 = await this.kc.getKeycloakInstance().token
console.log('token4', await token4)
const token5 = inst['token']
console.log('token5', token5)
}

keycloft实例在控制台中输出，其中缩短了令牌值(整个令牌值都在我的控制台中(。

Keycloak {init: ƒ, login: ƒ, createLoginUrl: ƒ, logout: ƒ, createLogoutUrl: ƒ, …}
accountManagement: ƒ ()
authServerUrl: "https://sso.eva-int.com/auth"
authenticated: true
clearToken: ƒ ()
clientId: "portal-view"
createAccountUrl: ƒ (options)
createLoginUrl: ƒ (options)
createLogoutUrl: ƒ (options)
createRegisterUrl: ƒ (options)
enableLogging: false
endpoints: {authorize: ƒ, token: ƒ, logout: ƒ, checkSessionIframe: ƒ, register: ƒ, …}
flow: "standard"
hasRealmRole: ƒ (role)
hasResourceRole: ƒ (role, resource)
idToken: "eyJhbGc..."
idTokenParsed: {jti: "e460a...", exp: 1601412964, nbf: 0, iat: 1601412664, iss: "https://sso.eva-int.com/auth/realms/platform-development", …}
init: ƒ (initOptions)
isTokenExpired: ƒ (minValidity)
loadUserInfo: ƒ ()
loadUserProfile: ƒ ()
login: ƒ (options)
loginRequired: true
logout: ƒ (options)
onAuthError: (errorData) => {…}
onAuthLogout: () => {…}
onAuthRefreshError: () => {…}
onAuthRefreshSuccess: () => {…}
onAuthSuccess: () => {…}
onReady: (authenticated) => {…}
onTokenExpired: () => {…}
realm: "platform-development"
realmAccess: {roles: Array(4)}
refreshToken: "eyJhbGci..."
refreshTokenParsed: {jti: "2fdd1c98-d43f-...", exp: 1601414464, nbf: 0, iat: 1601412664, iss: "https://sso.eva-int.com/auth/realms/platform-development", …}
register: ƒ (options)
resourceAccess: {account: {…}}
responseMode: "fragment"
responseType: "code"
sessionId: "96184b4a-b0d7-4..."
subject: "15372c89-0761-..."
timeSkew: 0
token: "eyJhbGciOi..."
tokenParsed: {jti: "1137a54f-07e2-...", exp: 1601412964, nbf: 0, iat: 1601412664, iss: "https://sso.eva-int.com/auth/realms/platform-development", …}
tokenTimeoutHandle: 16
updateToken: ƒ (minValidity)
useNativePromise: false
__proto__: Object

显示控制台输出的图片

Answer 1

Keycapture服务具有返回promise的getToken()。以下是我的实现：

constructor(public keycloakService: KeycloakService) {
this.keycloakService.getToken().then(token => {
console.log('token', token);
});
}

Answer 2

这就是我最终获得令牌的方式，并将其添加到HttpInterceptor中的标头中。

import { Observable } from 'rxjs';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/mergeMap';
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// put the keycloak token into the header
// turn the promise returned from getToke() into an Observable
// this way we can return the proper type for the interceptor
return Observable.fromPromise(this.kc.getToken()).mergeMap(auth => {
if(auth) {
console.log(auth)
// this does not overwirte headers already there like it seems
// isntead it merges new header with ones already there
req = req.clone({
setHeaders: {
Authorization: `Bearer ${auth}`
}
});
}
return next.handle(req);
})
}