Two-factor authentication with Google Authenticator - manually type key instead of scanning QR code

Question

In Google Authenticator app you can either scan a QR code or manually type a key provided by the issuer.

In the following screenshot you can see the setup of 2FA among Google Security settings, displaying how to get the TOTP by following the 2nd method.

My question is: how is this key generated?

I'm trying to support 2FA with Google Authenticator for my website and I found many references and docs about how to generate the QR code, but none even mentioning the alternate method.

Edit:

To be a bit clearer, I'm supporting 2FA with Google Authenticator in a Grails 3 webapp. I already implemented the whole user flow by generating a secret key (Base32 string) for each user, providing a QR code for users to scan, and verifying the TOTP on login. I used as dependencies:

• org.jboss.aerogear:aerogear-otp-java, aerogear OTP to conveniently verify user secret key against the TOTP from GA
• org.grails.plugins:qrcode, qrcode Grails plugin to generate the QR code

My question is about the 2 ways to add a new entry in Google Authenticator app: 1. scan QR code (everything ok on my side) 2. manually type the account name along with an alphabetic code (in my 1st screenshot, the code is provided within Google Security Settings)

You can see an explicatory screenshot from GA for Android:

How can I generate and provide such code (starting with fzee in the 1st screenshot, and named "provided key" in the 2nd one) to the user? I'm sure it's an encoding of the same data string also encoded in the QR code, but I don't know which (not simply Base32).

Solution 1

key = secret

The key should be the same as the secret you generated. Just test it by opening google authenticator and manually adding it as the key.

Check out the docs at the link below: https://support.google.com/accounts/answer/1066447?co=GENIE.Platform%3DiOS&hl=en

Solution 2

The Google Authenticator Setup QR code is generated based on a few things, one of these is the "secret key", so depending on the codebase you are using to build it into your site the "secret key" is normally generated first and that key is then used to generate the QR code.

If you look at this node.js module you can see what I am talking about

// generate base32 secret
var secret = GA.encode('base 32 encoded user secret') || GA.secret();

// get QRCode in SVG format
var qrCode = GA.qrCode('akanass', 'otp.js', secret);

https://github.com/njl07/otp.js/#qrcode-generation

Here is another example site where you can manually generate the QR code, You can provide a Label, User, Key and URL, and that will then generate the QR code.

https://dan.hersam.com/tools/gen-qr-code.html

Let me know what codebase you are trying to use to implement this into your site then I can help you track down where the secret key is generated

Solution 3

And View

@model _2FAGoogleAuthenticator.ViewModel.LoginModel

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>

@* Here we will add 2 form, 1 for Login and another one for 2FA token verification form *@
@if (ViewBag.Status == null || !ViewBag.Status)
{
    <!--Show login form here, Viewbag.Status is used for check is already veirfied from our database or not-->
    <div>@ViewBag.Message</div>
    <div>
        @using (Html.BeginForm())
        {
            <div class="form-group">
                <label for="Username">Username : </label>
                @Html.TextBoxFor(a => a.Username, new { @class = "form-control"})
            </div>
            <div class="form-group">
                <label for="Password">Password : </label>
                @Html.TextBoxFor(a => a.Password, new { @class="form-control", type="password"})
            </div>
            <input type="submit" value="Login" class="btn btn-default" />
        }
    </div>
}
else
{
    <!--Show 2FA verification form here-->
    <div>@ViewBag.Message</div>
    <div>
        <img src="@ViewBag.BarcodeImageUrl"/>
    </div>
    <div>
        **Manual Setup Code : @ViewBag.SetupCode**
    </div>
    <div>
        @using (Html.BeginForm("Verify2FA","Home", FormMethod.Post))
        {
            <input type="text" name="passcode" />
            <input type="submit" class="btn btn-success" /> 
        }
    </div>
}

Comments

[sanket parikh]

stackoverflow.com/questions/47368154/… here you get all

[ilPittiz]

Thanks but my issue is not about the QR code support (generation, scan, etc): as I wrote above I already implemented the whole 2FA flow involving QR code scan. My question is about the 2nd input method Google Authenticator app supports, where you type an alphanumeric key (basically giving the same result as scanning the QR code): how can I generate it?

[ilPittiz]

Thanks for your reply. I edited my question above as I guess I didn't explain myself clearly enough ;)

[Dieskim]

have you tried just using the Base32 string? if that does not work try Base32.decode(secret)

[ilPittiz]

Yes, Base32 encoding was actually my 1st test, but it really seems it's not the solution. For example the string otpauth://totp/MySite:[email protected]?secret=EFWYTW6H1INJ3X‌​QZ&issuer=MySite is encoded into a very long string (N52HAYLVORUDULZPORXXI4BPJV4VG2LUMU5GK3LBNFWEA3LZONUXIZJOMNX‌​W2P3TMVRXEZLUHVCUMV2‌​ZKRLTMSBRJFHEUM2YKFN‌​CM2LTON2WK4R5JV4VG2L‌​UMU======). Too long to manage (and it has right padding)

[Dieskim]

you just need the secret=EFWYTW6H1INJ3X‌​QZ part - are you saying you only have access to the "very long string"? You will ether need to decode that then strip out the secret or you will need to figure out how to get only the secret key out with the code you are using, or try to use a different implementation if the one you are using does not allow the output of the secret

[sanket parikh]

this will defiantly help you Manual Setup Code : @ViewBag.SetupCode this line in view will generate the code than in application give name and enter that code and it will work what you excepted... and please helpful than mark it and help me thanks

[ilPittiz]

I guess I made it a much bigger problem than it actually is, I used multiple sources as reference and was convinced that key was the result of some encoding of secret. I'm accepting this answer as it's the most concise, however thanks everyone for your answers!