Ah oui, justement.
Alors,
moi aussi, j'ai essayé,
là sur un site qui est vraiment qui s'appelle
whatismyip.com
dans l'AVM.
Je vais noter aussi, en fait c'est possible
que cette IP locale là, elle ne marchera pas.
Parce que moi aussi,
j'ai 10.36.
10.36.
Toi c'était 18 ? 10.3, on va la noter quand même.
Ah ouais, du coup c'est la même.
Ok.
Ok, bon, alors écoute, on va essayer.
C'est quoi tu dis ?
18.
Ok.
Alors attends, donc on va essayer tout ça.
Est-ce que chez toi,
ça tourne maintenant le Hello World ?
Ok, bah écoute, essaye.
Et je vais essayer de te contacter.
Voilà. Moi de mon côté,
alors tu peux regarder, je vais aller
récup... je vais essayer, aller 10.03.
18, on va essayer celle-là.
Essay.js,
là, là je suis côté client maintenant,
tu te souviens ? Alors je vais en faire un,
je vais faire save as, on va le simplifier.
Pas grave, toi tu peux laisser
jusqu'à demain s'il faut s'exécuter.
Y'a aucune urgence.
Donc, test.
Express.
API.
Alors,
console.coco, on va simplifier.
Console.coco, ça dégage.
URL.
Ça va être juste une IP maintenant.
Euh, non, il faut que je mette
HTTP par exemple.
Je vais mettre...
...
Le port 3000, parce que
t'as mis 3000 toi.
Voilà.
Const Axios,
je vais pas mettre de paramètres, on va pas s'embêter.
Pour l'instant, je simplifie à mort.
Function d'end,
finalis, ça dégage aussi.
Et en cas d'erreur,
ça m'intéresse d'avoir là.
Et s'il y a une réponse,
je vais afficher la réponse.
Tu vois ce que je vais faire.
Je vais afficher
les data si y'a.
Plus simple, tu meurs.
Je vais exécuter ça.
Et voir si j'arrive à te contacter.
Est-ce que...
Tu m'as répondu à le voir.
C'est bon.
Voilà.
Donc là, toi t'as un début d'API.
Alors, c'est une API pour l'instant.
T'as vu, y'a même pas de...
T'as pas le slash.
Et puis les fonctions que remplit l'API.
Mais c'est un embryon là, tout à fait.
Donc ce que tu pourrais faire maintenant,
tu vois, c'est ici.
Tu vas ajouter maintenant ici,
pour chacune des fonctions
que tu veux que ton API remplisse.
Tu vas dire...
Bonjour, par exemple.
Au revoir.
Et puis, tu as un API qui est...
Qui peut dire...
Hello, bye.
Et puis là...
Ask me slash...
Bonjour.
En slash...
Au revoir.
Tu vois, moi je pourrais faire ça, si tu veux.
Et...
Bah tiens, on va faire ça.
Ça va être à ton tour de m'appeler, justement.
Je vais te remettre mon code tout de suite.
Et on va faire comme ça.
Je peux faire ça ? Yes.
Voilà, comme ça tu peux recopier ça, si tu veux.
Alors moi je prépare l'API de mon côté.
Je vais l'exécuter.
Moi si j'en ai mon adresse,
c'est ça.
Tu sais quoi ? Je vais te copier tout ça
dans le...
Voilà.
Alors là il me met object object
parce qu'effectivement ça me gène.
Je peux mettre reg.
Alors ce qui est bien ici,
c'est que comme c'est apparemment
bien foutu,
il me met l'autocompletion.
Il connaît bien Express là.
Et puis donc il me met...
Est-ce que j'ai par exemple client ?
Non.
Origin.
Origin et URL.
C'est pas ça que je veux. C'est adresse peut-être.
Non. Qu'est-ce que j'ai ?
À quoi j'ai accès ?
Bays URL, c'est bien ça.
Je ne sais pas comment ça mais...
Body c'est bien.
Headers il devait y avoir forcément.
Voilà.
Tu vois j'ai les headers.
Ça c'est obligé.
Hostname, est-ce que c'est toi ça ?
Ah IP, voilà il est là.
Tiens regarde, IP.
Comme ça.
Reçu requête.
Allez on va mettre reçu requête 2.
Espaces.
IP.
Tac tac.
Je vais fermer ça maintenant.
Qu'est-ce qu'on avait encore on a dit ?
Ah oui headers.
Bah tiens t'auras...
On va faire que tu vas m'envoyer
en headers.
Ah oui il y a hostname aussi.
Et params, voilà les fameux paramètres d'URL.
Alors on va faire que tu vas m'envoyer
comme un paramètre d'URL
qui va s'appeler
ID par exemple.
Params.id
Ouais ? Ouais ouais.
Et puis reg.URL
Et moi je vais mettre l'IP,
le reg.params.id
url.
Donc id ce sera en minuscule.
Alors attends, faut que je redémarre du coup moi.
C'est parti.
Voilà c'est bon.
Alors j'ai
enigre 12.
Ah c'est peut-être moi qui fait pas comme il faut.
Alors attends c'est peut-être comme ça.
Ah ouais mais je vois bien le 12 là.
Donc je pense que ça doit être un truc comme ça.
Genre qu'il faut que je fasse peut-être.
Alors essaye-moi.
Tu m'appelles à la racine ?
On va réessayer ça avec ça.
Avec l'id.
Bon je sais pas pourquoi.
Il faudrait regarder la doc d'express pour
pour finir cet exemple correctement.
Mais tu vois l'idée c'est que en fait
là on peut construire une vraie
interaction
logique quoi.
Ils ont bien c'est ça.
Ah ouais alors
est-ce que ça marche ça ?
Ou est-ce qu'il vaut mieux passer par
params ?
Peut-être essaye avec params on va voir
la différence et moi je vais chercher
pendant ce temps dans la doc
d'Axios.
Pardon de l'Express.
En fait de mon côté je vais faire un truc moins plus.
D'accord.
Non c'est très bien comme ils ont fait le truc
en fait avec params.
Est-ce que ils ont appelé ça un trône ?
Non que params du coup.
On est pas loin
mais en fait ils ont fait un truc vachement bien.
Donc regarde.
Dans Express les params
en fait.
Ce que j'essayais de faire moi dans mon code ici
avec params je voulais aller un petit peu vite.
Alors dans Express
c'est pas
la même chose ici params
que ça là.
Tu te souviens ici
regarde disons
slash v2 slash la slash nbbo
et là un truc qui peut être
un peu variable. Donc qui va prendre cette valeur là.
Par exemple si tu regardes la murelle complète
ça va être slash v2 slash last
slash nbbo
ça c'est le chemin
ça c'est le head point.
Avec en plus une valeur
qui va te choisir
au dernier moment par la personne qui fait la peine.
Si c'était des
currencies tu vois ça se trouve ce serait un truc
genre un euro
ou une yen
etc.
C'est ça les params dans Express.
Donc c'est encore avant
le point d'interrogation là.
Tu vois ici
on construit un chemin comme ça.
Je ne vais pas trouver rapidement
mais c'est pas grave on va faire un autre exemple
en utilisant les params il n'y a pas de soucis.
Donc je vais faire du coup
une route différente.
On va juste faire comme ça.
On veut dire que ici
sli bonjour
je vais te mettre ça dans la doc
carrément on va faire ça bien.
Your name
envoi slash
your name
ok
Donc moi ce que je vais te demander
c'est de passer ici
si tu m'envoies
je vais simplifier ici
reçu requête de l'IP
machin
requête url ça c'est bon.
Si tu m'envoies
quoi que ce soit à la racine
je vais te dire ask me bonjour avec your name
ou au revoir avec your name.
Donc là je fais un petit peu la même chose
que là tu vois je documente
en te disant ce qu'il faut que tu m'envoies.
Et maintenant
en suivant la doc
de express là
les paramètres ça va s'indiquer par un
deux points de doc.
Je vais le faire comme ça.
Je vais l'appeler juste name
pour faire plus simple.
Pareil avec au revoir
au revoir slash
deux points name
et maintenant ici
avec le nom
rex.params.name
parce que je l'ai mis
avec ici
deux points nanana
si tu me contacte il va parser
la requête comme ça et il va ranger
la valeur que tu vas me passer
dans rex.params.name
Je vais le retrouver
côté serveur comme ça.
Donc en fait express voilà il me lâche
vachement le boulot si tu veux.
Et ce que je vais faire c'est que moi
quand je vais te répondre je vais t'appeler par ton nom.
Hello
name
du coup c'est avec
params.name
et je vais le mettre dans la réponse.
Goodbye
Il y aura un slide de démon aussi.
Donc on a parlé de haute
qui souvent
est confondue
les anglais ils diront
l'autre quoi.
Mais si on veut être précis
il faut qu'on distingue l'identification
de la trist.
Alors
il y a ce truc qui s'appelle
haute
alors c'est un truc
donc
il y a un produit commercial
qui s'appelle haute zero et il faut pas
confondre parce qu'il est très bien placé
dans les résultats google et c'est très bien
haute zero. Mais c'est un produit commercial
c'est une
librairie qui fait des trucs de identification
etc. Et moi ce genre de jeu
de parler c'est haute.
Donc il faut aller voir ici
soit dans wikipedia soit
dans le site web
ou haute.
Voilà
c'est un standard
open source donc à ne pas confondre
avec haute zero.
Je vais même le mettre dans le
dans le doc, on va le mettre là.
Il a très bien choisi ce tournant pour que tout le monde s'embrouille
et viennent acheter leurs produits
mais bravo à eux.
Tant mieux pour eux.
Non c'est très bien, c'est vraiment très bien compris.
Donc haute c'est quoi ?
L'idée c'est que, imagine
on est une startup, on fait une application
mobile pour permettre
aux gens qui utilisent Instagram
d'avoir
des statistiques
sur leur compte
de gérer plus facilement
leurs followers etc.
Du monde actuel
de l'économie actuelle.
Donc nous
nos utilisateurs par exemple
vraiment c'est des gens qui vont nous payer
15 dollars peut-être par mois
pour avoir
des outils très puissants
pour gérer leur compte Instagram.
C'est vraiment des gens qui ont besoin de ça
parce que c'est leur job, ils sont prêts à payer.
Et nous on va leur fournir
des fonctionnalités
au niveau de notre interface
que Instagram n'a pas prévu.
Par exemple on va
prendre en compte
qui les a unfollow
récemment,
qui est-ce que eux
ils follow et que
je ne sais pas si tu connais
Instagram et tout ça.
Qui est-ce que eux ils suivent
et qui ne les suivent pas en retour.
Vraiment toute une logique si tu veux
de gens qui font de la com
dans la réseau social.
Nous on a ces fonctionnalités.
Le problème c'est que notre application
on écrit du code
et puis au moment où on va se connecter
à l'API d'Instagram
c'est dangereux
si notre code
il a accès
potentiellement à
n'importe quel compte Instagram.
Instagram lui ne nous donnera
jamais l'autorisation
il ne nous fait pas confiance
pour dire
non non mais t'inquiète
si je te dis
de modifier le compte
de Monsieur Machin, fais le.
Instagram ne nous fera jamais confiance à ce point là.
Donc ce qui va se passer
c'est que contrairement à une application traditionnelle
si j'écrivais une application traditionnelle
pour me connecter à une API
j'aurais
dans mon application
un token.
C'est ce que j'ai fait là depuis ce matin là.
J'ai un token
ce token permet à mon appli
d'attaquer l'API
et de dire c'est moi
l'API dit d'accord
et m'autorise
là jusqu'à maintenant je n'ai fait que de la lecture
donc c'est pas très grave.
Tout le monde a a priori les mêmes droits
après si tu payes t'as accès à plus de trucs
bien sûr on a vu mais grosso modo
une fois que t'as le token
tout le monde peut voir les mêmes trucs.
Dans les cas comme celui que je viens de dire
avec Instagram, on est dans un cas
où en fait on va vouloir cloisonner
vachement les informations.
C'est à dire que si
tu viens avec tel
token
tu vas pas pouvoir voir tout.
Tu vas pouvoir voir que les infos
d'un utilisateur en particulier.
C'est à ça que sert OOTH
c'est
à permettre de dire
au moment d'arriver devant l'API
de dire hey c'est moi
j'ai les autorisations pour voir
le compte de Monsieur David
Roullain.
Tu peux me faire...
Fais moi confiance pour te dire
même de faire des
modifs dans le compte par exemple
supprimer tel poste
ou publier telle image ou je ne sais quoi.
Bien sûr que Instagram veut
cette possibilité.
C'est des gens, Instagram, Facebook
les banques, tout ce que tu veux.
Les business qui ont des api
puissantes
ont tout intérêt
à offrir des fonctionnalités les plus
avancées possibles
et qui permettent donc ce mode
de fonctionnement où on va faire
les choses
comme on dit en français déjà
au nom de
quelqu'un d'autre.
C'est très voulu mais pour
le réaliser on va avoir ce qu'on appelle
une authentification
à...
il y a trois pattes en fait.
Il y a moi mon application
la start up, il y a
l'utilisateur
qui
utilise mon application
pour accéder à son compte
Instagram. Donc ça c'est la deuxième
pâte, c'est l'utilisateur.
La troisième pâte c'est Instagram.
Il y a trois acteurs dans l'histoire.
Dans une configuration
traditionnelle, t'as que deux pattes.
T'as mon app
et l'api.
Donc c'est simple.
Dans le cas que je décris c'est plus compliqué
et donc il y a une solution. Alors il n'y a pas que au-haut
mais c'est la plus populaire.
L'idée c'est quoi ?
C'est que chaque utilisateur
en utilisant la même base
de code
va pouvoir ici grâce à au-haut
se connecter à son compte Instagram
à lui.
Au-haut il va faire quoi ? Il va dire
en gros, c'est aussi une api
d'ailleurs.
Mais c'est une api qui va me renvoyer
un token en fait. Et après ce token
je pourrais m'en servir dans l'api d'Instagram.
Donc comment ça marche ?
En gros
mon code va contacter
un chemin particulier
dans l'api Instagram
qui va être
en fait où derrière le code ça va être
au-haut. C'est-à-dire
si je fais une analogie là
ça va être des chemins particuliers
comme ça tu vois.
Et à l'intérieur là dans les méthodes
ça va être du code
de la librairie au-haut.
Qui va
renvoyer comme réponse
un challenge
pour que
l'utilisateur
s'identifie ?
Le challenge, alors le plus simple
c'est pas le plus courant
mais ça existe.
Le challenge qu'il peut renvoyer
c'est par exemple, donne-moi ton user
en outre-face si c'est vraiment
pire.
L'exemple de
tu dis
le premier c'est le blanc
Pierre. Il dit
je suis Pierre, je voudrais mon compte Instagram
mais dans cette application. Donc c'est mon code
qui fait la requête
donc le code qu'il utilise
va dire, si t'es vraiment Pierre
donne-moi le mot de passe de Pierre.
Ouais, bah
la
ouais, c'est à dire
ça a dû déjà t'arriver
quand tu vas
sur un site et tu veux créer un compte
et il te dit, si tu veux tu peux te loger avec Google
ou il te dit, tu peux te loger avec
Facebook. Et bien ça c'est au-haut.
C'est exactement ça.
Là c'est vraiment au-haut
qui est mis en offre.
Ta desktop là ?
Ah ouais, je savais.
Ok, je ne savais pas qu'on pouvait.
Ouais.
Le
le au-haut
en fait permet
d'empêcher un
programmeur malveillant
d'utiliser
le compte Instagram
de quelqu'un à son insu. Donc
si tu as installé cette application
et que tu dis je suis
enfin je voudrais, voilà
mon compte Instagram c'est ça par exemple.
Tu vas dire voilà mon compte Instagram.
L'application va essayer de se loger.
Et en fait, Instagram
il dit ouais
moi qui me dit que
le programmeur là au moment où
Instagram reçoit la requête, il a
aucune idée que c'est vraiment l'utilisateur
qui est derrière. C'est peut-être un
compte piraté. Donc qu'est-ce qu'il fait ?
Il renvoie un challenge et il dit, si t'es vraiment Pierre
donne-moi le mot de passe de Pierre.
Et donc ça s'affiche dans l'app et c'est pour ça que t'as ce
truc où il te dit, êtes-vous
bien sûr de vouloir autoriser
l'application à faire ci avec votre compte Instagram ?
C'est ça un truc de challenge.
Voilà c'est ça. C'est à dire
le user mot de passe c'est
pas forcément le plus
voilà le plus
courant.
Alors tu soulèves un autre truc
qui est l'authentification de facteurs.
On en parlera. C'est encore
un autre truc l'authentification
de facteurs.
C'est un prince.
Il peut y avoir de l'authentification
de facteurs avec OAuth
comme
comme processus
pour vraiment identifier
que c'est Pierre et que c'est pas un
compte piraté avec un développeur maveillant.
Mais l'authentification
de facteurs c'est un truc plus générique
qu'on va trouver dans la sécurité
informatique qui consiste à dire
je vais pas me satisfaire d'un mot de passe
il me faut encore un deuxième.
Donc c'est pas forcément
dans les API
et dans OAuth. C'est plus généreux
comme concept.
Mais effectivement avec OAuth
des fois t'as
deux facteurs.
Du genre
tu veux clodier avec ton compte Microsoft
ou avec ton compte machin. Il te dit ouais ben attends
prends encore tout. Ok
et t'as peut-être volé le mot de passe de Pierre
donc est-ce que t'as bien le mobile
de Pierre ?
C'est ça l'idée.
Et ça arrive.
Donc ça c'est pour
OAuth. On
fera peut-être un exemple demain.
C'est un petit peu ambitieux mais c'est possible. On avance
relativement vite donc on verra.
C'est intéressant
mais c'est même pour des développeurs
expérimentés c'est un peu casse-tête. Donc
c'est pour ça que je dis qu'on maîtrise
quand même les bases avant.
Parce que en gros c'est quoi ?
C'est beaucoup d'allers-retours
en fait. Donc il faut bien comprendre
en fait
tu appelles en donnant un call back
c'est pas normal.
Tu appelles une méthode
d'une
pointe d'une API
en précisant un call back
de ton côté.
C'est vraiment assez avancé
comme usage. Et comme ça
OAuth va te dire si ça réussit
fais ça.
Je vais essayer de te montrer un exemple si on peut faire ça.
Ça peut être intéressant en fait.
Deuxième
sujet
qui a rien à voir pour le coup.
C'est un tout autre sujet mais c'est un truc qu'on va aussi trouver
un peu plus récent
comme paradigme mais c'est très
intéressant.
Ça a apparu
j'aurai du mal à dire quand ça a apparu exactement
c'est plus récent.
Donc le webfook
c'est
tu vas
donner
à un système. C'est vraiment une description
générale là que je fais. Il y a plein de
façons différentes dont c'est utilisé
après concrètement.
Le principe général c'est
tu contacts un système
en général
via une API
et tu lui dis s'il se passe
tel truc.
Voici une URL que je voudrais que
tu contacts.
C'est vraiment de l'abonnement.
On est proche de ce qu'on avait dit
sur la programmation événementielle
où on va dire s'il se passe tel événement à telle méthode
mais tout ça c'est dans du code.
Ça reste à l'intérieur du code et puis
ça s'exécute en mémoire.
Là c'est la même
philosophie mais via le web en fait.
On va dire s'il se passe ça. Alors voilà
je voudrais que toi le système
tu contacts cette URL.
Et donc s'il se passe ceci préviens-moi
le webhook c'est
l'adresse que moi je fournis.
Et ensuite l'événement se produit
et le système contacte cette URL.
Alors peut-être que cette URL
la truc chez moi.faire c'est peut-être
un site web que je héberge. Il est
pas forcément.
Tu vois contrairement à
un appel à une API
ou en fait c'est depuis là
où j'ai envoyé la requête
que je vais attendre la réponse.
Donc c'est ping pong quoi.
Un appel d'API.
Webhook c'est encore plus
décentralisé
dans le sens où
je vais dire à un système
tiens j'ai cette URL là
où je...voilà peut-être
je vais pas chez un OVH ou un fourmagnac
j'ai mis un truc
qui écoute et
ça ça contacte cette URL.
Donc ça
je le signale parce que
c'est en train de devenir assez à la mode
et on sort
un tout petit peu du cadre
de l'API traditionnel
dans le sens où l'API traditionnel c'est
je...requête
réponse
au même endroit d'où vient la requête.
Ça peut être intéressant on fera peut-être
un petit exemple rapide là-dessus.
Alors ici
le truc de dire si il se passe ceci
alors taillez en main c'est pas obligé d'être un appel
API ça peut être
par exemple GitRub
tu vois ce que c'est un GitRub.com ?
Ouais c'est pour héberger
des repositories Git
Donc GitRub
par exemple
il permet
de pour un repository
donné, un projet avec du code
d'automatiser certaines tâches
donc tu vas aller dans
les paramètres du projet
tu vas dire bah voilà si
à chaque fois que je te pousse du code
si je mets un tag spécial
alors tu lances par exemple
une compilation je sais pas quoi.
Voilà.
Et tu vas peut-être mettre par exemple
dans cette automatisation
alors cette automatisation
ça va s'écrire dans des fichiers de config
en fait c'est vraiment du texte
structuré, ça s'appelle du yaml
mais peu importe
sur un format d'instruction
comment ça s'inscrit
tu mets ces instructions d'automatisation
et tu vas dire
dedans par exemple
si je te pousse du code avec tel tag
fais telle action
envoie moi un mail à telle adresse
si telle
ou telle personne
a poussé du code sur telle branche
envoie moi un mail tu vois pour
si quelqu'un a supprimé un truc
envoie moi un mail je sais pas quoi
mais ça peut aussi être
contact ce webhook
et pour le coup
c'est pas du tout un appel d'API
le webhook là c'est juste
dans un fichier, dans un script de configuration
à un moment donné tu mets webhook
machin un truc
le webhook c'est un concept
et c'est pas
forcément toujours lié à un appel d'API
par contre
au moment
où le webhook il est activé
on est dans une
interaction de type API
c'est à dire que le système ici
il va contacter cette adresse
et ça va être
vraiment minimal dans le sens où
le système il en a
mais rien à faire de la réponse
l'idée du webhook
c'est que tu veux être prévenu
mais c'est vraiment
le, tu sais le
le livreur
qui vient, qui jette le colis
contre ta porte
et qui se barre en courant, il s'en fout totalement
si tu reçois un mail ou pas
on lui a dit d'envoyer un truc à cette adresse là
mais voilà, il s'intéresse pas
il a autre chose à faire
donc c'est en ça que je dis
que c'est un peu comme une API
parce que toi ici, en fait
ton webhook il va écouter
en espérant que le système va un jour
lui dire quelque chose mais
c'est juste pour être prévenu et faire
quelque chose en interne, en fait la réponse
tu peux la faire mais elle sert à rien
voilà
on trouve ce thème de plus en plus
maintenant dans la littérature, donc faut qu'on trouve ce que c'est
pareil, on pourrait parler d'autres choses
les websockets
y'a beaucoup de choses à dire
mais
je parlerai un petit peu de
de websockets et de webRTC
etc.
parce que c'est juste la culture
des échanges sur le web
entre systèmes
nous on est vraiment focus sur
les API, le web traditionnel
donc notre JavaScript
plus express, puis ton plus flash
ça c'est pour pouvoir faire une API
qu'est-ce qu'il nous reste à faire
17 heures
on peut se faire encore
une demi-heure comme on avait dit
je propose
ça va tu tiens le coup, c'est pas trop rassurant
c'est bon ? Cool
alors ce que je propose
c'est que on va juste essayer
d'aller un peu plus loin
premier exercice
que je vais te proposer
on va se prendre
il n'y a même pas 5 minutes, on va faire jusqu'à 17 heures
ouais, 17 heures, 10 heures, on va faire
en fait tu vas
appeler le même ici
mon hello world là
qui tourne
je vais le laisser tourner
tu vas l'appeler
mais cette fois-ci depuis le client
Python pour montrer que
on peut utiliser une techno de chaque côté
qui n'a rien à voir avec l'autre
donc juste réécrire le client que tu as fait
je l'ai mis ici, texte express
le tien il est mieux maintenant
refaire ça en Python
on va faire un autre script
ça va ?
je vais l'exécuter en permanence
comme ça, tu peux tester quand tu veux
et je vais aller me faire couler un café
parce que j'ai pas pris de poster
donc je te laisse 5-6 minutes
et puis on va voir
j'arrive