캡차코드 출력

src/app/modules/auth/sign-in/sign-in.component.html

@@ -81,9 +81,11 @@
           <mat-error> 비밀번호를 입력하세요 </mat-error>
         </mat-form-field>
 
+        <img [src]="imagePath" />
         <mat-form-field class="w-full">
           <mat-label>보안코드*</mat-label>
           <input id="email" matInput [formControlName]="'recaptcha'" />
+
           <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
             보안코드를 입력하세요.
           </mat-error>

src/app/modules/auth/sign-in/sign-in.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
+import { IdentityService } from 'app/modules/polyglot/member/services/identity.service';
 
 @Component({
   selector: 'auth-sign-in',
@@ -20,6 +22,8 @@ export class AuthSignInComponent implements OnInit {
   };
   signInForm!: FormGroup;
   showAlert: boolean = false;
+  captchaToken?: string;
+  imagePath?: any;
 
   /**
    * Constructor
@@ -28,7 +32,9 @@ export class AuthSignInComponent implements OnInit {
     private _activatedRoute: ActivatedRoute,
     private _authService: AuthService,
     private _formBuilder: FormBuilder,
-    private _router: Router
+    private _router: Router,
+    private _identityService: IdentityService,
+    private _sanitizer: DomSanitizer
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -48,12 +54,20 @@ export class AuthSignInComponent implements OnInit {
       password: ['admin', Validators.required],
       // recaptcha: ['', Validators.required],
     });
+    this._identityService.captcha().then((result) => {
+      console.log('success', result, result.getToken(), result.getImage());
+
+      this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl(
+        'data:image/jpg;base64,' + result.getImage()
+      );
+    });
   }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
+  __getImagePath(): void {}
   /**
    * Sign in
    */

src/app/modules/polyglot/member/services/identity.service.ts

@@ -52,8 +52,8 @@ export class IdentityService {
     });
   }
 
-  captcha(): Promise<boolean> {
-    return new Promise<boolean>((resolve, reject) => {
+  captcha(): Promise<CaptchaResponse.Result> {
+    return new Promise<CaptchaResponse.Result>((resolve, reject) => {
       let req = new CaptchaRequest();
 
       this.__natsService
@@ -63,7 +63,7 @@ export class IdentityService {
           CaptchaResponse.deserializeBinary
         )
         .then((result) => {
-          console.log('success', result, result.getToken(), result.getImage());
+          resolve(result);
         })
         .catch((e: Error) => {
           console.log('failed', e.getCode(), e.getMessage(), e.getData());