Skip to content

Commit 89d0739

Browse files
quantum5quantum5
committed
Add python sample code for TOTP digest to code conversion
1 parent d6caf6a commit 89d0739

File tree

3 files changed

+115
-1
lines changed

3 files changed

+115
-1
lines changed

‎index.html

+27-1
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,35 @@ <h3 class="card-title" id="how-does-it-work">How does TOTP work?</h3>
124124
and finally
125125
</li>
126126
<li>Compute the code as <img class="math" src="math/mod.svg" alt="y \bmod{10^d}" height="18"
127-
style="vertical-align: -3px">.
127+
style="vertical-align: -3px">, zero-padded to <var>d</var> digits.
128128
</li>
129129
</ol>
130+
<p class="card-text">Express as Python code, the last 3 steps would look like:</p>
131+
<pre class="highlight"><code><span class="n">i</span> <span class="o">=</span> <span class="n">h</span><span
132+
class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&amp;</span> <span
133+
class="mh">0xF</span>
134+
<span class="n">y</span> <span class="o">=</span> <span class="p">(</span>
135+
<span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
136+
class="o">+</span> <span class="mi">0</span><span class="p">]</span> <span class="o">&amp;</span> <span
137+
class="mh">0x7F</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span
138+
class="mi">24</span> <span class="o">|</span>
139+
<span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
140+
class="o">+</span> <span class="mi">1</span><span class="p">]</span> <span class="o">&amp;</span> <span
141+
class="mh">0xFF</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span
142+
class="mi">16</span> <span class="o">|</span>
143+
<span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
144+
class="o">+</span> <span class="mi">2</span><span class="p">]</span> <span class="o">&amp;</span> <span
145+
class="mh">0xFF</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span class="mi">8</span> <span
146+
class="o">|</span>
147+
<span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
148+
class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">&amp;</span> <span
149+
class="mh">0xFF</span><span class="p">)</span>
150+
<span class="p">)</span>
151+
<span class="n">code</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">y</span> <span
152+
class="o">%</span> <span class="mi">10</span><span class="o">**</span><span class="n">d</span><span class="p">)</span><span
153+
class="o">.</span><span class="n">rjust</span><span class="p">(</span><span class="n">d</span><span class="p">,</span> <span
154+
class="s1">'0'</span><span class="p">)</span>
155+
</code></pre>
130156
<p class="card-text">To avoid clock synchronization issues, most implementations will accept TOTP codes from the
131157
window before and after the one based on the current time. This tool lets you see the previous and next codes to
132158
help you debug.</p>

‎src/code.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.highlight {
2+
background: #f8f8f8;
3+
4+
.hll { background-color: #ffffcc }
5+
.c { color: #8f5902; font-style: italic } /* Comment */
6+
.err { color: #a40000; border: 1px solid #ef2929 } /* Error */
7+
.g { color: #000000 } /* Generic */
8+
.k { color: #204a87; font-weight: bold } /* Keyword */
9+
.l { color: #000000 } /* Literal */
10+
.n { color: #000000 } /* Name */
11+
.o { color: #ce5c00; font-weight: bold } /* Operator */
12+
.x { color: #000000 } /* Other */
13+
.p { color: #000000; font-weight: bold } /* Punctuation */
14+
.ch { color: #8f5902; font-style: italic } /* Comment.Hashbang */
15+
.cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
16+
.cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
17+
.cpf { color: #8f5902; font-style: italic } /* Comment.PreprocFile */
18+
.c1 { color: #8f5902; font-style: italic } /* Comment.Single */
19+
.cs { color: #8f5902; font-style: italic } /* Comment.Special */
20+
.gd { color: #a40000 } /* Generic.Deleted */
21+
.ge { color: #000000; font-style: italic } /* Generic.Emph */
22+
.gr { color: #ef2929 } /* Generic.Error */
23+
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
24+
.gi { color: #00A000 } /* Generic.Inserted */
25+
.go { color: #000000; font-style: italic } /* Generic.Output */
26+
.gp { color: #8f5902 } /* Generic.Prompt */
27+
.gs { color: #000000; font-weight: bold } /* Generic.Strong */
28+
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
29+
.gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
30+
.kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
31+
.kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
32+
.kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
33+
.kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
34+
.kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
35+
.kt { color: #204a87; font-weight: bold } /* Keyword.Type */
36+
.ld { color: #000000 } /* Literal.Date */
37+
.m { color: #0000cf; font-weight: bold } /* Literal.Number */
38+
.s { color: #4e9a06 } /* Literal.String */
39+
.na { color: #c4a000 } /* Name.Attribute */
40+
.nb { color: #204a87 } /* Name.Builtin */
41+
.nc { color: #000000 } /* Name.Class */
42+
.no { color: #000000 } /* Name.Constant */
43+
.nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
44+
.ni { color: #ce5c00 } /* Name.Entity */
45+
.ne { color: #cc0000; font-weight: bold } /* Name.Exception */
46+
.nf { color: #000000 } /* Name.Function */
47+
.nl { color: #f57900 } /* Name.Label */
48+
.nn { color: #000000 } /* Name.Namespace */
49+
.nx { color: #000000 } /* Name.Other */
50+
.py { color: #000000 } /* Name.Property */
51+
.nt { color: #204a87; font-weight: bold } /* Name.Tag */
52+
.nv { color: #000000 } /* Name.Variable */
53+
.ow { color: #204a87; font-weight: bold } /* Operator.Word */
54+
.w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
55+
.mb { color: #0000cf; font-weight: bold } /* Literal.Number.Bin */
56+
.mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
57+
.mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
58+
.mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
59+
.mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
60+
.sa { color: #4e9a06 } /* Literal.String.Affix */
61+
.sb { color: #4e9a06 } /* Literal.String.Backtick */
62+
.sc { color: #4e9a06 } /* Literal.String.Char */
63+
.dl { color: #4e9a06 } /* Literal.String.Delimiter */
64+
.sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
65+
.s2 { color: #4e9a06 } /* Literal.String.Double */
66+
.se { color: #4e9a06 } /* Literal.String.Escape */
67+
.sh { color: #4e9a06 } /* Literal.String.Heredoc */
68+
.si { color: #4e9a06 } /* Literal.String.Interpol */
69+
.sx { color: #4e9a06 } /* Literal.String.Other */
70+
.sr { color: #4e9a06 } /* Literal.String.Regex */
71+
.s1 { color: #4e9a06 } /* Literal.String.Single */
72+
.ss { color: #4e9a06 } /* Literal.String.Symbol */
73+
.bp { color: #3465a4 } /* Name.Builtin.Pseudo */
74+
.fm { color: #000000 } /* Name.Function.Magic */
75+
.vc { color: #000000 } /* Name.Variable.Class */
76+
.vg { color: #000000 } /* Name.Variable.Global */
77+
.vi { color: #000000 } /* Name.Variable.Instance */
78+
.vm { color: #000000 } /* Name.Variable.Magic */
79+
.il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
80+
}

‎src/index.scss

+8
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
@import 'bootstrap/scss/_popover.scss';
2121
@import 'bootstrap/scss/_card.scss';
2222

23+
@import './code';
24+
2325
body {
2426
padding-top: $spacer * 4;
2527
}
@@ -131,6 +133,12 @@ h3.card-title {
131133
scroll-margin-top: $spacer * 5;
132134
}
133135

136+
pre.highlight {
137+
display: block;
138+
padding: $spacer;
139+
border-radius: $border-radius;
140+
}
141+
134142
.footer {
135143
margin-top: $spacer;
136144
background: $body-tertiary-bg;

0 commit comments

Comments
 (0)