okta Angular 7 oktaAuth.isAuthenticated () - false даже после успешного входа - PullRequest
Новая
       14

okta Angular 7 oktaAuth.isAuthenticated () - false даже после успешного входа

0 голосов
/ 11 апреля 2019

Я пытаюсь пройти через это демо: 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 { }

приложение-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-hosted-login, который предоставлен okta. Тем не менее, это приложение в Angular 5.

Одна вещь, которая мне показалась интересной, это то, что если я пытаюсь войти в систему с помощью приложения Angular 7, я получаю следующее сообщение об ошибке:

Доступ к XMLHttpRequest по адресу https://dev -979343.oktapreview.com / oauth2 / default / .well-known / openid-configuration 'from origin' http://localhost:4200' заблокирован Политика CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я не получаю эту ошибку CORS, когда использую Okta-hosted-login Angular 5

1 Ответ

1 голос
/ 17 апреля 2019

Настоящая проблема была связана с этим сообщением: Okta Angular 7 App возвращает ошибку CORS

С помощью @MattRaible, указавшей мне правильное направление, я смог решить эту проблему. По сути, у меня не было полномочий добавлять Trusted Origin (пункт меню API | Trusted Origin) на сайт okta. Как только администратор добавил 100 http://localhost:4200’ в качестве доверенного источника, все начало работать.

Спасибо всем, кто прокомментировал этот пост.

...