使用 OKTA 和 Angular 10 的自定义登录页面

Question

我在这里遇到了一些无法登录的问题。控制台上也没有任何内容。这是 login.component.html

中的表格

<form [formGroup]="form"  (ngSubmit)="onSubmit()">
  <p *ngIf="loginInvalid" class="text-danger">
     The username and password were not recognized
  </p>
          
  <div class="form-group">
     <label for="username">Username</label>
     <input type="email" class="form-control" id="username">
  </div>
  <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1" required>
  </div>
  <div class="form-group form-check">
     <input type="checkbox" class="form-check-input" id="rememerPass">
     <label class="form-check-label" for="rememerPass">Remember Password</label>
  </div>
  <button type="submit" class="btn btn-primary w-100 mt-4 mb-3">Login</button>
  <button type="button" class="btn btn-secondary w-100 mb-2">Register</button>
  <button type="button" class="btn btn-link w-100">Forgot Password</button>
</form>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent implements OnInit {
  form: FormGroup;
  public loginInvalid: boolean;
  private formSubmitAttempt: boolean;
  private returnUrl: string;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService
  ) {
 }

  async ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/dashboard';

    this.form = this.fb.group({
      username: ['', Validators.email],
      password: ['', Validators.required]
    });

    if (await this.authService.checkAuthenticated()) {
      await this.router.navigate([this.returnUrl]);
    }
  }

  async onSubmit() {
    console.log("event fired");

    this.loginInvalid = false;
    this.formSubmitAttempt = false;
    if (this.form.valid) {
      try {
        const username = this.form.get('username').value;
        const password = this.form.get('password').value;
        await this.authService.login(username, password);
        console.log("username: ",username, "password: ", password);
    
      } catch (err) {
        this.loginInvalid = true;
      }
    } else {
      this.formSubmitAttempt = true;
    }
  }
}

和auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { OktaAuth } from '@okta/okta-auth-js';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  private authClient = new OktaAuth({
    issuer:"https://dev-#######.okta.com/oauth2/default",
    clientId:"##########################",
  });

  public isAuthenticated = new BehaviorSubject<boolean>(false);

  constructor(private router: Router) {
  }

  async checkAuthenticated() {
    const authenticated = await this.authClient.session.exists();
    this.isAuthenticated.next(authenticated);
    return authenticated;
  }

  async login(username: string, password: string) {
    const transaction = await this.authClient.signIn({username, password});

    if (transaction.status !== 'SUCCESS') {
      throw Error('We cannot handle the ' + transaction.status + ' status');
    }
    this.isAuthenticated.next(true);

    this.authClient.session.setCookieAndRedirect(transaction.sessionToken);
  }

  async logout(redirect: string) {
    try {
      await this.authClient.signOut();
      this.isAuthenticated.next(false);
      this.router.navigate([redirect]);
    } catch (err) {
      console.error(err);
    }
  }
}

没有任何反应，尽管注销确实有效（在导航栏中实现{未显示}）

我错过了什么？您还需要看什么？

Answer 1

如果没有任何代码可以重现这一点，目前我唯一可以建议的是您尝试从表单中删除 ngSubmit 并向登录按钮添加点击处理程序。我知道这不一定是答案，但这是编写此表单的另一种方法。

您也可以试试这个来帮助诊断。

更新

抱歉，我在你的问题中没有注意到这一点。您没有将表单控件绑定到输入。

<input type="email" class="form-control" id="username" autocomplete="username" formControlName="username" required>

注意 'formControlName'。这会将表单组中的控件绑定到 html 控件。

您应该阅读 Angular 响应式表单文档

https://angular.io/guide/reactive-forms

使用 OKTA 和 Angular 10 的自定义登录页面

Custom login page with OKTA and Angular 10

javascript

angular

okta