QR-Code with google chart API - Invalid for google authenticator app

Question

Warning: sharing your TOTP seed with third-parties breaks the very basic assumption of multi-factor authentication that the TOTP seed is secret.

I generated a secret EBWFBWYCPPELHQS5 and I can add it manually to the Google Authenticator App.

But if I generate a QR-Code from this secret via the google chart API, I can not scan the QR-Code, the app tells me the QR-code is not valid. This would be the QR-code for the secret above:

https://chart.googleapis.com/chart?chs=200x200&chld=M%7C0&cht=qr&chl=otpauth://totp/test@test&secret=EBWFBWYCPPELHQS5

My code to generate the url looks like this:

public static String getQRBarcodeURL(String user, String host, String secret) {
    return "https://chart.googleapis.com/chart?" + getQRBarcodeURLQuery(user, host, secret);
}

public static String getQRBarcodeURLQuery(String user, String host, String secret) {
    return "chs=200x200&chld=M%7C0&cht=qr&chl=" +
            getQRBarcodeOtpAuthURL(user, host, secret);
}

public static String getQRBarcodeOtpAuthURL(String user, String host, String secret) {
    return String.format("otpauth://totp/%s@%s&secret=%s", user, host, secret);
}

How can I get this working

Answer 1

You need to URL Encode the data that you send to the Google Charts API.

The & character should be %26 like so:

https://chart.googleapis.com/chart?chs=200x200&chld=M%7C0&cht=qr&chl=otpauth://totp/test@test%26secret=EBWFBWYCPPELHQS5

Otherwise, the API thinks everything after the & is another parameter for it, rather than data to be encoded.