Google Authenticator - missing otpauth protocol parameter

Question

I'm trying to generate a QR code for the Google Authenticator app for my site (to use for Two-Factor Authentication user login.) I follow this guideline to generate a URI (using Google Chart APIs.)

So I made up this URL:

https://chart.googleapis.com/chart?chs=200x200&chld=M%7C0&cht=qr&chl=otpauth://totp/Example:[email protected]?secret=TGABZXEP4LKB46AX&issuer=Example

that created the QR code (from the link above.)

But when I scan it with the Google Authenticator app for my iPhone the line I'm getting does not show the issuer (circled in red in this screenshot) like it does for other services -- see Google in other entries:

So what parameter am I missing there?

Answer 1

The otpauth uri must be encoded in the charts url.

https://chart.googleapis.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth%3A%2F%2Ftotp%2FExample%3Aalice%40gmail.com%3Fsecret%3DTGABZXEP4LKB46AX%26issuer%3DExample

You can get away with replacing ...&issuer=... with ...%26issuer=..., but a properly encoded url is best.