API SMS : ENVOYER DES SMS EN JAVASCRIPT (TWILIO)

Dans cette vidéo je vais te montrer comment envoyer des SMS via l’API de SMS Twilio. Pour cela je vais utiliser le langage Javascript mais on pourrait appeler cette API depuis n’importe quel langage de programmation comme le PHP, C, Node, Ruby etc…

Envoyer des SMS via une API en Javacript

Dans ce tuto je vais utiliser FETCH qui permet de faire des appels HTTP vers une URL. Fetch est de mieux en mieux supporté par les navigateurs mais pour etre sur tu peux utiliser le site canIuse et comme tu peux le voir c’est plutôt bien supporté.

La première chose a faire est de créer une page html de base qui inclue ton script Javascript, une bouton qui fait appel a une fonction envoyerSMS() qui sera dans ton fichier Javascript

Ensuite il te faut créer un fichier javascript app.js contenant une fonction envoyerSMS()

Tu te connectes ensuite sur le site de Twilio et tu crées un compte et tu fait une demande de numéro de téléphone sur cette page. Numéro de téléphone Twilio

Ensuite tu accèdes a l’explorer d’API SMS et tu choisis l’API SMS MESSAGE avec interface tu peux simuler un appel vers l’api de sms avec les paramètres, token qui vont bien.

Tu peux choisir ton langage cible, dans notre cas nous allons utiliser CURL, un outils qui permet de faire un requête HTTP en ligne de commande (Requiers Cygwin sous windows)

Cet technique est facultative mais elle permet de mieux comprendre ce qui se passe lors des appels aux API. elle permet de tracer les requêtes avec les en-tetes http etc.

A cette étape tu devrais déjà avoir reçu un premier SMS sur ton portable. Maintenant le but but est d’intégrer cela dans notre fonction Javascript.

Le première chose à faire est de créer 2 variables : url et auth qui contiennent l’URL vers l’API de SMS et le Token d’authentification (se renseigner sur la méthode Basic)

Ensuite il te faut creer un variable Header qui permet de gerer le Header HTTP pour definir le Content-Type et l’Authorization

note : le btoa permet d’encoder en binary64 ton login/pass

ensuit il faut créer un variable init pour définir tous les paramètres que fetch va devoir utiliser comme par exemple la méthode : POST, le CORS, le BODY etc

et enfin le fetch qui permet de faire la requête HTTP vers l’API

Ce dessous la fonction finale qui permet d’envoyer un SMS, (les clef API ont été modifier, il faut adapter cela)

Tout les détailles de ce tuto dans la vidéo ci-dessous. Tu peux également récupérer les fichiers du tuto ici

Un commentaire