Une API de lecture pour Medium via un FaaS
Ou comment avec un peu de javascript, on peut afficher la liste de ses articles Medium sur son site.
Aujourd’hui l’API, fournit par Medium, ne sert qu’à publier du contenu sur Medium depuis un endroit tiers (site web, appli mobile, etc).
Il n’existe pas d’API qui permet de récupérer tous les articles d’une publication Medium, or c’est exactement ce qu’on a voulu faire pour alimenter la page “Blog” du site d’Avalon Lab.
La seule façon de récupérer les articles d’une publication (ou d’un utilisateur, c’est la même méthode) est de passer par le flux RSS que fournit Medium.
Par exemple pour Avalon Lab, le flux RSS est le suivant : https://medium.com/avalonlab/latest?format=json
Il y a un sacré paquet de données, plus ou moins utiles, par exemple : le pour prévenir le JSON hijacking.
Ici, ce qui va nous intéresser dans la propriété payload, ce sont les propriétés posts pour avoir la liste des articles et references.User pour récupérer les informations sur les auteurs.
Première idée, dans notre Web Component Polymer, on utilise fetch() pour récupérer le flux RSS. Problème, ça ne fonctionne pas.
Un petit tour dans la console de dev de Firefox pour tester en live et cela nous donne :
Medium bloque les appels cross-domain, nous avons un problème de CORS.
La solution la plus simple serait alors d’implémenter ce fetch dans notre serveur ‘back-end’ que notre site Polymer appellerait ensuite.
Sauf que notre site est une GitHub Page, nous n’avons pas de back-end.
FaaS à la rescousse !
Pour palier à notre problème, nous allons utiliser une plateforme de FaaS, ‘Function as a Service’.
Ici, nous allons nous appuyer sur la plateforme Azure de Microsoft et utiliser Azure Function.
La documentation de Microsoft pour la création d’une Function App est assez bien faite.
Par contre, il faut juste faire attention à la configuration du CORS. Par défaut, seul les domaines https://functions.azure.com, https://functions-staging.azure.com, https://functions-next.azure.com sont autorisés.
A vous de rajouter vos propres domaines ou le wildcard *.
Pour réaliser notre Function App, nous allons utiliser un HTTP Trigger JavaScript avec le code suivant :
Cette fonction prend en paramètre un objet context, toujours en première position et obligatoire.
Cet objet context permet de communiquer avec le runtime Azure et de notamment l’informer que votre traitement est terminé via la fonction context.done() ou de logger des informations via context.log().
Dans cette fonction, nous allons d’abord charger le module node ‘HTTPS’ pour effectuer notre requête.
Ensuite, dans notre fonction exportée, nous faisons notre appel https.get() sur l’url du flux RSS de Medium.
Dans le bloc de retour resp.on(‘end’,…), on commence par retirer la chaine de caractères contre le JSON hijacking.
Ensuite, on construit un nouvel objet JSON en ne récupérant que les informations des articles (payload.posts) et des auteurs (payload.references.User).
Cet objet est ensuite retourné dans le body de notre réponse via la propriété context.res = {}.
Voilà, maintenant nous avons un bel objet JSON consommable par notre site !
(ceci n’est qu’un extrait, medium remonte beaucoup d’informations).
Ici, nous avons utilisé le FaaS d’Azure, mais la même chose est possible avec d’autres solutions de FaaS.
Le code de la fonction sera bientôt disponible sur notre GitHub, stay tune !
Update du 12/06/18 :
Si vous souhaitez que le contenu de la requête soit mis en cache par le navigateur, n’oubliez pas d’ajouter le header ‘cache-control’: ‘ max-age=xxx’.
Nous avons publiez sous forme de gist le code de cette fonction :
