Skip to content

Google Authenticator One-time Password Algorithm in Javascript

I’ve recently setup 2-factor authentication on my Google account.  The new 2nd factor or “thing you have” is a smartphone application which generates 6 digit one-time passwords.

I was a bit surprised when I stumbled on this article Two Factor SSH with Google Authenticator. Turns out the algorithm used to generate the OTPs is an open standard. When you set-up an account in the smartphone app you are storing a key that’s used to create a HMAC of the current time.

You can read the specifics of the algorithm in the TOTP RFC Draft.  I really like the idea that you can use the smartphone app to generate OTPs for your own application.  I’ve implemented the algorithm in javascript on jsfiddle.   Javascript is nice and readable, but please don’t implement your verification client side! :)

History

  • 2012-Sept-6: jsSHA moved location
  • 2012-Sept-12: Something suspect about the way I’m converting BASE32 to bytes. Changed it to grab full bytes from the binary string, and ignore anything left over.
  • 2014-April-22: Github not a CDN anymore.. :) Moved references to bootstrap and jsSHA

{ 22 } Comments

  1. Mark Linton | January 28, 2012 at 6:41 am | Permalink

    Great JS example of the TOTP algo. It would be really awesome to have the actual OTP generation explained using the same example (how the offset it calculated, etc).

    Thanks!

  2. russ | January 28, 2012 at 9:42 pm | Permalink

    Hi Mark, your timing is good. I’ve just been playing with this the TOTP algorithm on an Arduino. See here: https://twitter.com/#!/russaus/status/163232099220996096

    I’ll do a blog post on the Arduino stuff soon, and I’ll include an intro to the algorithm with the post.

    Russ

  3. Markus | March 1, 2012 at 1:41 am | Permalink

    See http://code.google.com/p/google-authenticator/source/browse/libpam/totp.html for an example on how to compute the TOTP in Javascript without requiring additional libraries. I don’t claim that the code is readable — but I do claim that it is compact.

  4. Gerard Braad | June 7, 2012 at 11:59 pm | Permalink

    Created a small Gnome Shell extension based on your publication: https://github.com/gbraad/gnome-shell-google-authenticator

  5. Annon | June 16, 2012 at 6:01 pm | Permalink

    Im loving the dead beef in the key :)

  6. russ | June 16, 2012 at 9:38 pm | Permalink

    Hi Gerard, I’d love to see your Gnome shell extension in action. Can you post a screenshot somwhere?

  7. Gerard Braad | June 17, 2012 at 2:21 am | Permalink

    Hi Tin, took some time to ‘productize’ the implementation. Made it into a small HTML5 app for use in any browser: https://5apps.com/apps/4fd87e80c439344a17000003 and even a Chrome extension: https://chrome.google.com/webstore/detail/ilgcnhelpchnceeipipijaljkblbcobl?utm_source=chrome-ntp-icon or a phonegap build: https://build.phonegap.com/apps/135419/share

    The gnome extension is not been approved as of yet, since I still have to optimize it a little to only run on dialog popup and use the HMAC implementation as provided by glib.

    Have attributed you in the code and will do so in an about box. All stuff is published on github.

  8. Gerard Braad | June 17, 2012 at 7:47 am | Permalink

    oops, correction… Hi Russ…

  9. russ | June 17, 2012 at 7:49 am | Permalink

    heheh… not the first time I’ve been called ‘Tin’ :)

  10. Andrew Stanley | January 24, 2013 at 7:40 pm | Permalink

    Russ, did you ever get around to documenting what you did with your Arduino? I’m futzing with the same idea right now and would love to see your example/write up!

  11. russ | January 26, 2013 at 2:06 am | Permalink

    Hi Andrew,
    I didn’t get around to writing anything up. The source code is here: https://github.com/russau/ArduinoOTP
    Will _try_ get around to documenting it someday!
    Russ

  12. FJH | January 22, 2014 at 4:31 pm | Permalink

    This wonderful example has stopped working in Chrome as Chrome now enforces strict mime type checking. Still works in Firefox though.

    Refused to execute script from ‘https://github.com/Caligatio/jsSHA/raw/master/src/sha.js’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.

  13. russ | April 23, 2014 at 3:14 am | Permalink

    Hi – I think I’ve fixed the the problems that were breaking things in Chrome.

  14. FJH | April 23, 2014 at 5:45 pm | Permalink

    I agree, you have fixed the issue that stopped it working in the latest version of chrome. Thanks.

  15. Sneezry | July 10, 2014 at 12:32 pm | Permalink

    I created a Chrome extension based on your work (https://chrome.google.com/webstore/detail/authenticator/bhghoamapcdpbohphigoooaddinpkbai), nice job, thx!

  16. dh | October 4, 2014 at 2:24 pm | Permalink

    Hi, Russ. This is a very useful reference. That said, could you confirm the code still outputs correct OTPs for Google? I have used my own secret key retrieved from Google with the code above only to see it fail. I have used the same secret key with the third-party OTP generating apps on my mobile and they have worked. Any insight sharing will be deeply appreciated.

  17. russ | October 5, 2014 at 5:17 am | Permalink

    Hi, I regularly use the jsfiddle link when I can’t find my cellphone for OTP (and I just tested it with my AWS and google secrets). If you captured the secret from the google QR it will look something like this:
    otpauth://totp/Google%3Aemail.address%40gmail.com?secret=JBSWY3DPEHPK3PXP&issuer=Google

    Are you grabbing the “secret” portion only? i.e. in this example you only want JBSWY3DPEHPK3PXP.

    Let me know if are still having problems with this.

    Russ

  18. russ | October 5, 2014 at 5:21 am | Permalink

    Your extension looks REALLY cool!

  19. meh | October 15, 2014 at 4:18 pm | Permalink

    Hi there,

    I’m trying to figure this out too. Like dh said, I’m trying to get my Google Authenticator to show the same passwords on the above implementation and in Google Authenticator and I’m failing :-(

    One thing I noticed was that the secret parameter they’re passing in the QR Code is not base 32 encoded, they’re actually displaying the 32 character secret key that you’d type in to Google Authenticator if you couldn’t scan the QR code.

    I tried taking that and base 32 encoding it and putting the result in above, but it didn’t show the same OTP either. Is there another step I need to do to take Google’s 32 character string and get it to work in the Secret field above? I’m kind of new to this, and haven’t read the RFC completely yet. Sorry if it’s a n00bish question :-(

  20. meh | October 15, 2014 at 4:23 pm | Permalink

    oh my word.

    Never mind :-)

    while I was writing this I realized that the 32 character code IS the base 32 encoded string and didn’t need to be encoded again. I’m a dummy :-)

    I see my initial comment is still waiting moderation. You can feel free to ignore that and this one too LOL.

    Thanks for the killer implementation and for helping me understand how this works! :-)

  21. russ | October 15, 2014 at 4:25 pm | Permalink

    Glad you got it working! :)

  22. dh | October 17, 2014 at 7:43 pm | Permalink

    Yeah, I just realized the problem was that the base 32 encoded code Google provides had whitespace which the base32tohex function did not handle properly.

    I just added

    base32 = base32.replace(/\s/g,”);

    to strip all whitespace in the base32 input and now it works like a charm.

    Thanks Russ and Meh.

