Découverte par programme du partage de code avec oEmbed

Le Web regorge de services hébergeant un contenu riche, tel que des vidéos, des images, de la musique et des podcasts, des cartes et des graphiques, et toutes sortes de délices. Il est fort probable que, lorsque vous ajouterez du contenu à un site, vous pourrez intégrer ce contenu à une autre page Web.

Les sites comme YouTube possèdent leur propre lecteur intégrable, très populaire dans les blogs et même pages de produits. Soundcloud a un code pour intégrer son lecteur de musique au site Web de votre groupe. Les collectes de fonds caritatives pourraient télécharger le parcours de leur grande course sur un site tel que Strava et souhaiteraient le partager sur leur site de collecte de fonds pour montrer leurs sponsors.

Tout ceci est fait en découvrant que l'option Share de la l'hébergement du site et la copie de code qui est normalement un mélange de HTML et JavaScript. Ce code peut ensuite être collé dans la page de destination, et le site d'hébergement présente une riche représentation du contenu à voir par tous vos amis, clients et contacts.

Jusqu'ici, tout va bien, et cela couvre l'option de l'incorporation manuelle du contenu assez bien. Il existe cependant un second cas d’utilisation distinct, dont le résultat est identique mais dont la procédure est très différente.

Partage par programme

Imaginons que vous construisiez une application ou un site qui accepte le contenu d’un utilisateur. Cela pourrait être quelque chose d'aussi simple qu'une page intranet de base pour que le personnel puisse partager des nouvelles avec des collègues, ou quelque chose d'énorme comme un réseau social complet où les gens peuvent s'inscrire et commencer à poster.

Dans les deux cas, vous devez déterminer ce qu'il faut faire. faire si l'utilisateur ajoute une URL dans ce contenu. Vous pouvez imaginer le scénario:

 Regardez cette vidéo! https://youtu.be/jw7bRnFbwAI

À ce stade, en tant que système de publication, vous devez savoir quoi faire. La première option consiste à ne rien faire et à laisser l'URL sous forme de texte brut. Ce n’est pas une idée brillante, car les utilisateurs voudront généralement cliquer sur l’URL et le texte en clair ne les aidera pas à accéder à la page située à l’autre extrémité.

La deuxième option consiste à la transformer en lien. C’est une bonne étape, car les utilisateurs peuvent suivre le lien et accéder au contenu. Mais ce faisant, ils quittent votre site et risquent de ne pas revenir rapidement.

La meilleure expérience utilisateur pourrait être de pouvoir récupérer le lecteur pour ce contenu et de l'intégrer directement à cet emplacement plutôt que simplement l'URL. Cela permettrait aux utilisateurs de découvrir le contenu directement sur votre site, un peu comme ils le feraient sur Facebook, par exemple.

Cela pose problème. Etant donné une URL, comment puis-je le transformer en code intégré HTML / JavaScript nécessaire pour afficher un lecteur enrichi sur la page?

S'il s'agit d'un site connu comme YouTube, je pourrais écrire du code utilisant l'API de YouTube pour extraire le contenu. informations vidéo et obtenir ou construire le code d'intégration de cette façon. Je pourrais faire la même chose pour d'autres services vidéo comme Vimeo et VIVO. Je peux écrire du code pour reconnaître les URL Flickr et Instagram et utiliser leurs API pour récupérer de belles versions incorporables de photographies. Et la même chose pour Twitter et les tweets.

Ce qui serait idéal, c’est qu’il existe un moyen normalisé de passer d’une URL de contenu à un bloc de code intégré pour afficher ce contenu sur une page. Si vous y prêtez attention, vous vous rendrez compte que la réponse à cette question est oEmbed.

The Origin Of oEmbed

