신용카드 읽기 기능 구현!

개시하다

며칠 전 아이폰 카메라로 신용카드를 읽고 입력 형태로 자동 입력하는 기능을 실시해 글을 썼다!
이 기능의 실현 자체가 어렵지 않지만https로 연결되지 않으면 이 기능은 움직이지 않을 것 같아 동작을 검증할 때 고민이다.

하고 싶은 일

아래 그림에서 보듯이 클리카 읽기 기능을 상자에 넣은 후 클리카 정보를 자동으로 폼에 입력하시기 바랍니다.

※ 주의
・읽을 수 있는 항목은 카드 번호, 유효기간, 카드 유형뿐입니다.이름 및 CVV는 수동으로 입력해야 합니다.(이번에는 카드 번호 및 유효기간만 적용)
・iOS 8을 초과하지 않으면 읽기 기능이 정상적으로 발휘되지 않으니 주의해야 합니다!
・ Anglar 애플리케이션에서 구현되지만 Anglar Material의 mat-select 태그를 사용하면 좋지 않기 때문에 일반적인 select 태그를 사용했습니다.→ mat-select 태그도 가능하신 분 알려주세요!웃다 웃다

컨디션

환경이 바로 이런 느낌이다.

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.7
Node: 14.15.1
OS: darwin x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.7
typescript                      4.0.7

이루어지다

View 측
나는 특별한 실시 방식은 다음과 같은 세 가지가 있다고 생각한다.
• 카드 번호 형식의name 속성으로 "CardNumber"를 지정합니다.
・ 유효 기간(월) 형식의name 속성으로 "card ExpirationMonth"를 지정합니다.
• 유효 기간(년) 형식의name 속성으로 "card ExpirationYear"를 지정합니다.

<form [formGroup]="paymentForm" (ngSubmit)="onSubmit()">
  <div>
    <input id="cardNumber" name="cardNumber" formControlName="cardNumber"><br><br>
  </div>
  <div>
    <select formControlName="expiration_month" name="cardExpirationMonth">
      <option *ngFor="let m of monthList">
        {{ m + '月'}}
      </option>
    </select>
    <select formControlName="expiration_year" name="cardExpirationYear">
      <option *ngFor="let key of yearList">{{ key }}</option>
    </select>
  </div>
  <button type="submit">決定</button>
</form>

어셈블리 면
일반적인 리액티비즘을 만드는 것과는 별다른 변화가 없다.

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

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {


  // セレクトタグのフォームの部品となる「月」の配列
  public monthList = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];

  // セレクトタグのフォームの部品となる「年」の配列
  public yearList = [2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031];
  
  public paymentForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit(): void {
    this.paymentForm = this.fb.group({
      'cardNumber': ['', [Validators.required]],
      'expiration_month': ['', [Validators.required]],
      'expiration_year' : ['', [Validators.required]]
    })
  }

// 一旦入力された値をコンソールログに出力する。
  public onSubmit(): void {
    console.log(this.paymentForm.get('cardNumber').value);
    console.log(this.paymentForm.get('expiration_month').value);
    console.log(this.paymentForm.get('expiration_year').value);
  }

}

로컬 환경에서의 작업 확인

이렇게 되면 표로서 기능은 있지만 https 연결을 사용하지 않으면 소용이 없다.그래서 나는 어떻게 현지 환경에서 검증을 진행하는지 조사했다.어쨌든https를 로컬 환경에 연결하고 싶습니다...
조사 결과...
ngrok이라는 프로그램 라이브러리를 사용하면https로 로컬 환경에 연결할 수 있습니다!
※ 지역 환경은 어디서든 접근할 수 있기 때문에 안전성이 위험합니다.이 점에 주의하여 사용하세요.
지금 설치하십시오!

$ brew install ngrok --cask

버전 확인 후 설치가 완료되었습니다.

$ ngrok -v
$ ngrok version 2.3.39

로컬 환경에서https를 연결하기 위해 아래 명령을 실행합니다.

# ポート番号は自分が立ち上げているアプリケーションのポート番号を指定
$ ngrok http 4200 -host-header="localhost:4200" 

위 명령을 실행하면 다음과 같이 표시됩니다.
Safari를 스마트폰으로 열고 포워드링 URL을 Alles Bar에 입력하면 페이지가 나온다.

ngrok by @inconshreveable                                                                                   (Ctrl+C to quit)
                                                                                                                            
Session Status                online                                                                                        
Session Expires               1 hour, 59 minutes                                                                            
Version                       2.3.39                                                                                        
Region                        United States (us)                                                                            
Web Interface                 http://127.0.0.1:4040                                                                         
Forwarding                    http://acf3da528cdc.ngrok.io -> http://localhost:4200                                         
Forwarding                    https://acf3da528cdc.ngrok.io -> http://localhost:4200                                        
                                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                                   
                              0       0       0.00    0.00    0.00    0.00   

https 연결을 사용하여 input 창을 클릭하면 아래 그림과 같이 입력란을 표시하고'신용카드 읽기'항목을 표시합니다.

카메라를 시작하고 다음 이미지를 표시하려면 누르십시오.
상자에 신용카드를 삽입하면 표에 카드 번호와 유효기간이 자동으로 입력됩니다.

이렇게 설치와 로컬 동작 확인이 끝납니다!

총결산

나는 신용카드의 읽기 기능이 좀 어려울 것 같지만 의외로 매우 간단하다.
로컬 환경에서https를 연결하는 방법을 배웠으니 다행입니다.
ngrok이 아니기 때문에 서버라는 서비스를 사용해도 돼요. 이번에는 저쪽을 만져보고 싶어요.
뭔가 잘못된 점이나 이렇게 좋은 점이 있다면 댓글 등으로 알려주시면 기쁠 거예요!

참고 자료

신용 카드 읽기 정보
https://qiita.com/okumura_daiki/items/c5c28117b999252e22ca
ngrok
https://qiita.com/T-Com/items/7f1468167f80df00a87d
https://qiita.com/kitaro0729/items/44214f9f81d3ebda58bd
https://www.mathkuro.com/mac/brew-cask-command-error/
서버 정보
https://qiita.com/kaba/items/53b297e2bfb5b4f20a48