5

Ich versuche, auf meiner Website eine Zwei-Faktor-Authentifizierung mit Google Authenticator einzurichten. Ich bin in der Lage Arbeitscodes zu erzeugen, aber wenn ich die Bild-URL in die Seite einfügen, bekomme ich den folgenden Fehler in Chrome Inspektor:400 Ungültige Anforderung beim Einfügen eines QR-Code-Bilds für Google Authenticator

GET https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/MyLabel?secret=THESECRET 400 (Bad Request) 

Der Code den QR-Code zu generieren:

try 
    key = crypto.randomBytes(10).toString('hex') 
catch error 
    console.log "error generating code: #{error}" 
encoded = base32.encode(key) 
label = encodeURIComponent "MyLabel" 
uri = "otpauth://totp/#{label}?secret=#{encoded}" 
url = "https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=#{uri}" 

Client-seitige jQuery, die das Bild einfügt:

img = $("<img>").attr("src", url) 
$("#qr_box").html("") 
$("#qr_box").append(img) 

, die auf der Seite in der folgenden HTML-Ergebnisse:

<img src="https://www.google.com/chart?chs=200x200&amp;chld=M|0&amp;cht=qr&amp;chl=otpauth://totp/MyLabel?secret=THESECRET"> 

Das Bild kann in einem neuen Tab ohne ein Problem geöffnet werden. Das Bild wird nur ungefähr 1/10 der Zeit auf meiner Seite erfolgreich angezeigt; die anderen Male Chrome gibt eine 400. Fehle ich etwas offensichtlich hier?

+0

Es scheint so, als ob die vom Browser an Google gerichtete Anfrage mit dem Typ text/html anstelle von image/png zurückgegeben wurde. Ich habe einen einfachen Endpunkt eingerichtet, um die URL anzufordern, die Antwort abzufangen und den Typ auf image/png zu setzen, bevor ich zu meinem Frontend zurückkehre. Wenn jemand einen eleganteren Weg kennt, würde ich es gerne hören. – kshen

Antwort