parameters to make a QR code that Authy understands

Question

I´m about to introduce 2FA and use QRcode.js to generate a QR code from the secret key to be scanned by the 2FA apps.

$('#totpQR').empty();
new QRCode(document.getElementById('totpQR'),secretkey);
$('#totpQRContainer').css('display','inline');
$('#totpQR').attr('title', 'otpauth://totp/'+encodeURIComponent(username)
    + location.hostname.replace(/^(.*\.)?(\b[\w-]+\.[a-z]+)$/, '@$2?secret=')
    + secretkey
);

Both GoogleAuthenticator and Authy seem to be picky there; they reject the code saying "The QR code is invalid" or similar. When I use a proper QR reader to scan the same QR, the key from the URL (otpauth://totp/[email protected]?secret=secretkey or otpauth://totp/sitename?secret=secretkey or otpauth://totp/[email protected]?secret=secretkey&digits=6&issuer=SiteName&period=30) comes out correct.

Googling for the issue gave me no results.

Can anyone tell me what parameters I should use to generate my QR or do I have to experiment?

I guess that there´s no mistake in the URL?

Answer 1

The problem was in my code indeed: I created the QR from the key, not from the whole URL:

$('#totpQR').empty();
var url='otpauth://totp/'+encodeURIComponent(username)
    + location.hostname.replace(/^(.*\.)?(\b[\w-]+\.[a-z]+)$/, '@$2?secret=')
    + secretkey
;
new QRCode(document.getElementById('totpQR'),url);
$('#totpQRContainer').css('display','inline');
$('#totpQR').attr('title',url);