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.

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.