Question

我正在尝试完成此演示：https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce#upgrade-to-angular-7 这是我浏览过的一些教程之一，我一直在获得相同的结果

即使我成功登录Okta后，oktaAuth.isAuthenticated（）仍设置为false。

我知道我已成功登录，因为仪表板显示我已成功，并且当我再次尝试登录时，不会重定向到登录页面。

这是我的代码：

app.component.html

<h1>Welcome to {{ title }}!</h1>

<div *ngIf="isAuthenticated">
  <!-- <h2>Hi, {{user?.name}}!</h2> -->
  <button (click)="oktaAuth.logout()">Logout</button>
</div>

<div *ngIf="!isAuthenticated">
  <button (click)="oktaAuth.loginRedirect()">Login</button>
</div>

<router-outlet></router-outlet>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { OktaAuthService, UserClaims } from '@okta/okta-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ng-secure';
  isAuthenticated: boolean;
  email: string;

  constructor(public oktaAuth: OktaAuthService) {
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
           // Subscribe to authentication state changes
    this.oktaAuth.$authenticationState.subscribe( async(isAuthenticated: boolean)  => {
      this.isAuthenticated = isAuthenticated;
              });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
//import { OAuthModule } from 'angular-oauth2-oidc';

import { OktaAuthModule } from '@okta/okta-angular';

const config = {
  issuer: 'https://dev-xxxxxx.oktapreview.com/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: 'Correct Client Id'
};


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    //OAuthModule.forRoot()
    OktaAuthModule.initAuth(config)


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OktaCallbackComponent } from '@okta/okta-angular';

const routes: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

除了oktaAuth.isAuthenticated（）之外，还有其他标志指示我已成功登录吗？

感谢您的帮助。

我能够运行okta提供的okta托管登录示例。但是，此应用程序位于Angular 5中。

我发现有趣的一件事是，如果尝试使用Angular 7应用程序登录，则会收到以下错误消息：

从原点“ https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration”到“ http://localhost:4200”处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-来源的标头出现在请求的资源上。

当我使用okta托管的登录Angular 5时，我没有收到CORS错误

Answer 1

真正的问题与这篇文章有关：okta Angular 7 App returning a CORS error

在@MattRaible的帮助下，我指出了正确的方向，从而能够解决此问题。基本上，我没有权限在okta网站上添加“可信来源”（菜单项API |“可信来源”）。管理员将“ http://localhost:4200”添加为“受信任的来源”后，一切便开始起作用。

感谢所有对此帖子发表评论的人。

okta Angular 7 oktaAuth.isAuthenticated（）即使成功登录也为假

1 个答案: