[ IOS ] 핸드폰 문자 인증번호 자동완성 시키기 ( Autofill ) + 자동완성 가능한 문자형태

 

오늘은 회원가입시 sms로 문자 인증하는 부분 구현하다가

문자 자동완성이 안되는 이유로 검색하다 알게된 부분을 정리해 보고자 한다.😇

 

 

1. input에 autocomplete속성 추가

문자 자동완성을 사용하는 방법은 간단한데,

input에 autocomplete속성을 추가해 주면 된다.

 

문자 인증을 하는 경우에는   autocomplete="one-time-code"

 를 추가해주면 된다 !

 

// 예제

<input
  type="text"
  name="auth-token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

mdn을 참고하자면

 

  one-time-code  

사용자를 인증할 때 사용하는 1회성 코드.

 

더 많은 autocomplate의 value들은 여기로

→  https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete

 

 

 

2. Autofill을 위한 인증 문자 발송 형태

근데 왜나는 저걸 넣었는데도 적용이 안되는가??왜 autocomplete가 안먹지??? 했는데

 

문자인증시 자동완성이 적용되는 문자 형태가 따로 있었다...

 

혹시나 해서 다른 사이트에서 문자인증 받았던 문자 형태로

문자를 발송해서 테스트 해봤더니 오!? 갑자기 되네?!?

 

저의 경우에는 아래와 같이

"인증번호 [######]를 입력해 주세요"

형태로 발송했는데

잘 적용이 되는걸 확인했습니다 !

 

 

 

 

 

 

근데 검색하다보니 나같은 문제로 헤매는 분들이 꽤 계신거 같아서 다른 분이 정리한 부분도 첨부 !

 

다 하고 팀장님께 말씀드려서 형태 바꿔서 테스트 하려고 했는데 그냥 고 하자 하셔서 확인 안해본건 안비밀..🤣

 

참고 https://swieeft.github.io/2020/08/13/MobileAuthNumberAutomaticCompletion.html

 

 

 

---

✔️ 참고

https://swieeft.github.io/2020/08/13/MobileAuthNumberAutomaticCompletion.html

https://dev.to/maciejtrzcinski/html-autocomplete-one-time-code-357g