{ 5 } Trackbacks

  1. [...] oder.Eine interessante Seite um etwas mit dem Secret, dem QR-Code und dem Code herumzuspielen ist diese Javascript-Umsetzung.Für WordPress gibt es ein Plugin für die Google Authenticator Unterstützung, ich nehme an dass [...]

  2. [...] Liens utiles : RFC 6238 – TOTP: Time-Based One-Time Password Algorithm RFC 4226 – HOTP/IETF Exemple de calcul d’OTP TOTP generator in javascript [...]

  3. [...] Liens utiles : RFC 6238 – TOTP: Time-Based One-Time Password Algorithm RFC 4226 – HOTP/IETF Exemple de calcul d’OTP TOTP generator in javascript [...]

  4. [...] Liens utiles : RFC 6238 – TOTP: Time-Based One-Time Password Algorithm RFC 4226 – HOTP/IETF Exemple de calcul d’OTP TOTP generator in javascript [...]

  5. […] 其实我最近玩google authenticator 体验不错,稍作努力就可以搞定两步式动态密码验证,这里有网页版的实现:http://blog.tinisles.com/2011/10/google-authenticator-one-time-password-algorithm-in-javascript/ —————————————————————————————————————————————————— ↓ 解决方案 ↓ […]

Post a Comment

Your email is never published nor shared. Required fields are marked *