C’est exactement le problème Leah Culver qui travaillait pour Pownce (a site de réseautage social véritablement innovant (VHS de Betamax to Twitter). Pownce souhaitait intégrer de riches représentations de contenu dans le flux de mise à jour d'un utilisateur, mais ne souhaitait pas limiter la prise en charge aux seuls services pour lesquels ils avaient spécifiquement écrit du code. Au dîner avec un collègue, Mike Malone, ainsi que avec Cal Henderson (qui dirigeait l’ingénierie chez Flickr – l’un des principaux fournisseurs de ce type de contenu à l’époque) et Richard Crowley ils ont ensemble haché une idée pour un standard ouvert permettant d’obtenir du code intégré à partir d’une URL. Henderson partit et rédigea quelque chose sur la base de la discussion et naquit oEmbed.

Utilisation de oEmbed

Voici comment cela fonctionne.

Cela commence par l’URL qui pointe vers un seul élément de contenu. Cela pourrait être une vidéo YouTube, une image ou autre chose. En règle générale, ces informations ont été fournies par un utilisateur de votre site ou de votre application dans le cadre du contenu qu’ils souhaitent publier. La première étape consiste à extraire le contenu de la page à cette URL, qui devrait être une page HTML.

Si le site hébergeant le contenu prend en charge oEmbed, dans la section de cette page, il devrait y avoir un . link élément avec un oembed type de contenu:

Note sur XML: oEmbed prend en charge les réponses aux formats XML et JSON. Pour cet article, je ne considère que JSON, car nous ne sommes pas des sauvages. Si vous êtes dans la position regrettable de devoir utiliser XML, sachez qu'il s'agit d'un format pris en charge avec la spécification oEmbed, bien que certains fournisseurs n'offrent que des réponses JSON.

l'attribut rel réglé sur alternatif et un type réglé sur application / json + oembed ou text / xml + oembed . C'est cet attribut qui nous indique que l'URL donnée dans le href est en réalité un point de terminaison de l'API oEmbed permettant de récupérer les détails du contenu.

Cette URL aura généralement deux paramètres: Format url et .

Paramètres d'URL communs pour la demande initiale du consommateur

The La spécification complète est beaucoup plus détaillée ici (et vous devriez le mentionner si vous créez votre propre implémentation), mais ce sont les deux paramètres que vous verrez probablement le plus souvent.

Nous avons donc une URL, extraite la page, a trouvé une balise de lien oEmbed avec une autre URL pour un point de terminaison API. Ensuite, nous demandons cette nouvelle URL, qui renvoie toutes les informations que le service doit fournir sur ce contenu.

 {
        "author_name": "Smashing Magazine",
        "largeur": 480,
        "title": "Smashing TV: Composants inclus avec Heydon Pickering (7 novembre 2019)",
        "nom_fournisseur": "YouTube",
        "hauteur": 270,
        "html": "",
        "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",
        "vignette_width": 480
}

Nous parlons maintenant! La réponse nous donne beaucoup d'informations sur le contenu. La version devrait, dans un avenir prévisible, être la 1.0 qui est la version actuelle de la spécification oEmbed. Les autres informations renvoyées dépendent en grande partie de la valeur du type .

Types de réponse

La valeur de la clé du type de la réponse vous indique le type de support que vous êtes

Hormis le contenu vidéo dédié, le type le plus courant que vous verrez probablement à l'état sauvage est rich . Même Flickr lui-même, tout en envoyant une réponse photo fournit également html à un riche "lecteur" incorporable pour l'image également.

La plupart du temps, l'intégration du contenu Dans votre site, vous ne pouvez utiliser que le code fourni sous la forme html .

Note sur la sécurité

Une chose sur laquelle vous pourriez être assez prudent est de prendre une réponse HTML et de l'intégrer par programme. dans une page que vous hébergez. Si vous ne souhaitez pas vérifier le code que vous collez, il est toujours possible que ce code soit malveillant. En tant que tel, vous devez prendre les mesures appropriées pour atténuer les risques.

Cela peut inclure le filtrage des URL pour vérifier que les schémas et les domaines correspondent à ceux attendus, ainsi que le code de mise en sandbox dans un iframe situé sur un domaine différent, sans cookie. Vous devez accéder à la situation dans laquelle vous utilisez le code et vous assurer que vous ne vous exposez pas à un risque excessif.

Pour commencer

Aussi important qu’il soit de comprendre le processus d’utilisation de oEmbed, le La réalité est que la plupart des langages courants ont des bibliothèques disponibles qui résument le processus et le rendent relativement simple.

Par exemple, le paquetage npm oembed fournit une interface très simple pour effectuer une demande basée sur l'URL de contenu. et obtenir la réponse oEmbed en retour.

Commencez par installer le package dans votre projet:

 rnm i oembed

Et demandez ensuite l'URL. Ici, j’utilise l’URL d’une présentation sur Notist que j’ai donnée à propos de oEmbed. C'est très méta.

 const oembed = require ('oembed');
const url = 'https://noti.st/drewm/ZOFFfI';

oembed.fetch (url, {largeur maximale: 1920}, fonction (erreur, résultat) {
    si (erreur)
        console.error (erreur);
    autre
        console.log ("résultat oEmbed", résultat);
});

Et la réponse:

 {
        type: 'riche',
        version: '1.0',
        titre: 'Comprendre oEmbed',
          author_name: 'Drew McLellan',
        author_url: 'https://noti.st/drewm',
        nom_fournisseur: 'Notist',
        provider_url: 'https://noti.st',
        cache_age: 604800,
        thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png',
        vignette_width: 1600,
        thumbnail_height: 900,
        html:
           "
 Voir  Compréhension de l'inclusion  dans Notist. 
",
        largeur: 960,
        hauteur: 540
}

Si vous vouliez faire la même chose en PHP, un paquet pratique appelé embed / embed est disponible pour l'installation via Composer.

 composer besoin d'incorporer / intégrer

Et ensuite, dans votre projet PHP:

utilisez Embed  Embed;

$ info = Embed :: create ('https://noti.st/drewm/ZOFFfI');

$ info-> titre; // "Comprendre oEmbed"
$ info-> authorName; // "Drew McLellan
$ info-> code; // "
 ... "
Comme vous pouvez le constater, avec l'utilisation d'une bibliothèque, le processus devient très simple et vous pouvez rapidement obtenir une adresse URL du code intégré, prêt à afficher une riche représentation du contenu de l'utilisateur. 
 Conclusion 
 oEmbed est une solution très élégante à un problème très spécifique. On aurait pu penser que seuls quelques ingénieurs travaillant sur de grands réseaux sociaux pourraient en bénéficier, mais en réalité, les systèmes de publication dans lesquels un utilisateur peut entrer une URL sont étonnamment courants. Trouvez-moi un ingénieur principal qui, à un moment donné, n'a pas eu besoin de créer un système de gestion de contenu. Nous pouvons ne pas penser de la même manière, mais si vous acceptez les entrées de l'utilisateur, vous devriez réfléchir à ce qu'il faut faire si ces entrées contiennent des URL. 
 Maintenant que vous connaissez l'oEmbed (désolé), vous n'avez aucune excuse. ne prenez pas sérieusement en compte la manière dont vous gérez les URL dans vos projets futurs. 
 (ra, il)