Webã¢ããªã±ãŒã·ã§ã³åãSMS OTPã¿ã€ã ã¢ãŠãèšå®ã®åŸ¹åºè§£èª¬ãã»ãã¥ãªãã£ãUXãã°ããŒãã«ãªãããã¯ãŒã¯é å»¶ã®ãã©ã³ã¹ãåããã·ãŒã ã¬ã¹ãªèªèšŒãããŒãå®çŸããæ¹æ³ãåŠã³ãŸãã
ããã³ããšã³ãWeb OTPã¿ã€ã ã¢ãŠãã®å®å šãã¹ã¿ãŒïŒSMSèšå®ã®ã°ããŒãã«ã¬ã€ã
ããžã¿ã«ç€ŸäŒã«ãããŠãSMSã§é ä¿¡ãããã·ã³ãã«ãªã¯ã³ã¿ã€ã ãã¹ã¯ãŒãïŒOTPïŒã¯ããŠãŒã¶ãŒèªèšŒã®åºç€ãšãªã£ãŠããŸããéè¡ãžã®ãã°ã€ã³ããããŒãããªããªãŒã®ç¢ºèªãŸã§ãããããå Žé¢ã§ããžã¿ã«ãªéçªã®åœ¹å²ãæãããŠããŸããäžèŠãããšåçŽãªããã§ãããOTPãããŒã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã¯éåžžã«ç¹çްã§ãããã®äœéšã®äžå¿ã«ããã®ããå°ãããªããã匷åãªè©³çްèšå®ãããªãã¡ã¿ã€ã ã¢ãŠãèšå®ã§ãããããæ£ããèšå®ããã°ããã»ã¹ã¯ã·ãŒã ã¬ã¹ã«ãªããŸãããééããã°å€§ããªæ©æŠããã©ã¹ãã¬ãŒã·ã§ã³ããããŠæœåšçãªãŠãŒã¶ãŒé¢è±ã®åå ãšãªããŸãã
ããã¯åã«ã¹ããããŠã©ãããã¹ã¿ãŒããããã ãã®è©±ã§ã¯ãããŸãããå ç¢ãªã»ãã¥ãªãã£ãçŽæçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ããããŠäºæž¬äžå¯èœãªã°ããŒãã«ãªéä¿¡ãããã¯ãŒã¯ã®çŸå®ãšã®éã§ãè€éãªãã©ã³ã¹ãåãè¡çºãªã®ã§ãã5Gãæ®åããŠããéœåžéšã§å®ç§ã«æ©èœããã¿ã€ã ã¢ãŠãããæç¶çãªæ¥ç¶ãããªãå°æ¹ã®é¡§å®¢ã«ãšã£ãŠã¯å šã䜿ãç©ã«ãªããªããããããŸããããŠãŒã¶ãŒã¯æ°ããã³ãŒãããªã¯ãšã¹ãã§ããããã«ãªããŸã§ãã©ããããåŸ ã€ã¹ããªã®ã§ããããïŒSMSãå°çãããŸã§ã®åŠ¥åœãªæéã¯ã©ããããã§ããããïŒãããŠãææ°ã®ãã©ãŠã¶APIã¯ã©ã®ããã«ãã®ã²ãŒã ãå€ããã®ã§ããããïŒ
ãã®å æ¬çãªã¬ã€ãã§ã¯ãããã³ããšã³ãã®Web OTPã¿ã€ã ã¢ãŠãèšå®ã®æè¡ãšç§åŠãè§£ãæãããŸããèæ ®ãã¹ãéèŠãªèŠçŽ ãæ¢ããå®è£ ã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšŒããå®è·µçãªã³ãŒãäŸãæäŸãããããŠå®å šã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãã€ã°ããŒãã«ã«èæ§ã®ããèªèšŒãããŒãäœæããããã®é«åºŠãªæŠç¥ã«ã€ããŠè°è«ããŸãã
OTPã®ã©ã€ããµã€ã¯ã«ãšã¿ã€ã ã¢ãŠãã®åœ¹å²ãçè§£ãã
ã¿ã€ã ã¢ãŠããèšå®ããåã«ããŸãOTPããã©ãéã®ããçè§£ããå¿ èŠããããŸããããã¯ã¯ã©ã€ã¢ã³ãïŒããã³ããšã³ãïŒãšãµãŒããŒïŒããã¯ãšã³ãïŒã®äž¡æ¹ãé¢ãã倿®µéã®ããã»ã¹ã§ããã©ã®æ®µéã§ã®å€±æãé å»¶ãããããŒå šäœãäžæãããå¯èœæ§ããããŸãã
- ãªã¯ãšã¹ãïŒãŠãŒã¶ãŒãã¢ã¯ã·ã§ã³ïŒäŸïŒãã°ã€ã³ããã¹ã¯ãŒããªã»ããïŒãéå§ããé»è©±çªå·ãå ¥åããŸããããã³ããšã³ãã¯ããã¯ãšã³ãAPIã«ãªã¯ãšã¹ããéä¿¡ããOTPã®çæãšéä¿¡ãäŸé ŒããŸãã
- çæãšä¿åïŒããã¯ãšã³ãã¯ãŠããŒã¯ã§ã©ã³ãã ãªã³ãŒããçæããŸãããã®ã³ãŒãããæå¹æéãé¢é£ãããŠãŒã¶ãŒ/é»è©±çªå·ãšå ±ã«ããŒã¿ããŒã¹ïŒRedisãæšæºçãªSQLããŒãã«ãªã©ïŒã«ä¿åããŸãã
- éä¿¡ïŒããã¯ãšã³ãã¯SMSã²ãŒããŠã§ã€ãµãŒãã¹ïŒTwilioãVonageããŸãã¯å°åã®ãããã€ããŒãªã©ïŒãšéä¿¡ããOTPã³ãŒãããŠãŒã¶ãŒã®æºåž¯é»è©±çªå·ã«éä¿¡ããŸãã
- é ä¿¡ïŒSMSã²ãŒããŠã§ã€ã¯ãåœéçããã³å°åã®ã¢ãã€ã«ãã£ãªã¢ã®è€éãªç¶²ã®ç®ãéããŠãã¡ãã»ãŒãžããŠãŒã¶ãŒã®ããã€ã¹ã«ã«ãŒãã£ã³ã°ããŸããããã¯ãã°ãã°æãäºæž¬äžå¯èœãªã¹ãããã§ãã
- åä¿¡ãšå ¥åïŒãŠãŒã¶ãŒã¯SMSãåä¿¡ããã³ãŒããèªã¿åããWebã¢ããªã±ãŒã·ã§ã³ã®å ¥åãã£ãŒã«ãã«æåã§å ¥åããŸãã
- æ€èšŒïŒããã³ããšã³ãã¯ãŠãŒã¶ãŒãå ¥åããã³ãŒããæ€èšŒã®ããã«ããã¯ãšã³ãã«éãè¿ããŸããããã¯ãšã³ãã¯ãã³ãŒããä¿åãããŠãããã®ãšäžèŽãããããããŠãŸã æå¹æéå ã§ãããã確èªããŸãã
ãã®ã©ã€ããµã€ã¯ã«ã®äžã§ã¯ãããã€ãã®ç°ãªããã¿ã€ã ã¢ãŠãããæ©èœããŠããŸãã
- OTPæå¹æéïŒãµãŒããŒãµã€ãïŒïŒããã¯æãéèŠãªã»ãã¥ãªãã£ã¿ã€ã ã¢ãŠãã§ããOTPã³ãŒãèªäœãããã¯ãšã³ãã«ãã£ãŠæå¹ãšèŠãªãããæéãå®çŸ©ããŸããäžè¬çãªå€ã¯2åãã10åã§ãããã®æéãéãããšãããšããŠãŒã¶ãŒãæ£ããå ¥åããŠãã³ãŒãã¯ç¡å¹ã«ãªããŸããããã¯çŽç²ã«ããã¯ãšã³ãåŽã®æžå¿µäºé ã§ãã
- ãã³ãŒããåéä¿¡ãã¯ãŒã«ããŠã³ïŒã¯ã©ã€ã¢ã³ããµã€ãïŒïŒããã¯ããã³ããšã³ãã§ãŠãŒã¶ãŒã«è¡šç€ºãããã¿ã€ããŒã§ãããŠãŒã¶ãŒãæåã®ãªã¯ãšã¹ãçŽåŸã«ãåéä¿¡ããã¿ã³ã飿ããã®ãé²ããŸããæåã®SMSãå°çããã®ã«ååãªæéãäžããããšãç®çãšããŠããŸãããããç§ãã¡ã®è°è«ã®äž»çŒã§ãã
- APIãªã¯ãšã¹ãã¿ã€ã ã¢ãŠãïŒãããã¯ãŒã¯ïŒïŒãããã¯ããã³ããšã³ããšããã¯ãšã³ãéã®APIåŒã³åºãïŒäŸïŒOTPéä¿¡ã®åæãªã¯ãšã¹ããæ€èšŒã®æçµãªã¯ãšã¹ãïŒã®ããã®æšæºçãªãããã¯ãŒã¯ã¿ã€ã ã¢ãŠãã§ããéåžžã¯çãïŒäŸïŒ10ã30ç§ïŒããããã¯ãŒã¯æ¥ç¶ã®åé¡ãåŠçããŸãã
éèŠãªèª²é¡ã¯ãã¯ã©ã€ã¢ã³ããµã€ãã®ãåéä¿¡ãã¯ãŒã«ããŠã³ããSMSé ä¿¡ã®çŸå®ãšãµãŒããŒãµã€ãã®æå¹æéãšåæããããŠãŒã¶ãŒã«ãšã£ãŠã¹ã ãŒãºã§è«ççãªäœéšãåµåºããããšã§ãã
äžå¿çãªèª²é¡ïŒã»ãã¥ãªãã£ãUXããããŠã°ããŒãã«ãªçŸå®ãšã®ãã©ã³ã¹
å®ç§ãªã¿ã€ã ã¢ãŠããèšå®ããããšã¯ãåäžã®éæ³ã®æ°åãèŠã€ããããšã§ã¯ãããŸãããããã¯ãç«¶åãã3ã€ã®åªå äºé ãæºããã¹ã€ãŒãã¹ããããèŠã€ããããšã§ãã
1. ã»ãã¥ãªãã£ã®èгç¹
çŽç²ã«ã»ãã¥ãªãã£ã«çŠç¹ãåœãŠã芳ç¹ããã¯ãã¿ã€ã ã¢ãŠãã¯åžžã«çãæ¹ãè¯ãã§ãããµãŒããŒåŽã®OTPæå¹æéãçãã»ã©ãæ»æè ãã³ãŒããååãããããã®ä»ã®æ¹æ³ã§äŸµå®³ãããããæ©äŒã®çªãçãŸããŸããã¯ã©ã€ã¢ã³ããµã€ãã®ãåéä¿¡ãã¿ã€ããŒã¯ã³ãŒãã®æå¹æ§ã«çŽæ¥åœ±é¿ããŸããããã»ãã¥ãªãã£ã«åœ±é¿ãäžããããŠãŒã¶ãŒã®è¡åã«åœ±é¿ãäžããŸããäŸãã°ãéåžžã«é·ãåéä¿¡ã¿ã€ããŒã¯ããŠãŒã¶ãŒãããã ãããå®å šãªãã°ã€ã³ããã»ã¹ãå®å šã«æŸæ£ãããå¯èœæ§ããããŸãã
- ãªã¹ã¯è»œæžïŒãµãŒããŒãµã€ãã®æå¹æéãçãããïŒäŸïŒ3åïŒããšã§ãã³ãŒãã䟵害ããåŸã§äœ¿çšããããªã¹ã¯ãæå°éã«æããŸãã
- ãã«ãŒããã©ãŒã¹æ»æã®é²æ¢ïŒãµãŒããŒã¯OTPçæãšæ€èšŒè©Šè¡ã«å¯Ÿããã¬ãŒããªããããåŠçãã¹ãã§ããããããããŸãèšèšãããããã³ããšã³ãã®ã¯ãŒã«ããŠã³ã¯ãæªæã®ããã¹ã¯ãªãããããã ã£ããŠãŒã¶ãŒãSMSã²ãŒããŠã§ã€ã«æ®ºå°ããã®ãé²ã第äžã®é²è¡ç·ãšããŠæ©èœããŸãã
2. ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒUXïŒã®èгç¹
ãŠãŒã¶ãŒã«ãšã£ãŠãOTPããã»ã¹ã¯ããŒãã«ã§ããã€ãŸããç®æšãéæããåã«å¿ èŠãªé å»¶ã§ããç§ãã¡ã®ä»äºã¯ããã®ããŒãã«ãã§ããã ãäœãããããšã§ãã
- åŸ ã€ããšã®äžå®ïŒãŠãŒã¶ãŒããã³ãŒããéä¿¡ããã¯ãªãã¯ãããšãå¿ã®äžã§æèšãåãå§ããŸããããSMSã圌ãã®èªèãããéåžžãã®æéæ ïŒãã°ãã°æ°ç§ïŒå ã«å°çããªããšã圌ãã¯äžå®ãæãå§ããŸããçªå·ãæ£ããå ¥åããã ãããïŒãµãŒãã¹ã¯ããŠã³ããŠããã®ã ãããïŒ
- æ©ãããåéä¿¡ïŒåéä¿¡ãã¿ã³ãæ©ãããã¿ã€ãã³ã°ã§å©çšå¯èœã«ãªããšïŒäŸïŒ15ç§åŸïŒãå€ãã®ãŠãŒã¶ãŒã¯åå°çã«ãããã¯ãªãã¯ããŠããŸããŸããããã«ãããè€æ°ã®OTPãåä¿¡ããã©ããææ°ã§æå¹ãªãã®ãããããªããªããšããæ··ä¹±ããç¶æ³ã«ã€ãªããå¯èœæ§ããããŸãã
- 匷å¶çã«åŸ ããããããšãžã®äžæºïŒéã«ãã¯ãŒã«ããŠã³ãé·ãããå ŽåïŒäŸïŒ2åïŒããããŠSMSãæ¬åœã«å±ããªãã£ãå ŽåããŠãŒã¶ãŒã¯ç¡åæãšäžæºãæããªãããç¡å¹åããããã¿ã³ãèŠã€ããããšã«ãªããŸãã
3. ã°ããŒãã«ãªçŸå®ã®èгç¹
ããã¯ããã°ãã°æ¥ç¶ç°å¢ã®æŽã£ãéœåžäžå¿éšã«æ ç¹ã眮ãå€ãã®éçºããŒã ãèŠèœãšããã¡ãªå€æ°ã§ããSMSé ä¿¡ã¯ãäžççã«åäžã§ç¬æã«è¡ããããµãŒãã¹ã§ã¯ãããŸããã
- ãããã¯ãŒã¯é å»¶ïŒé ä¿¡æéã¯åçã«ç°ãªãããšããããŸããSMSãéåœã§é ä¿¡ãããã®ã«5ç§ãã€ã³ãã®èŸ²æéšã§30ç§ãåç±³ãã¢ããªã«ã®äžéšã§ã¯1å以äžãããããšããããŸããç¹ã«ãããã¯ãŒã¯ãæ··éããŠããæé垯ã¯ããã§ããããªãã®ã¿ã€ã ã¢ãŠãã¯ãæéã®ãããã¯ãŒã¯ã®ãŠãŒã¶ãŒã ãã§ãªããæãé ããããã¯ãŒã¯ã®ãŠãŒã¶ãŒã«ã察å¿ã§ããªããã°ãªããŸããã
- ãã£ãªã¢ã®ä¿¡é Œæ§ãšããã©ãã¯ããŒã«ãïŒæã ãSMSã¡ãã»ãŒãžã¯åã«æ¶ããŠããŸããŸããã²ãŒããŠã§ã€ãåºããã®ã®ããã£ãªã¢ã®ãã£ã«ã¿ãªã³ã°ãåä¿¡ããã¯ã¹ã®æºæ¯ããã®ä»ã®äžå¯è§£ãªãããã¯ãŒã¯ã®åé¡ã«ããããŠãŒã¶ãŒã®ããã€ã¹ã«å±ããªãããšããããŸãããŠãŒã¶ãŒã¯ãæ°žé ã«åŸ ã€ããšãªããã®ã·ããªãªããå埩ããæ¹æ³ãå¿ èŠãšããŠããŸãã
- ãŠãŒã¶ãŒã®ç¶æ³ãšæ³šææ£æŒ«ïŒãŠãŒã¶ãŒã¯åžžã«ã¹ããŒããã©ã³ã«éä»ãã«ãªã£ãŠããããã§ã¯ãããŸãããé転äžãæçäžããããã¯é»è©±ãå¥ã®éšå±ã«ãããããããŸãããã¿ã€ã ã¢ãŠãã¯ããŠãŒã¶ãŒãç¶æ³ãåãæ¿ããããã€ã¹ãèŠã€ããã¡ãã»ãŒãžãèªãããã®ååãªãããã¡ãæäŸããå¿ èŠããããŸãã
ãã³ãŒããåéä¿¡ãã¯ãŒã«ããŠã³ãèšå®ããããã®ãã¹ããã©ã¯ãã£ã¹
ãããã®ç«¶åããèŠå ãèæ ®ããŠãå ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªããã³ããšã³ãã¿ã€ããŒãèšå®ããããã®å®è·µçãªãã¹ããã©ã¯ãã£ã¹ã確ç«ããŸãããã
60ç§ã«ãŒã«ïŒè³¢æãªåºçºç¹
ã°ããŒãã«ãªã¢ããªã±ãŒã·ã§ã³ã®å Žåãæåã®ãåéä¿¡ããªã¯ãšã¹ãã«å¯ŸããŠ60ç§ã®ã¯ãŒã«ããŠã³ã¿ã€ããŒããå§ããã®ããåºãåãå ¥ããããŠãã广çãªåºæºã§ãããªã60ç§ãªã®ã§ããããïŒ
- ä¿¡é Œæ§ã®äœããããã¯ãŒã¯äžã§ãã£ãŠããäžçäžã®SMSé ä¿¡é å»¶ã®å€§éšåãã«ããŒããã®ã«ååãªé·ãã§ãã
- åŸ ã£ãŠãããŠãŒã¶ãŒã«ãšã£ãŠæ°žé ã®ããã«æããããªãçšåºŠã«çãé·ãã§ãã
- ãŠãŒã¶ãŒã«æåã®ã¡ãã»ãŒãžãåŸ ã€ãã匷ãä¿ããè€æ°ã®æ··ä¹±ãæãOTPãããªã¬ãŒããå¯èœæ§ãæžãããŸãã
ã€ã³ãã©ãåªããåžå Žã§ã¯30ç§ãé åçã«èŠãããããããŸããããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠã¯æä»çã«ãªãå¯èœæ§ããããŸãã60ç§ããå§ããããšã¯ãä¿¡é Œæ§ãåªå ããå æ¬çãªã¢ãããŒãã§ãã
ããã°ã¬ãã·ãã¿ã€ã ã¢ãŠãïŒãšã¯ã¹ããã³ã·ã£ã«ããã¯ãªãïŒã®å®è£
äžåºŠãåéä¿¡ããã¯ãªãã¯ãããŠãŒã¶ãŒã¯ãã£ãã¡ãããããŸãããè€æ°åã¯ãªãã¯ããå¿ èŠããããŠãŒã¶ãŒã¯ãæ¬ç©ã®é ä¿¡åé¡ãæ±ããŠããå¯èœæ§ãé«ãã§ããããã°ã¬ãã·ãã¿ã€ã ã¢ãŠãæŠç¥ãå¥åãšã¯ã¹ããã³ã·ã£ã«ããã¯ãªãã¯ããã®éããå°éããŸãã
ãã®ã¢ã€ãã¢ã¯ãåéä¿¡ãªã¯ãšã¹ãã®ãã³ã«ã¯ãŒã«ããŠã³æéãé·ãããããšã§ããããã¯2ã€ã®ç®çãæãããŸãããŠãŒã¶ãŒã«ä»ã®éžæè¢ãæ€èšããããç©ããã«ä¿ããããªãã®ãµãŒãã¹ïŒãããŠããªãã®è²¡åžïŒãã¹ãã ãããã®ãé²ããŸãã
ããã°ã¬ãã·ãã¿ã€ã ã¢ãŠãæŠç¥ã®äŸïŒ
- æåã®åéä¿¡ïŒ60ç§åŸã«å©çšå¯èœã
- 2åç®ã®åéä¿¡ïŒ90ç§åŸã«å©çšå¯èœã
- 3åç®ã®åéä¿¡ïŒ120ç§åŸã«å©çšå¯èœã
- 3åç®ã®åéä¿¡åŸïŒããŸã åé¡ããããŸããïŒå¥ã®èªèšŒæ¹æ³ã詊ããããµããŒãã«ãåãåãããã ãããã®ãããªã¡ãã»ãŒãžã衚瀺ããŸãã
ãã®ã¢ãããŒãã¯ããŠãŒã¶ãŒã®æåŸ ã管çãããªãœãŒã¹ïŒSMSã¡ãã»ãŒãžã¯ç¡æã§ã¯ãããŸããïŒãç¯çŽããæ¬åœã«å°ã£ãŠãããŠãŒã¶ãŒã«åªé ãªåºå£ãæäŸããŸãã
æç¢ºãã€ç©æ¥µçã«äŒãã
ã¿ã€ããŒãåãå·»ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã¯ãã¿ã€ããŒèªäœã®æéãšåããããéèŠã§ãããŠãŒã¶ãŒãæéã®äžã«æŸçœ®ããªãã§ãã ããã
- æç¢ºã«è¿°ã¹ãïŒæåã®ãªã¯ãšã¹ãã®åŸãããã«è¡åã確èªããŸããäžè¬çãªãã³ãŒããéä¿¡ããŸãããã§ã¯ãªãããã説æçãªããã¹ãã䜿çšããŸãïŒã+XX-XXXXXX-XX12ã«6æ¡ã®ã³ãŒããéä¿¡ããŸãããå°çãŸã§æå€§1åãããããšããããŸãããããã«ãããæåããçŸå®çãªæåŸ ãèšå®ããŸãã
- ç®ã«èŠããã«ãŠã³ãããŠã³ã衚瀺ããïŒæãéèŠãªUIèŠçŽ ã¯ãç®ã«èŠããã¿ã€ããŒã§ããç¡å¹åããããåéä¿¡ããã¿ã³ãããããš0:59ã§ã³ãŒããåéä¿¡ãã®ãããªã¡ãã»ãŒãžã«çœ®ãæããŸãããã®èŠèŠçãªãã£ãŒãããã¯ã¯ãã·ã¹ãã ãæ©èœããŠããããšããŠãŒã¶ãŒã«ä¿èšŒããæç¢ºã§å ·äœçãªæéæ ãäžããäžå®ãå€§å¹ ã«è»œæžããŸãã
- é©åãªã¿ã€ãã³ã°ã§ä»£æ¿æ¡ãæäŸããïŒæåãã5ã€ã®èªèšŒãªãã·ã§ã³ã§ãŠãŒã¶ãŒãå§åããªãã§ãã ãããä»£æ¿æ¡ïŒäŸïŒãé³å£°é話ã§ã³ãŒããåãåããããã¡ãŒã«ã«ã³ãŒããéä¿¡ãïŒã¯ãæåãŸãã¯2åç®ã®SMSåé信詊è¡ã®åŸã«ã®ã¿å°å ¥ããŸããããã«ãããå¿ èŠãªäººã®ããã®ãã©ãŒã«ããã¯ãªãã·ã§ã³ãåãããã¯ãªãŒã³ã§çŠç¹ã®åã£ãåæäœéšãçãŸããŸãã
æè¡çå®è£ ïŒããã³ããšã³ãã®ã³ãŒãäŸ
ãã®æ©èœãã©ã®ããã«æ§ç¯ãããèŠãŠãããŸãããããã¬ãŒã ã¯ãŒã¯ã«äŸåããªãããã©JavaScriptã®äŸããå§ãããšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããææ°ã®ãã©ãŠã¶APIã«ã€ããŠè°è«ããã¢ã¯ã»ã·ããªãã£ã«ãè§ŠããŸãã
ããã©JavaScriptã§ã®åºæ¬çãªã«ãŠã³ãããŠã³ã¿ã€ããŒ
ãã®äŸã¯ãã«ãŠã³ãããŠã³ã¿ã€ããŒã®ç¶æ ã管çããããã«å¿ããŠUIãæŽæ°ããæ¹æ³ã瀺ããŠããŸãã
```htmlèªèšŒã³ãŒããå ¥åããŠãã ãã
ã䜿ãã®æºåž¯é»è©±ã«ã³ãŒããéä¿¡ããŸããã以äžã«å ¥åããŠãã ããã
ã³ãŒããå±ããŸãããïŒ
ãã®ã·ã³ãã«ãªã¹ã¯ãªããã¯ãã³ã¢æ©èœãæäŸããŸããããã°ã¬ãã·ãã¿ã€ã ã¢ãŠãããžãã¯ãå®è£ ããããã«ãåé信詊è¡åæ°ã倿°ã§è¿œè·¡ããããšã§ãããæ¡åŒµããŸãã
ã²ãŒã ãã§ã³ãžã£ãŒïŒWebOTP API
æåã§ã¡ãã»ãŒãžã確èªããã³ãŒããã³ããŒïŒããŒã¹ãããã®ã¯æ©æŠç¹ã§ããææ°ã®ãã©ãŠã¶ã¯åŒ·åãªè§£æ±ºçãæäŸããŸãïŒWebOTP APIã§ãããã®APIã«ãããWebã¢ããªã±ãŒã·ã§ã³ã¯ãŠãŒã¶ãŒã®åæãåŸãŠSMSã¡ãã»ãŒãžããOTPãããã°ã©ã ã§åä¿¡ãããã©ãŒã ã«èªåå ¥åããããšãã§ããŸããããã«ãããã»ãŒãã€ãã£ãã¢ããªã®ãããªäœéšãçãŸããŸãã
ä»çµã¿ïŒ
- SMSã¡ãã»ãŒãžã¯ç¹å¥ã«ãã©ãŒããããããŠããå¿
èŠããããŸããæåŸã«Webã¢ããªã±ãŒã·ã§ã³ã®ãªãªãžã³ãå«ããå¿
èŠããããŸããäŸïŒ
èªèšŒã³ãŒãã¯123456ã§ãã @www.your-app.com #123456 - ããã³ããšã³ãã§ã¯ãJavaScriptã䜿çšããŠOTPããªãã¹ã³ããŸãã
以äžã¯ãç¬èªã®ã¿ã€ã ã¢ãŠãæ©èœãå«ãå®è£ æ¹æ³ã§ãïŒ
```javascript async function listenForOTP() { if ('OTPCredential' in window) { console.log('WebOTP APIã¯ãµããŒããããŠããŸãã'); try { const abortController = new AbortController(); // APIèªäœã«ã¿ã€ã ã¢ãŠããèšå®ããŸãã // 2å以å ã«æ£ãããã©ãŒããããããSMSãå°çããªãå Žåãäžæ¢ãããŸãã setTimeout(() => { abortController.abort(); }, 2 * 60 * 1000); const otpCredential = await navigator.credentials.get({ otp: { transport: ['sms'] }, signal: abortController.signal }); if (otpCredential && otpCredential.code) { const otpCode = otpCredential.code; document.getElementById('otpInput').value = otpCode; // ãªãã·ã§ã³ã§ãããã§ãã©ãŒã ãèªåéä¿¡ã§ããŸãã console.log('OTPãèªåçã«åä¿¡ãããŸããïŒ', otpCode); document.getElementById('verifyButton').click(); } else { console.log('OTPã¯ã¬ãã³ã·ã£ã«ã¯åä¿¡ãããŸãããã空ã§ããã'); } } catch (err) { console.error('WebOTP APIãšã©ãŒïŒ', err); } } } // OTPããŒãžãèªã¿èŸŒãŸãããšãã«ãã®é¢æ°ãåŒã³åºããŸã listenForOTP(); ```éèŠãªæ³šæïŒWebOTP APIã¯çŽ æŽãããæ©èœåŒ·åã§ãããæåãããŒã®ä»£æ¿ã§ã¯ãããŸãããAPIããµããŒãããŠããªããã©ãŠã¶ããèªåååŸã倱æããå Žåã®ããã«ãåžžã«æåå ¥åãã£ãŒã«ããšãåéä¿¡ãã¿ã€ããŒããã©ãŒã«ããã¯ãšããŠæäŸãã¹ãã§ãã
ã°ããŒãã«ãªãŠãŒã¶ãŒã®ããã®é«åºŠãªèæ ®äºé
çã«ã¯ãŒã«ãã¯ã©ã¹ã®OTPã·ã¹ãã ãæ§ç¯ããããã«ã¯ãåçŽãªã¿ã€ããŒãè¶ ããããã€ãã®é«åºŠãªãããã¯ãèæ ®ããå¿ èŠããããŸãã
åçã¿ã€ã ã¢ãŠãïŒé åçã ãåä»ãªã¢ã€ãã¢
IPãžãªãã±ãŒã·ã§ã³ã䜿çšããŠãæ¢ç¥ã®é«éãããã¯ãŒã¯ãæã€åœã®ãŠãŒã¶ãŒã«ã¯çãã¿ã€ã ã¢ãŠããèšå®ããä»ã®åœã§ã¯é·ãã¿ã€ã ã¢ãŠããèšå®ãããšããèªæã«é§ããããããããŸãããçè«çã«ã¯è³¢ãã§ããããã®ã¢ãããŒãã¯ãã°ãã°åé¡ã ããã§ãïŒ
- äžæ£ç¢ºãªãžãªãã±ãŒã·ã§ã³ïŒIPããŒã¹ã®äœçœ®æ å ±ã¯ä¿¡é Œã§ããªãããšããããŸããVPNããããã·ãäŒæ¥ãããã¯ãŒã¯ã¯ããŠãŒã¶ãŒã®å®éã®äœçœ®ãå®å šã«èª€ã£ãŠè¡šçŸããå¯èœæ§ããããŸãã
- ãã¯ããªå°åå·®ïŒãããã¯ãŒã¯å質ã¯ã2ã€ã®ç°ãªãåœéãããã1ã€ã®å€§ããªåœå ã§ãã倧ããå€åããå¯èœæ§ããããŸããç±³åœã®èŸ²æéšã®ãŠãŒã¶ãŒã¯ãã ã³ãã€ã®éœåžéšã®ãŠãŒã¶ãŒãããæ¥ç¶æ§ãæªããããããŸããã
- ã¡ã³ããã³ã¹ã®ãªãŒããŒãããïŒããã¯ãåžžã«æŽæ°ãšã¡ã³ããã³ã¹ãå¿ èŠãšãããè€éã§è匱ãªã·ã¹ãã ãäœãåºããŸãã
æšå¥šïŒã»ãšãã©ã®ã¢ããªã±ãŒã·ã§ã³ã§ã¯ã誰ã«ã§ãæ©èœããæ®éçã§å¯å€§ãªã¿ã€ã ã¢ãŠãïŒç§ãã¡ã®60ç§ã®ããŒã¹ã©ã€ã³ã®ãããªïŒã«åºå·ããæ¹ããã¯ããã«å ç¢ã§ã·ã³ãã«ã§ãã
ã¢ã¯ã»ã·ããªãã£ïŒa11yïŒã¯è²ããªãæ¡ä»¶
ã¹ã¯ãªãŒã³ãªãŒããŒã«é Œã£ãŠãããŠãŒã¶ãŒã¯ãOTPãã©ãŒã ã®ç¶æ ãçè§£ããå¿ èŠããããŸããå®è£ ãã¢ã¯ã»ã·ãã«ã§ããããšã確èªããŠãã ããïŒ
- åçãªå€æŽãã¢ããŠã³ã¹ããïŒã¿ã€ããŒãéå§ãæŽæ°ãçµäºãããšãããã®å€æŽã¯æ¯æŽæè¡ã«ã¢ããŠã³ã¹ãããã¹ãã§ããããã¯`aria-live`ãªãŒãžã§ã³ã䜿çšããããšã§å®çŸã§ããŸããJavaScriptãããã¹ãããããš45ç§ã§ã³ãŒããåéä¿¡ãã«æŽæ°ãããšãã¹ã¯ãªãŒã³ãªãŒããŒããããèªã¿äžããŸãã
- æç¢ºãªãã¿ã³ã®ç¶æ ïŒãåéä¿¡ããã¿ã³ã¯æç¢ºãªãã©ãŒã«ã¹ç¶æ ãæã¡ã`aria-disabled`ã®ãããªARIA屿§ã䜿çšããŠãã®ç¶æ ãããã°ã©ã ã§äŒããã¹ãã§ãã
- ã¢ã¯ã»ã·ãã«ãªå ¥åïŒOTPå ¥åãã£ãŒã«ããæ£ããã©ãã«ä»ããããŠããããšã確èªããŠãã ãããåäžã®å ¥åã䜿çšããå Žåã`autocomplete="one-time-code"`ã¯ãã¹ã¯ãŒããããŒãžã£ãŒããã©ãŠã¶ãã³ãŒããèªåå ¥åããã®ã«åœ¹ç«ã¡ãŸãã
ãµãŒããŒãµã€ãåæã«é¢ããéèŠãªæ³šæç¹
ããã³ããšã³ãã®ã¿ã€ããŒã¯UXã®åäžæ©èœã§ãããã»ãã¥ãªãã£æ©èœã§ã¯ãªãããšãèŠããŠããããšãéèŠã§ããOTPã®æå¹æ§ã«é¢ããçã®æ å ±æºã¯ãåžžã«ããªãã®ããã¯ãšã³ãã§ãã
ããã³ããšã³ããšããã¯ãšã³ãã®ããžãã¯ã調åããŠããããšã確èªããŠãã ãããäŸãã°ãããã¯ãšã³ãã®OTPã3åéããæå¹ã§ãªãå Žåã4ååŸã«å§ãŸã3åç®ã®ããã³ããšã³ãã®åéä¿¡ã¯ãŒã«ããŠã³ãæã€ã®ã¯ãæªããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãªããŸãããŠãŒã¶ãŒã¯æçµçã«æ°ããã³ãŒãããªã¯ãšã¹ãã§ããããã«ãªããŸããã以åã®ã³ãŒãã¯ãšã£ãã«æéåãã«ãªã£ãŠããŸããè¯ãçµéšåã¯ãããã°ã¬ãã·ãã¯ãŒã«ããŠã³ã·ãŒã±ã³ã¹å šäœãããµãŒããŒã®OTPæå¹æéå ã«äœè£ããã£ãŠå®äºã§ããããã«ããããšã§ãã
ãŸãšãïŒæšå¥šæŠç¥ãã§ãã¯ãªã¹ã
ç§ãã¡ã®èª¿æ»çµæãããããããããžã§ã¯ãã®ããã®å®è·µçã§å®è¡å¯èœãªæŠç¥ã«ãŸãšããŸãããã
- è³¢æãªããŒã¹ã©ã€ã³ãèšå®ããïŒæåã®åéä¿¡ãªã¯ãšã¹ãã«ã¯60ç§ã®ã¯ãŒã«ããŠã³ããå§ããŸãããããã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªã·ã¹ãã ã®åºç€ã§ãã
- ããã°ã¬ãã·ãããã¯ãªããå®è£ ããïŒåŸç¶ã®åéä¿¡ã®ã¯ãŒã«ããŠã³ãé·ããïŒäŸïŒ60ç§ â 90ç§ â 120ç§ïŒããŠãŒã¶ãŒã®è¡åã管çããã³ã¹ããå¶åŸ¡ããŸãã
- ã³ãã¥ãã±ãŒã·ã§ã³è±ããªUIãæ§ç¯ããïŒ
- ã³ãŒããéä¿¡ãããããšãããã«ç¢ºèªããŸãã
- æç¢ºã§ç®ã«èŠããã«ãŠã³ãããŠã³ã¿ã€ããŒã衚瀺ããŸãã
- é©åãªã©ãã«ãšARIA屿§ã§ãã¿ã³ãšãªã³ã¯ãã¢ã¯ã»ã·ãã«ã«ããŸãã
- ææ°ã®APIãæŽ»çšããïŒWebOTP APIãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããšããŠäœ¿çšãããµããŒããããŠãããã©ãŠã¶ã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªèªåå ¥åäœéšãæäŸããŸãã
- åžžã«ãã©ãŒã«ããã¯ãæäŸããïŒãã©ãŠã¶ã®ãµããŒãã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«å¯ŸããŠæåå ¥åãã£ãŒã«ããšåéä¿¡ã¿ã€ããŒãå®ç§ã«æ©èœããããšã確èªããŸãã
- 代æ¿ãã¹ãæäŸããïŒ1åãŸãã¯2åã®SMS詊è¡ã倱æããåŸãã¡ãŒã«ãé³å£°é話ãèªèšŒã¢ããªãªã©ã®ä»ã®æ€èšŒæ¹æ³ãåªé ã«å°å ¥ããŸãã
- ããã¯ãšã³ããšé£æºããïŒããã¯ãšã³ãããŒã ãšé£æºããããã³ããšã³ãã®ã¿ã€ã ã¢ãŠãããžãã¯ããµãŒããŒãµã€ãã®OTPæå¹æéïŒäŸïŒæå€§3ã4åããããããŒã«å¯ŸããŠ5åã®ãµãŒããŒæå¹æéïŒå ã«åååãŸãããã«ããŸãã
çµè«ïŒå¹³å¡ãªãã®ãåè¶ãããã®ãž
SMS OTPã¿ã€ã ã¢ãŠãã®èšå®ã¯ãèŠéããããã¡ãªè©³çްã§ããããã°ãã°åå£å Žã®æ±ºå®ãããŒãã³ãŒããããããã©ã«ãå€ã«å§ããããŸãããããããããŸã§èŠãŠããããã«ããã®åäžã®èšå®ã¯ã»ãã¥ãªãã£ããŠãŒã¶ããªãã£ãããã³ã°ããŒãã«ãªããã©ãŒãã³ã¹ã®éèŠãªçµç¯ç¹ã§ããããã¯ãã·ãŒã ã¬ã¹ãªãã°ã€ã³ã§ãŠãŒã¶ãŒãåã°ããåãããã°ããµãŒãã¹ãæŸæ£ãããã»ã©ã«ãŠãŒã¶ãŒãèç«ãããåãæã£ãŠããŸãã
ç»äžçãªã¢ãããŒããè¶ ããããã°ã¬ãã·ãã¯ãŒã«ããŠã³ãæç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ããããŠææ°ã®APIãåãå ¥ãããææ ®æ·±ãå ±æçãªæŠç¥ãæ¡çšããããšã§ãç§ãã¡ã¯ãã®å¹³å¡ãªã¹ãããããŠãŒã¶ãŒãžã£ãŒããŒã«ãããåè¶ããç¬éã«å€ããããšãã§ããŸããç«¶äºã®æ¿ããã°ããŒãã«åžå Žã«ãããŠãä¿¡é Œãç¯ããæ©æŠãæžããããšã¯æãéèŠã§ããããŸãèšèšãããOTPãããŒã¯ãããªãããŠãŒã¶ãŒã®æéãå°éãã圌ãã®ç¶æ³ãçè§£ããçã«ã¯ãŒã«ãã¯ã©ã¹ã®äœéšã1ç§1ç§æäŸããããšã«å°œåããŠãããšããæç¢ºãªã·ã°ãã«ããŠãŒã¶ãŒã«éããŸãã