Я хотел бы разработать модуль аутентификации для приложения Angular. Я использую Okta в качестве поставщика удостоверений, и angular-oauth2-oidc - мой выбор для реализации рабочего процесса аутентификации. Я пытаюсь следовать этому руководству https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce, но у меня возникают проблемы и появляется сообщение об ошибке, если я запускаю веб-приложение. Как я могу заставить этот пример кода работать?
auth.module.ts
@NgModule({
declarations: [
RegisterFormComponent,
SignInFormComponent,
SignInPage,
],
imports: [
CommonModule,
RouterModule.forChild(AUTH_ROUTES),
HttpClientModule,
OAuthModule.forRoot(),
],
providers: [
AuthNgOauth2OidcService,
]
})
export class AuthModule {
}
auth-ng-oauth2-oidc.service.ts
export class AuthNgOauth2OidcService implements AuthService {
authConfig: AuthConfig = {
// Url of the Identity Provider
issuer: environment.authIssuer,
// URL to redirect the user to after login
redirectUri: environment.authRedirectUri,
// The application is registered with this id at the auth-server
clientId: environment.authClientId,
// Set the scope for the permissions the client should request
// The first four are defined by OIDC
// Request offline_access to get a refresh token
scope: 'openid profile email offline_access',
};
public constructor(
private authService: OAuthService,
) {
this.authService.configure(this.authConfig);
this.authService.tokenValidationHandler = new JwksValidationHandler();
this.authService.loadDiscoveryDocumentAndTryLogin().then();
}
}
package.json
"dependencies": {
"@angular/animations": "~8.0.1",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/http": "~8.0.0-beta.10",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@ngrx/effects": "^8.5.2",
"@ngrx/store": "^8.4.0",
"angular-auth-oidc-client": "^10.0.10",
"angular-oauth2-oidc": "^8.0.4",
"core-js": "^2.5.4",
"mathjs": "^6.2.3",
"nativescript-angular": "~8.0.1",
"ng-oidc-client": "^1.0.7",
"oidc-client": "^1.10.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.5.0",
"tns-core-modules": "~6.0.0",
"zone.js": "~0.9.1"
},
ошибка
angular-oauth2-oidc.js:1346 error loading discovery document TypeError: this.interceptor.intercept is not a function
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at DefaultOAuthInterceptor.push../node_modules/angular-oauth2-oidc/fesm5/angular-oauth2-oidc.js.DefaultOAuthInterceptor.intercept (angular-oauth2-oidc.js:3927)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1821)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1865)
at MergeMapSubscriber.project (http.js:1048)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
core.js:5847 ERROR Error: Uncaught (in promise): TypeError: this.interceptor.intercept is not a function
TypeError: this.interceptor.intercept is not a function
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at DefaultOAuthInterceptor.push../node_modules/angular-oauth2-oidc/fesm5/angular-oauth2-oidc.js.DefaultOAuthInterceptor.intercept (angular-oauth2-oidc.js:3927)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1821)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1228)
at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1865)
at MergeMapSubscriber.project (http.js:1048)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at resolvePromise (zone.js:852)
at resolvePromise (zone.js:809)
at zone.js:913
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:24340)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
