git-test/index.html at master · nironix/git-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>@nironix.github.io/ #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>
<input type="text" autocomplete="one-time-code" inputmode="numeric" />
<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();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}
</script>
    </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();
          });
        }
        navigator.credentials.get({
          otp: { transport:['sms'] },
          signal: ac.signal
        }).then(otp => {
          input.value = otp.code;
          if (form) form.submit();
        }).catch(err => {
          console.log(err);
        });
      });
    } else {
        alert('WebOTP not supported!.')
    }
    </script>
  </body>
</html>