Я использую идентификационный сервер 4 и angular 9. Я настроил идентификационный сервер и мне удалось успешно войти в мое приложение angular, но я не могу получить доступ к профилю пользователя, имени пользователя и так далее c , как я получил неопределенный.
Но после входа в компонент angular auth-callback с использованием пользователя oid c, настройке usermanager, которую я смог использовать, удалось получить все данные пользователя (id_token, access token et c), но в компоненте я не мог. после входа в систему пользовательский объект является нулевым или неопределенным, но когда я обновляю sh мою страницу после успешного входа, я могу получить имя пользователя.
Я не знаю, что не так с моим angular кодом.
my authservice code goes here
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { UserManager, UserManagerSettings, User } from 'oidc-client';
import { BehaviorSubject } from 'rxjs';
import { AppconfigService } from '../Shared/appconfig.service';
import { getClientSettings } from '../Shared/ClientSettings';
@Injectable({
providedIn: 'root'
})
export class AuthService extends AppconfigService {
// Observable navItem source
private _authNavStatusSource = new BehaviorSubject<boolean>(false);
// Observable navItem stream
authNavStatus$ = this._authNavStatusSource.asObservable();
private manager = new UserManager(getClientSettings());
private user: User| null;
constructor(private http: HttpClient, private configService: AppconfigService) {
super();
this.getUser();
}
getUser() {
this.manager.getUser().then(user => {
this.user = user;
this._authNavStatusSource.next(this.isAuthenticated());
});
return this.user;
}
login() {
return this.manager.signinRedirect();
}
async completeAuthentication() {
this.user = await this.manager.signinRedirectCallback();
this._authNavStatusSource.next(this.isAuthenticated());
}
// async completeAuthentication(): Promise<void> {
// return this.manager.signinRedirectCallback().then(user => {
// this.user = user;
// });
// }
signinSilentCallback(){
this.manager.signinSilentCallback()
.catch((err) => {
console.log(err);
});
}
register(userRegistration: any) {
return this.http.post(this.configService.authApiURI + '/account',
userRegistration).pipe(catchError(this.handleError));
}
isAuthenticated(): boolean {
return (this.user != null && !this.user.expired);
}
get authorizationHeaderValue(): string {
return `${this.user.token_type} ${this.user.access_token}`;
}
// get name(): string {
// return this.user !== null ? this.user !== undefined : '';
// }
getClaims(): any {
return this.user.profile;
}
get name(): string {
if (this.user !== null && this.user !== undefined){
console.log(this.user);
return this.user.profile.name;
} else {
return null;
}
}
async signout() {
await this.manager.signoutRedirect();
}
}
Компонент приложения
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, BehaviorSubject, Observable } from 'rxjs';
import { User, UserManager } from 'oidc-client';
import { AuthService } from './Services/auth.services';
import { TopsecretService } from './Services/topsecret.service';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { AppconfigService } from './Shared/appconfig.service';
import { getClientSettings } from './Shared/ClientSettings';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
name: string;
isAuthenticated: boolean;
subscription:Subscription;
private manager = new UserManager(getClientSettings());
private _authNavStatusSource = new BehaviorSubject<boolean>(false);
title = 'Oyo State Signage & Advertisement Agency [OYSAA]';
constructor(private http: HttpClient,private appConfig: AppconfigService,private authService:AuthService, private router: Router) {
this.getUser();
}
ngOnInit() {
//this also give error
console.log(this.authService.name);
//this also give error
console.log(this.authService.authorizationHeaderValue);
}
getUser(): string {
this.manager.getUser().then(user => {
/// I have get the error here but if i refesh the page
this.name = user.profile.name;
this._authNavStatusSource.next(this.authService.isAuthenticated());
});
return this.name;
}
ngOnDestroy() {
// prevent memory leak when component is destroyed
this.subscription.unsubscribe();
}
}
настройка клиента
import { UserManagerSettings } from 'oidc-client';
export function getClientSettings(): UserManagerSettings {
return {
authority: 'https://localhost:5000',
client_id: 'oysaafrontend',
redirect_uri: 'http://localhost:4200/auth-callback',
post_logout_redirect_uri: 'http://localhost:4200/',
response_type:"id_token token",
scope:"openid profile email address phone role",
filterProtocolClaims: true,
loadUserInfo: true,
automaticSilentRenew: true,
silent_redirect_uri: 'http://localhost:4200/silent-refresh.html'
//silent_redirect_uri: 'https://oysaa.azurewebsites.net/silent-refresh.html'
};
}
аутентификационный обратный вызов
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/Services/auth.services';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { User } from 'oidc-client';
@Component({
selector: 'app-auth-callback',
templateUrl: './auth-callback.component.html',
styleUrls: ['./auth-callback.component.css']
})
export class AuthCallbackComponent implements OnInit {
error: boolean;
user: User | null;
constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {}
async ngOnInit() {
// check for error
// if (this.route.snapshot.fragment.indexOf('') >= 0) {
// this.error=true;
// return;
// }
await this.authService.completeAuthentication();
this.router.navigate(["/admin/dashboard"]);
}
}