parameters to make a QR code that Authy understands - qr-code

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/username#sitename.tld?secret=secretkey or otpauth://totp/sitename?secret=secretkey or otpauth://totp/username#sitename.tld?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);