tweaks

Χειροποίητο 2FA με HTML, JS και CSS

giorgos 3 λεπτά ανάγνωσης
Προσθέστε το iGuRu.gr στη Google

Γνωρίζετε σίγουρα τα 2FA που πρέπει να εισάγετε γρήγορα τον κωδικό εξουσιοδότησης από το τηλέφωνό σας πριν λήξει. Αυτό θα προσπαθήσουμε να κάνουμε παρακάτω με HTML, JS και CSS.

2fa

Μπορείτε να παίξετε για να δείτε πως λειτουργεί

Προτιμώμενη πηγή στο Google
Difficulty hard | easy

 

2FA

Αγγίξτε το μαύρο πλαίσιο να δείτε τον κωδικό: 641081

Δείτε τον κώδικα (μπορείτε να τον κατεβάσετε σαν txt αρχείο από το τέλος της δημοσίευσης)

HTML
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080"><</span><span style="color: #569CD6">input</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">type</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"range"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">min</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"100"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">max</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"2000"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"1000"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_timeout"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">style</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"margin-bottom: 20px;"</span><span style="color: #808080">><</span><span style="color: #569CD6">span</span><span style="color: #808080">></span><span style="color: #D4D4D4">Difficulty hard | easy </span><span style="color: #808080"></</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"><</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_auth_app"</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080"><</span><span style="color: #569CD6">h3</span><span style="color: #808080">></span><span style="color: #D4D4D4">2FA</span><span style="color: #808080"></</span><span style="color: #569CD6">h3</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080"><</span><span style="color: #569CD6">p</span><span style="color: #808080">></span><span style="color: #D4D4D4">Αγγίξττε το μαύρο πλαίσιο να δείτε τον κωδικό: </span><span style="color: #808080"><</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_hidden"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_code"</span><span style="color: #808080">></span><span style="color: #D4D4D4">641081</span><span style="color: #808080"></</span><span style="color: #569CD6">span</span><span style="color: #808080">></</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080"><</span><span style="color: #569CD6">progress</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_progress"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"24.8"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">max</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"100"</span><span style="color: #808080">></</span><span style="color: #569CD6">progress</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"></</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"><</span><span style="color: #569CD6">input</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"t9_input"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">type</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"text"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">placeholder</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"Enter 2FA Code"</span><span style="color: #808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"><</span><span style="color: #569CD6">style</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">                .t9_auth_app </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">display</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">flex</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">flex</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">direction</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">column</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">margin</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">bottom</span><span style="color: #D4D4D4">: 1</span><span style="color: #9CDCFE">rem</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">border</span><span style="color: #D4D4D4">: 5</span><span style="color: #9CDCFE">px</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">ridge</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">tomato</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">width</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">fit</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">content</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">padding</span><span style="color: #D4D4D4">: 1</span><span style="color: #9CDCFE">rem</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">align</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">items</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">center</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* justify-content: center; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* width: 100%; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* height: 100%; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* font-family: monospace; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* font-size: 10pt; */</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                .t9_auth_app>h6 </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">margin</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">bottom</span><span style="color: #D4D4D4">: 10</span><span style="color: #9CDCFE">px</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                .t9_auth_app>* </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">margin</span><span style="color: #D4D4D4">: 2</span><span style="color: #9CDCFE">px</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                .t9_auth_app>progress </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* align-self: center; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">/* margin-top: 10px; */</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">width</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">50</span><span style="color: #D4D4D4">%;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                .t9_hidden </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">background</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">color</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">black</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                .t9_hidden:hover </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">background</span><span style="color: #D4D4D4">-</span><span style="color: #9CDCFE">color</span><span style="color: #D4D4D4">: </span><span style="color: #9CDCFE">transparent</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"></</span><span style="color: #569CD6">style</span><span style="color: #808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"><</span><span style="color: #569CD6">script</span><span style="color: #808080">></span></span>
<span class="line"><span style="color: #D4D4D4">                // get refs</span></span>
<span class="line"><span style="color: #D4D4D4">                const t9_code = document.querySelector("#t9_code");</span></span>
<span class="line"><span style="color: #D4D4D4">                const t9_input = document.querySelector("#t9_input");</span></span>
<span class="line"><span style="color: #D4D4D4">                const t9_progress = document.querySelector("#t9_progress");</span></span>
<span class="line"><span style="color: #D4D4D4">                const t9_timeout_slider = document.querySelector("#t9_timeout");</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                let t9_timeout = t9_timeout_slider.value;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                t9_timeout_slider.addEventListener("input", () => </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">t9_timeout</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">t9_timeout_slider</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #6A9955">// document.querySelector("#t9_timeout_span").innerText = t9_timeout;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span><span style="color: #D4D4D4">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                function t9_updateCode() </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">t9_code</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">innerText</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">Math</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">floor</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">Math</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">random</span><span style="color: #D4D4D4">() * </span><span style="color: #B5CEA8">1000000</span><span style="color: #D4D4D4">).</span><span style="color: #DCDCAA">toString</span><span style="color: #D4D4D4">().</span><span style="color: #DCDCAA">padStart</span><span style="color: #D4D4D4">(</span><span style="color: #B5CEA8">6</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"0"</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">t9_progress</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4"> = </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                // update progress bar, and make the code update when the progress bar is full</span></span>
<span class="line"><span style="color: #D4D4D4">                let t9_interval;</span></span>
<span class="line"><span style="color: #D4D4D4">                t9_interval = setInterval(() => </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">t9_progress</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4"> += </span><span style="color: #B5CEA8">100</span><span style="color: #D4D4D4"> / </span><span style="color: #9CDCFE">t9_timeout</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #DCDCAA">if</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">t9_progress</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4"> >= </span><span style="color: #B5CEA8">100</span><span style="color: #D4D4D4">) {</span></span>
<span class="line"><span style="color: #D4D4D4">                        </span><span style="color: #DCDCAA">t9_updateCode</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">                    }</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span><span style="color: #D4D4D4">, 1);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                t9_updateCode();</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                // if input is correct alert</span></span>
<span class="line"><span style="color: #D4D4D4">                t9_input.addEventListener("keydown", (e) => </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #DCDCAA">if</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">e</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">key</span><span style="color: #D4D4D4"> == </span><span style="color: #CE9178">"Enter"</span><span style="color: #D4D4D4">) {</span></span>
<span class="line"><span style="color: #D4D4D4">                        </span><span style="color: #DCDCAA">if</span><span style="color: #D4D4D4"> (t9_input.value == t9_code.innerText) {</span></span>
<span class="line"><span style="color: #D4D4D4">                            </span><span style="color: #DCDCAA">alert</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"Logged in!"</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">                            </span><span style="color: #DCDCAA">t9_updateCode</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">                        } else {</span></span>
<span class="line"><span style="color: #D4D4D4">                            </span><span style="color: #DCDCAA">alert</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"Incorrect code"</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">                        }</span></span>
<span class="line"><span style="color: #D4D4D4">                        t9_input.</span><span style="color: #9CDCFE">value</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">""</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">                    }</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span><span style="color: #D4D4D4">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">                // remove focus from input when hovering over code</span></span>
<span class="line"><span style="color: #D4D4D4">                t9_code.addEventListener("mouseover", () => </span><span style="color: #569CD6">{</span></span>
<span class="line"><span style="color: #D4D4D4">                    </span><span style="color: #9CDCFE">t9_input</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">blur</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #569CD6">}</span><span style="color: #D4D4D4">);                </span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080"></</span><span style="color: #569CD6">script</span><span style="color: #808080">></span></span>

Μπορείτε να κατεβάσετε τον κώδικα και σε αρχείο txt

Προτιμώμενη πηγή στο Google
Προσθέστε το iGuRu.gr στη Google

0 σχόλια

iGuRu.gr

Συμμετέχετε στη συζήτηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:

  1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
  2. Προκαλεί βλάβη σε ανηλίκους.
  3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
  4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους.
  5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).