EventSource dan autentikasi http dasar

EventSource adalah tentang server yang mengirimkan acara ke klien. Saya pikir Anda memerlukan komunikasi dua arah untuk otentikasi. Bagaimana cara Anda mengirimkan kredensial sebenarnya?

WebSockets, bagaimanapun, dapat mencapai hal itu. Itukah yang kamu cari?

Memperbarui:

Anda dapat mencapai apa yang Anda inginkan dengan memanfaatkan cookie, seperti yang ditunjukkan oleh 4esn0k. Cookie dikirim bersamaan dengan permintaan awal yang dibuat browser untuk membuat koneksi. Jadi, pastikan Anda menyetel pengidentifikasi sesi untuk cookie sebelum meluncurkan koneksi EventSource apa pun.

Saya mencari solusi untuk masalah yang sama. Postingan ini di sini mengatakan ini:

Peringatan lainnya adalah sejauh yang kami tahu, Anda tidak dapat mengubah header HTTP saat menggunakan EventSource, yang berarti Anda harus mengirimkan parameter string kueri otorisasi dengan nilai yang akan Anda sisipkan menggunakan HTTP Basic Auth: gabungan yang dikodekan base64 dari akun Anda login dan token.

Ini kode dari postingan:

// First, we create the event source object, using the right URL.
var url = "https://stream.superfeedr.com/?";
url += "&hub.mode=retrieve";
url += "&hub.topic=http%3A%2F%2Fpush-pub.appspot.com%2Ffeed";
url += "&authorization=anVsaWVuOjJkNTVjNDhjMDY5MmIzZWFkMjA4NDFiMGViZDVlYzM5";

var source = new EventSource(url);

// When the socket has been open, let's cleanup the UI.
source.onopen = function () {
  var node = document.getElementById('sse-feed');
  while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
  }
};

// Superfeedr will trigger 'notification' events, which corresponds
// exactly to the data sent to your subscription endpoint 
// (webhook or XMPP JID), with a JSON payload by default.
source.addEventListener("notification", function(e) {
  var notification = JSON.parse(e.data);
  notification.items.sort(function(x, y) {
    return x.published - y.published;
  });
  notification.items.forEach(function(i) {
    var node = document.getElementById('sse-feed');
    var item = document.createElement("li");
    var t = document.createTextNode([new Date(i.published * 1000), i.title, i.content].join(' '));
    item.appendChild(t);
    node.insertBefore(item, node.firstChild);
    // We add the element to the UI.
  });
});

Jika Anda berbicara tentang cookie (bukan http auth):

EventSource menggunakan http, jadi cookie dikirim bersama permintaan koneksi EventSource.

Http auth harus didukung seperti url http lainnya, meskipun dari spesifikasi CORS+http auth tidak didukung.

Saat ini ada paket NPM untuk mengubah HTTP Header

https://www.npmjs.com/package/eventsource

Pustaka ini adalah implementasi JavaScript murni dari klien EventSource. API ini bertujuan agar kompatibel dengan W3C.

Anda dapat menggunakannya dengan Node.js atau sebagai polyfill browser untuk browser yang tidak memiliki dukungan EventSource asli.

Anda dapat menggunakan event-source-polyfill untuk menambahkan header seperti ini

import { EventSourcePolyfill } from 'event-source-polyfill';

new EventSourcePolyfill(`/api/liveUpdate`, {
  headers: {
    Authorization: `Bearer 12345`,
    'x-csrf-token': `xxx-xxx-xxx`,
  },
});