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&chld=M|0&cht=qr&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?
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