Programowe wykrywanie kodu udostępniania za pomocą oEmbed

Sieć jest pełna usług, które udostępniają bogate treści, takie jak filmy, obrazy, muzyka i podcasty, mapy i wykresy, a także wszelkiego rodzaju przysmaki. Możliwe, że dodanie treści do witryny zaoferuje sposób na osadzenie tej treści na stronie internetowej w innym miejscu.

Witryny takie jak YouTube mają własny odtwarzacz do osadzania, który jest popularny w postach na blogu, a nawet na stronach produktów. Soundcloud ma kod do osadzenia odtwarzacza muzyki na stronie Twojego zespołu. Osoby zbierające fundusze na cele charytatywne mogą przesłać trasę swojego wielkiego wyścigu do witryny takiej jak Strava i chcieć udostępnić ją na swojej stronie pozyskiwania funduszy, aby pokazać swoim sponsorom.

Wszystko to odbywa się poprzez znalezienie opcji Udostępnij w witrynie hostingowej i skopiowanie kodu, który zwykle jest mieszanką HTML i JavaScript. Ten kod można następnie wkleić na stronę docelową, a witryna hostingowa zaprezentuje bogatą reprezentację treści, którą będą mogli zobaczyć wszyscy Twoi znajomi, klienci i kontakty.

Jak dotąd tak dobrze, a to całkiem dobrze obejmuje opcję ręcznego osadzania treści. Istnieje jednak odrębny drugi przypadek użycia, w którym wynik jest taki sam, ale droga do niego jest zupełnie inna.

Udostępnianie programowe

Załóżmy, że tworzysz aplikację lub witrynę, która akceptuje treści od użytkownika. Może to być coś tak prostego, jak podstawowa strona intranetowa, na której pracownicy mogą dzielić się wiadomościami ze współpracownikami, lub coś ogromnego, jak cała sieć społecznościowa, w której ludzie mogą się zarejestrować i zacząć publikować.

W obu przypadkach musisz dowiedzieć się, co zrobić, jeśli użytkownik doda adres URL jako część treści. Możesz sobie wyobrazić scenariusz:

 Check out this video! https://youtu.be/jw7bRnFbwAI

W tym momencie, jako system wydawniczy, musisz zastanowić się, co robić. Pierwsza opcja to nic nie robić i po prostu zostawić adres URL jako zwykły tekst. To nie jest genialny pomysł, ponieważ użytkownicy zazwyczaj będą chcieli kliknąć adres URL, a zwykły tekst nie pomoże im dostać się na drugą stronę.

Drugą opcją jest przekształcenie go w link. To dobry, solidny kolejny krok, ponieważ użytkownicy mogą kliknąć link i dostać się do treści. Ale robiąc to, opuszczają Twoją witrynę i mogą nie wracać w pośpiechu.

Najlepszym doświadczeniem dla użytkownika może być pobranie odtwarzacza dla tej treści i osadzenie go tam, a nie samego adresu URL. Umożliwiłoby to użytkownikom zapoznanie się z treścią bezpośrednio w Twojej witrynie, podobnie jak na przykład na Facebooku.

To stwarza problem. Jak mogę zamienić ten adres URL w kod HTML/JavaScript do umieszczenia na stronie, który jest potrzebny do wyświetlenia odtwarzacza multimedialnego na stronie?

Jeśli jest to znana witryna, taka jak YouTube, mógłbym napisać kod, który używa interfejsu API YouTube do pobierania informacji o filmie i uzyskiwania lub tworzenia w ten sposób kodu do osadzenia. Mogę zrobić to samo dla innych serwisów wideo, takich jak Vimeo i VIVO. Potrafię napisać kod, aby rozpoznać adresy URL Flickr i Instagram i użyć ich interfejsów API, aby pobrać ładne, możliwe do osadzenia wersje zdjęć. To samo dotyczy Twittera i tweetów. Ale to brzmi jak dużo pracy!

Idealnie byłoby, gdyby istniał ustandaryzowany sposób przechodzenia z adresu URL fragmentu treści do bloku kodu do osadzenia w celu wyświetlenia tej treści na stronie. Jeśli zwracałeś uwagę, zdasz sobie sprawę, że odpowiedzią na to jest oEmbed.

Pochodzenie oEmbed

To był dokładnie problem Leah Culver podczas pracy nad Pownce (prawdziwie innowacyjnym serwisem społecznościowym, który był Betamaxem na VHS Twittera). Pownce chciał osadzić bogatą reprezentację treści w strumieniu aktualizacji użytkownika, ale nie chciał ograniczać wsparcia tylko do usług, z którymi specjalnie napisał kod do integracji. Podczas kolacji z kolegą Mikem Malone, a także Calem Hendersonem (kierującym inżynierią w Flickr — jednym z głównych dostawców tego typu treści w tamtym czasie) i Richardem Crowleyem, wspólnie wymyślili pomysł na otwarty standard pobierania kodu do osadzania z adres URL. Henderson odszedł i na podstawie dyskusji naszkicował coś i tak narodził się oEmbed.

Korzystanie z oEmbed

Oto jak to działa.

Zaczyna się od adresu URL, który wskazuje na pojedynczy element treści. Może to być film na YouTube, obraz lub cokolwiek innego. Zazwyczaj są one udostępniane przez użytkownika Twojej witryny lub aplikacji jako część treści, które chcą opublikować. Pierwszym krokiem jest pobranie zawartości strony pod tym adresem URL, który powinien być stroną HTML.

