Token image in Google Authenticator or FreeOTP

Question

For a project, I implemented an OTP 2nd factor authentification. Everything is working fine, I am able to generate a QRcode for the encryption seed, read it on an Androïd smartphone and use the 6 digits generated code to authenticate in my app. I read that v1.5 of FreeOTP is now supporting addition of an image to each service, quote:

On Android, we released a major release which brings many new features and UI refinements. The biggest of these is image support. Images can be selected for each token. Images can also be provisioned to the device via an undocumented OTP URI query parameter.

I see that some services did succeed in adding an image for their service (for example OVH), but cannot find the proper URI syntax to do so ... To be more precise, I am not asking for the method to manually add an image to a token in the FreeOTP app, I'm looking for the correct URI to generate the QRCode that would ideally include a link to the image to be displayed. I'm pretty sure I never manually added an image for OVH.

Viscounty

Answer 1

The correct URI to generate the QR code with reference to the image you want to use in FreeOTP includes a querystring parameter pointing to its publicly available location:

...&image=http<s>://<image-path>

The image should be a .png. Fully qualify path and protocol.

Add this to the existing string already created for the QR code. You have to UrlEncode the whole string before generating the QR code.

For clarity the format of the data before urlencoding should be:

otpauth://totp/(<issuer>:)<accountnospaces>?secret=xxxxxxxxxx(&issuer=<issuer>)(&image=<imageuri>)

Brackets denote optional elements. For example:

otpauth://totp/Google:SampleName?MQ2TQNLEGMYTMOBXGY3Q&issuer=Google&image=http://google.com/image/logo.png

Then you urlencode it:

otpauth%3A%2F%2Ftotp%2FGoogle%3ASampleName%3FMQ2TQNLEGMYTMOBXGY3Q%26issuer%3DGoogle%26image%3Dhttp%3A%2F%2Fgoogle.com%2Fimage%2Flogo.png

Then you generate a QR code however you like. For example, Google Chart API:

https://chart.googleapis.com/chart?cht=qr&chs=400x400&chl=otpauth%3A%2F%2Ftotp%2FGoogle%3ASampleName%3FMQ2TQNLEGMYTMOBXGY3Q%26issuer%3DGoogle%26image%3Dhttp%3A%2F%2Fgoogle.com%2Fimage%2Flogo.png

While this feature is supported by FreeOTP, other apps do not. It's not part of the spec for TOTP, although it should be.

Hobbism

Waou didn't expect an answer anymore, thanks, will try asap and report. – Viscounty

Well sorry but no luck on a local server, tried with urlencode and without, will try again on the production machine later. I remember when programming this having trouble with the order of the parameters in the otpauth:// url, should that parameter be someplace special ? – Viscounty

Well, not urlencoding would be the first problem and I did mention that you have to do this. Review the updated answer and figure out what is different with your code. – Hobbism

using &image with Authy it always show Petrel Cloud logo instead. Works fine with Free OTP but it show PNG files with purple background. Probably Authy is cut out by Cloudflare and it resort on their local image as backup, so probably Authy is on Petrel Cloud, this is my guess. – Tap