一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    移动端(h5)自动填充短信验证码

    技术 629 2021-04-26 15:31

    需求:手机验证码登录,手机收到验证码后,

    验证码自动填充到我们的h5移动端页面上(不是原生Android),

    需要1.chrome浏览器版本86以上,2.有hppts域名证书的网站

    具体实现代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Web OTP API Simplest</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
          div {
            font-family: sans-serif;
          }
        </style>
      </head>
      <body>
        <h1>The simplest Web OTP API demo</h1>
        <div>
          Send an SMS that includes
          <pre><code>@web-otp.glitch.me #12345</code></pre>
          at the last line to this phone.
        </div>
        <div style="border:1px solid; padding: 5px; 10px; margin: 10px 0;">
          <form action="/post" method="post">
            Enter OTP here:
            <input
              type="text"
              autocomplete="one-time-code"
              inputmode="numeric"
              name="one-time-code"
            />
            <input type="submit" value="Submit" />
          </form>
        </div>
        <pre><code>
    &lt;input type="text" autocomplete="one-time-code" inputmode="numeric" /&gt;
    &lt;script&gt;
    if ('OTPCredential' in window) {
      window.addEventListener('DOMContentLoaded', e =&gt; {
        const input = document.querySelector('input[autocomplete="one-time-code"]');
        if (!input) return;
        const ac = new AbortController();
        const form = input.closest('form');
        if (form) {
          form.addEventListener('submit', e =&gt; {
            ac.abort();
          });
        }
        navigator.credentials.get({
          otp: { transport:['sms'] },
          signal: ac.signal
        }).then(otp =&gt; {
          input.value = otp.code;
          if (form) form.submit();
        }).catch(err =&gt; {
          console.log(err);
        });
      });
    }
    &lt;/script&gt;
        </code></pre>
        <div>
          See the source code and play with it at
          <a href="https://glitch.com/edit/#!/web-otp"
            >https://glitch.com/edit/#!/web-otp</a
          >
        </div>
        <div>
          Learn more at <a href="http://web.dev/web-otp">http://web.dev/web-otp</a>.
        </div>
        <script>
          if ("OTPCredential" in window) {
            window.addEventListener("DOMContentLoaded", (e) => {
              const input = document.querySelector(
                'input[autocomplete="one-time-code"]'
              );
              if (!input) return;
              const ac = new AbortController();
              const form = input.closest("form");
              if (form) {
                form.addEventListener("submit", (e) => {
                  ac.abort();
                });
              }
              alert(JSON.stringify(ac));
              navigator.credentials
                .get({
                  otp: { transport: ["sms"] },
                  signal: ac.signal,
                })
                .then((otp) => {
                  alert(JSON.stringify(otp));
                  input.value = otp.code;
                  if (form) form.submit();
                })
                .catch((err) => {
                  console.log(err);
                });
            });
          }
        </script>
      </body>
    </html>
    

    api文档参考:https://web.dev/web-otp/#see-it-in-action

    文章评论

    评论列表(0