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
<html>
<head>
<meta charset="UTF-8" />
<title>Tuto API SMS</title>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="ENVOYER SMS" onclick="envoyerSMS();"/>
</div>
</body>
</html>
Ensuite il te faut créer un fichier javascript app.js contenant une fonction envoyerSMS()
function envoyerSMS(){
//code js ici
}
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)
curl 'https://api.twilio.com/2010-04-01/Accounts/AC76ccb6cc98916acb5cd12eea3f79a/Messages.json' -X POST \ --data-urlencode 'To=062266558899' \ --data-urlencode 'From=+33655608592' \ --data-urlencode 'Body=Ceci est un message de Test' \ -u AC76ccb6cc98916acb5cd12eea3fefe79a:[AuthToken]
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)
const url = "https://api.twilio.com/2010-04-01/Accounts/TON_ACCOUNT_SID/Messages.json"; const auth = "TON_CODE_API:TON_PASS_API";
Ensuite il te faut creer un variable Header qui permet de gerer le Header HTTP pour definir le Content-Type et l’Authorization
const myHeader = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization':'Basic ' + btoa(auth)
});
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
const init = {
method :'POST',
headers : myHeader,
mode : 'cors',
body:"To="+numTelTo+"&From=%TON_MUM_EXP&Body="+message
}
et enfin le fetch qui permet de faire la requête HTTP vers l’API
fetch(url, init)
.then(response => console.log(response))
.catch(error => console.log(error));
Ce dessous la fonction finale qui permet d’envoyer un SMS, (les clef API ont été modifier, il faut adapter cela)
function envoyerSMS(){
const messageAenvoyer = document.getElementById("messageAenvoyer").value;
const numTelToElement = document.getElementById("numTelToElement").value;
const message = encodeURI(messageAenvoyer);
const numTelTo = encodeURI(numTelToElement);
const url = "https://api.twilio.com/2010-04-01/Accounts/TON_ACCOUNT_SID/Messages.json";
const auth = "TON_CODE_API:TON_PASS_API";
const myHeader = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization':'Basic ' + btoa(auth)
});
const init = {
method :'POST',
headers : myHeader,
mode : 'cors',
body:"To="+numTelTo+"&From=%TON_MUM_EXP&Body="+message
}
fetch(url, init)
.then(response => console.log(response))
.catch(error => console.log(error));
}
Tout les détailles de ce tuto dans la vidéo ci-dessous. Tu peux également récupérer les fichiers du tuto ici
