Warning: sharing your TOTP seed with third-parties breaks the very basic assumption of multi-factor authentication that the TOTP seed is secret.
So, I'm aware of the documentation on this, found here: Google Authenticator Key URI Format
When I follow this example from that page:
otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example
And I 'splice' it into a Google Charts URL, thus:
https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example
It will display a valid QR code, and if I scan it with my Google Authenticator app on my phone, it will begin to generate valid OTPs.
However, in the display on the phone, for the entry created by the QR code, I get the OTP, and under it, I get 'Example:alice@google.com'. What I want, is to have 'Example' displayed above the OTP, and 'alice@google.com' displayed below the OTP. I can't help but notice that's the way all the professionally produced apps do it. For example, Google, Wordpress, Amazon, etc. The company name is above the OTP, and the username is displayed below the OTP. Yes, this is purely a cosmetic issue, but I want to get it right.
Can anyone offer me a clue?
Warning: sharing your TOTP seed with third-parties breaks the very basic assumption of multi-factor authentication that the TOTP seed is secret.
Just figured this out.
As it turns out, I needed to encode all the special characters in the 'oauth', i.e., '$', '%', '=', etc.
So, using the same Google Charts URL as before, but encoding those characters, like this:
https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/Example%3Aalice%40google.com%3Fsecret%3DJBSWY3DPEHPK3PXP%26issuer%3DExample
And it works correctly.