Spartacus login form(spring security) submit to external application?

 1. login component HTML

refer form tag:

 <form  (ngSubmit)="submitForm()" [formGroup]="loginForm" id="loginForm" >

 submitForm() is defined in login component ts file

<form  (ngSubmit)="submitForm()" [formGroup]="loginForm" id="loginForm" > 

 <label >{{ 'miniLogin.signInRegister' | cxTranslate | uppercase }}</label> 

  <div class="form-group">

    <label>

      <input

        type="email"

        class="form-control"

        formControlName="j_username"

        placeholder="{{ 'loginForm.emailAddress.placeholder' | cxTranslate }}"

        name="j_username"

      />

      <cx-form-errors [control]="loginForm.get('j_username')"></cx-form-errors>

    </label>

  </div>

  <div class="form-group">

    <label>

      <input

        type="password"

        class="form-control"

        placeholder="{{ 'loginForm.password.placeholder' | cxTranslate }}"

        formControlName="j_password"

        name="j_password"

        

      />

      <cx-form-errors [control]="loginForm.get('j_password')"></cx-form-errors>

    </label>

  </div>

  <p>

    <a

      [routerLink]="{ cxRoute: 'forgotPassword' } | cxUrl"

      aria-controls="reset-password"

      class="btn-link"

      >{{ 'loginForm.forgotPassword' | cxTranslate }}</a

    >

  </p>

  <ng-container>

    <div class="row">

      <div class="col-6"> <button type="submit" class="btn btn-block btn-primary" >

        {{ 'loginForm.signIn' | cxTranslate | uppercase }}

      </button></div>

      <div class="col-6">

        <ng-container *ngIf="!loginAsGuest">

          <a

            [routerLink]="{ cxRoute: 'register' } | cxUrl"

            class="btn btn-block btn-primary"

            >{{ 'loginForm.register' | cxTranslate | uppercase}}</a

          >

        </ng-container> </div>

    </div>

  

</ng-container>

</form>

 

2. login component ts file

 refer: submitForm(): void method.

import { DOCUMENT } from '@angular/common';

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { ActivatedRoute } from '@angular/router';

import {

  AuthRedirectService,

  AuthService,

  BaseSiteService,

  GlobalMessageService,

  GlobalMessageType,

  LanguageService,

  WindowRef,

} from '@spartacus/core';

import { CheckoutConfigService, CustomFormValidators } from '@spartacus/storefront';

import { Subscription } from 'rxjs';

@Component({

  selector: 'app-bdi-login-form',

  templateUrl: './bdilogin-form.component.html',

})

export class BDILoginFormComponent implements OnInit, OnDestroy {

  sub: Subscription;

  loginForm: FormGroup;

  loginAsGuest = false;

  currentCoutry = '';

  currentLanguage = '';

  constructor(

    protected auth: AuthService,

    protected globalMessageService: GlobalMessageService,

    protected fb: FormBuilder,

    protected authRedirectService: AuthRedirectService,

    protected winRef: WindowRef,

    protected activatedRoute: ActivatedRoute,

    protected checkoutConfigService: CheckoutConfigService,

    protected languageService: LanguageService,

    protected baseSiteService: BaseSiteService,

    @Inject(DOCUMENT) private document: Document

  ) {}

  ngOnInit(): void {

    const routeState = this.winRef.nativeWindow?.history?.state;

    const prefilledEmail = routeState?.['newUid'];

    this.loginForm = this.fb.group({

      j_username: [

        prefilledEmail?.length ? prefilledEmail : '',

        [Validators.required, CustomFormValidators.emailValidator],

      ],

      j_password: ['', Validators.required],

    });

    if (this.checkoutConfigService.isGuestCheckout()) {

      this.loginAsGuest = this.activatedRoute?.snapshot?.queryParams?.['forced'];

    }

  }

  submitForm(): void {

    if (this.loginForm.valid) {

      

      const window = this.winRef.nativeWindow;

      const loginURL = window.location.href + '/j_spring_security_check';

      console.log('loginURL: ' + loginURL);

      const form: HTMLFormElement = this.document.querySelector('form#loginForm');

      form.method = 'POST';

      form.action = loginURL;

      form.style.display = 'none';

      form.submit();

      //this.loginUser();

    } else {

      this.loginForm.markAllAsTouched();

    }

  }

  ngOnDestroy(): void {

    if (this.sub) {

      this.sub.unsubscribe();

    }

  }

  protected loginUser(): void {

    const { j_username, j_password } = this.loginForm.controls;

    this.auth.authorize(

      j_username.value.toLowerCase(), // backend accepts lowercase emails only

      j_password.value

    );

    if (!this.sub) {

      this.sub = this.auth.getUserToken().subscribe((data) => {

        if (data && data.access_token) {

          this.globalMessageService.remove(GlobalMessageType.MSG_TYPE_ERROR);

          this.authRedirectService.redirect();

        }

      });

    }

  }

}