Jeśli witryna hostująca treść obsługuje oEmbed, w sekcji <head> tej strony powinien znajdować się element link z typem treści oembed :

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

Uwaga na temat XML: oEmbed obsługuje odpowiedzi zarówno w formacie XML, jak i JSON. W tym artykule rozważam tylko JSON, ponieważ nie jesteśmy dzikusami. Jeśli jesteś w niefortunnej sytuacji, gdy musisz pracować z XML, pamiętaj, że jest to obsługiwany format ze specyfikacją oEmbed, chociaż może się okazać, że niektórzy dostawcy oferują tylko odpowiedzi JSON.

Ten tag link jako atrybut rel ustawiony na alternate i type ustawiony na application/json+oembed lub text/xml+oembed . To właśnie ten atrybut wskazuje nam, że adres URL podany w href jest w rzeczywistości punktem końcowym interfejsu API oEmbed do pobierania szczegółów treści.

Ten adres URL będzie miał zwykle dwa parametry: url i format .

Typowe parametry adresu URL dla początkowego żądania konsumenta

Pełna specyfikacja jest tutaj o wiele bardziej szczegółowa (i powinieneś odnieść się do tego, jeśli tworzysz własną implementację), ale są to dwa parametry, które prawdopodobnie zobaczysz najczęściej.

Tak więc mamy adres URL, pobraliśmy stronę, znaleźliśmy tag linku oEmbed z innym adresem URL dla punktu końcowego API. Następnie żądamy nowego adresu URL, który zwraca wszystkie informacje, które usługa musi dostarczyć na temat tego fragmentu treści.

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

Teraz rozmawiamy! Odpowiedź daje nam wiele informacji o treści. version powinna w najbliższej przyszłości wynosić 1.0 , co jest aktualną wersją specyfikacji oEmbed. Inne zwrócone informacje zależą w dużej mierze od wartości type .

Typy odpowiedzi

Wartość klucza type w odpowiedzi informuje o tym, jaki rodzaj mediów zamierzasz osadzić.

Oprócz dedykowanych treści wideo, bardziej popularnym typem, który prawdopodobnie zobaczysz na wolności, jest rich . Nawet sam Flickr, wciąż wysyłając odpowiedź ze photo , dostarcza również html dla bogatego „odtwarzacza” do osadzenia obrazu.

W większości przypadków osadzanie treści w witrynie to tylko przypadek użycia kodu podanego jako wartość html .

Uwaga o bezpieczeństwie

Jedną z rzeczy, na które możesz być słusznie ostrożny, jest przyjęcie odpowiedzi HTML i programowe osadzenie jej na hostowanej stronie. Bez wykonywania przez człowieka czynności polegających na dwukrotnym sprawdzeniu wklejanego kodu zawsze istnieje ryzyko, że kod ten może być złośliwy. W związku z tym powinieneś podjąć odpowiednie kroki w celu zmniejszenia ryzyka.

Może to obejmować filtrowanie adresów URL, aby upewnić się, że schematy i domeny są zgodne z oczekiwanymi, oraz kod piaskownicy w ramce iframe w innej domenie bez plików cookie. Powinieneś uzyskać dostęp do sytuacji, w której używasz kodu i upewnić się, że nie narażasz się na nadmierne ryzyko.

Pierwsze kroki

Równie ważne, jak zrozumienie procesu podczas korzystania z oEmbed, jest fakt, że w większości popularnych języków dostępne są biblioteki, które abstrahują proces i czynią go stosunkowo prostym.

Na przykład pakiet oembed npm zapewnia bardzo prosty interfejs do tworzenia żądania na podstawie adresu URL zawartości i uzyskiwania w zamian odpowiedzi oEmbed.

Najpierw zainstaluj pakiet w swoim projekcie:

 npm i oembed

A następnie poproś o adres URL. Tutaj używam adresu URL prezentacji na Notist, którą podałem na temat oEmbed. Jak bardzo meta.

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

A odpowiedź:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

Jeśli chcesz zrobić to samo w PHP, poręczny pakiet o nazwie embed/embed jest dostępny do zainstalowania przez Composer.

 composer require embed/embed

A potem w swoim projekcie PHP:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

Jak widać, przy użyciu biblioteki proces staje się bardzo prosty i można szybko przejść z adresu URL do kodu embed, gotowego do pokazania bogatej reprezentacji treści użytkownika.

Wniosek

oEmbed to bardzo eleganckie rozwiązanie bardzo konkretnego problemu. Można by pomyśleć, że tylko kilku inżynierów pracujących w dużych sieciach społecznościowych skorzystałoby na tym, ale w rzeczywistości systemy publikowania, w których użytkownik może wprowadzić adres URL, są zaskakująco powszechne. Znajdź mi jednego inżyniera back-endu, który w pewnym momencie nie musiał budować jakiegoś CMS-a. Możemy nie myśleć o tym w tych samych kategoriach, ale jeśli akceptujesz dane wejściowe użytkownika, powinieneś pomyśleć o tym, co zrobić, jeśli te dane wejściowe zawierają adresy URL.

Teraz, gdy wiesz już o oEmbed (przepraszam), nie masz wymówki, aby nie zastanowić się poważnie nad tym, jak radzisz sobie z adresami URL w przyszłych projektach.

• oWstaw specyfikację
• oembed dla NodeJS
• embed/embed dla PHP
• „Zapowiedź OEmbed: Otwarty standard dla treści osadzonych”, Leah Culver