Я пытаюсь настроить двухфакторную аутентификацию с помощью Google Authenticator на моем сайте. Я в состоянии генерировать рабочие коды, но когда я ввожу URL изображения на страницу, я получаю следующее сообщение об ошибке в Chrome инспектора:400 Плохой запрос при попытке вставить изображение QR-кода для Google Authenticator
GET https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/MyLabel?secret=THESECRET 400 (Bad Request)
Код для генерации QR-код:
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}"
стороне клиента JQuery, который вставляет изображение:
img = $("<img>").attr("src", url)
$("#qr_box").html("")
$("#qr_box").append(img)
Какие результаты в следующем HTML на странице:
<img src="https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/MyLabel?secret=THESECRET">
Изображение может быть открыто на новой вкладке без проблем. Изображение только успешно отображается на моей странице около 1/10 времени; в других случаях Chrome дает 400. Я пропустил что-то очевидное здесь?
Похоже, что запрос, сделанный в браузере Google, возвращался с текстом text/html вместо изображения/png. Я установил простую конечную точку, чтобы запросить URL-адрес, поймать ответ и установить тип изображения/png, прежде чем вернуться к моему интерфейсу. Если кто-то знает более элегантный способ сделать это, я хотел бы услышать. – kshen