无法使用 angular-oauth2-oidc 运行 OAuth2 与 Okta

Question

我想为 Angular 应用程序开发一个授权模块。我使用 Okta 作为身份提供者，angular-oauth2-oidc 是我实现身份验证工作流的选择。我正在尝试遵循本指南 https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce，但如果我运行 Web 应用程序，我会遇到问题并收到错误消息。我怎样才能让这个示例代码工作？

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)

Answer 1

尝试将此添加到 auth.module.ts 中的提供商中：

providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthNgOauth2OidcService,
        multi: true
    },
    ]

无法使用 angular-oauth2-oidc 运行 OAuth2 与 Okta

Cannot run OAuth2 with Okta using angular-oauth2-oidc

angular

typescript

oauth-2.0

nativescript

angular-oauth2-oidc