Comment envoyer un SMS depuis JavaScript
La méthode la plus simple pour envoyer un SMS depuis JavaScript est d'utiliser l'API HTTP/Rest SMS intégrée d'Ozeki SMS Gateway. Lorsque vous utilisez cette API, vous enverrez des SMS en effectuant une requête HTTP Post vers la passerelle SMS. La requête HTTP Post contiendra un message formaté en JSON. La passerelle SMS enverra ce SMS au numéro du destinataire et renverra une réponse HTTP 200 OK à votre requête.
Code JavaScript pour envoyer un SMS vers un mobile
L'exemple de code JavaScript pour SMS ci-dessous montre comment envoyer un SMS en utilisant l'API HTTP Rest SMS d'Ozeki SMS Gateway avec la bibliothèque JavaScript Ozeki.Libs.Rest. Cette bibliothèque est fournie gratuitement et vous pouvez l'utiliser et la modifier dans tous vos projets.
SendSms.php
<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Headers: Authorization, Accept, Content-Type");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Envoyer un SMS avec Ozeki SMS Gateway</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="SendSms.css">
</head>
<body>
<div class="form-group form-container">
<b>Destinataire :</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texte :</b>
<input class="form-control" type="text" id="Text" placeholder="Bonjour le monde !">
<button class="btn btn-primary" id="btnSend">
<b>ENVOYER</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Journaux :</b></li>
</ul>
</div>
<script type="module">
import { Configuration, Message, MessageApi } from "./Ozeki.Libs.Rest.js";
var btnSend = document.getElementById("btnSend");
var configuration = new Configuration();
configuration.Username = 'http_user';
configuration.Password = 'qwe123';
configuration.ApiUrl = 'http://127.0.0.1:9509/api';
var api = new MessageApi(configuration);
btnSend.addEventListener("click", async function() {
var msg = new Message();
msg.ToAddress = document.getElementById("ToAddress").value;
msg.Text = document.getElementById("Text").value;
let result = await api.Send(msg);
document.getElementById('log-container').innerHTML += `<li class="list-group-item">${result}</li>`;
});
</script>
</body>
</html>
Comment utiliser l'exemple JavaScript pour SMS :
Cet exemple JavaScript pour SMS peut être utilisé dans n'importe quelle application web. Pour l'utiliser, vous devez ajouter Ozeki.Libs.Rest.js à votre projet. Après l'avoir ajouté, vous devez placer la directive import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; dans la section d'en-tête de votre code source JavaScript. Cela vous permettra d'utiliser les classes fournies par la bibliothèque Ozeki.Libs.Rest. Vous pouvez utiliser la classe Message pour créer le SMS. Vous pouvez utiliser la classe MessageApi pour envoyer le SMS à la passerelle SMS. La passerelle SMS transmettra votre message au réseau mobile soit via une connexion sans fil soit via Internet.
Télécharger SendSms.js
Le code source expliqué dans cet article peut être téléchargé, utilisé et modifié gratuitement.
Téléchargement : SendSms.js.zip (5.3 Ko)
Que contient le fichier SendSms.js.zip ?
Le fichier SendSms.js.zip contient la bibliothèque Ozeki.Libs.Rest, qui vous donne tous les outils nécessaires pour envoyer et recevoir des SMS. Vous trouverez également le projet SendSms dans le zip, qui contient le code d'exemple pour vous montrer comment envoyer un SMS. Ce code d'exemple est listé ci-dessous.
Comment envoyer un SMS depuis JavaScript (Instructions simples)
Pour envoyer un SMS depuis JavaScript :
- Installez un utilisateur HTTP API
- Activez "Log communication events" dans l'onglet Advanced
- Téléchargez et installez WampServer
- Téléchargez puis extrayez le fichier SendSms.js.zip
- Placez le contenu du zip dans le dossier \www\ de wampserver : C:\wamp64\www
- Lancez l'application Ozeki SMS Gateway
- Ouvrez le site en tapant http://localhost/SendSms.php dans votre navigateur
- Après avoir ouvert le site, vous pouvez envoyer un SMS en cliquant sur le bouton Envoyer
- Vérifiez les journaux pour voir si le SMS a été envoyé
Installer Ozeki SMS Gateway et créer un utilisateur HTTP API
Pour pouvoir envoyer des SMS depuis JavaScript, vous devez d'abord installer Ozeki SMS Gateway. La passerelle SMS peut être installée sur le même ordinateur où vous développez votre code JavaScript dans Visual Studio. Après l'installation, l'étape suivante consiste à connecter Ozeki SMS Gateway au réseau mobile. Vous pouvez envoyer un SMS test depuis l'interface Ozeki pour vérifier que votre connexion au réseau mobile fonctionne. La dernière étape pour préparer votre environnement est de créer un utilisateur HTTP SMS API. Créez un utilisateur avec le nom d'utilisateur "http_user" et le mot de passe "qwe123" pour que l'exemple fonctionne sans modification.
Après la configuration de l'environnement, vous pouvez exécuter votre code JavaScript.
URL de l'API HTTP pour envoyer un SMS depuis JavaScript
Pour envoyer un SMS depuis JavaScript, votre JavaScript devra effectuer une requête HTTP vers la passerelle SMS. L'URL de l'API est indiquée ci-dessous. Notez que l'adresse IP (127.0.0.1) doit être remplacée par l'adresse IP de votre passerelle SMS. Si Ozeki SMS Gateway est installé sur le même ordinateur que celui où l'application JavaScript SMS est exécutée, cela peut être 127.0.0.1. S'il est installé sur un autre ordinateur, cela doit être l'adresse IP de cet ordinateur.
http://127.0.0.1:9509/api?action=rest
Authentification HTTP pour envoyer un SMS depuis JavaScript
Pour authentifier le client JavaScript SMS, vous devez envoyer le nom d'utilisateur et le mot de passe dans une chaîne encodée en base64 au serveur dans une requête HTTP. Le format utilisé est : base64(nom d'utilisateur+":"+mot de passe). En JavaScript, vous pouvez utiliser le code suivant pour effectuer cet encodage :
// Vous pouvez trouver l'encodeur Base64 dans le fichier Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Par exemple, si vous encodez le nom d'utilisateur 'http_user' et le mot de passe 'qwe123', vous obtiendrez la chaîne encodée en base64 suivante : aHR0cF91c2VyOnF3ZTEyMw==. Pour envoyer
En-tête de requête HTTP pour envoyer un SMS depuis JavaScript
Pour envoyer les messages SMS, vous devez inclure les lignes suivantes comme en-têtes dans la requête HTTP. Notez que nous incluons un en-tête Content-Type et un en-tête Authorization.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Requête HTTP pour envoyer un SMS depuis JavaScript
Pour soumettre le SMS, votre application JavaScript enverra une requête HTTP similaire à celle ci-dessous. Notez que cette requête contient une partie en-tête HTTP et une partie corps HTTP. Le corps HTTP est une chaîne de données encodée en JSON. Il contient le numéro du destinataire et le texte du message.
POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 418
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
{
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"to_address": "+36201111111",
"text": "Bonjour le monde !",
"create_date": "2021-07-30T11:14:56",
"vaild_date": "2021-08-06T11:14:56",
"time_to_send": "2021-07-30T11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": true
}
]
}
Réponse HTTP reçue par l'exemple JavaScript SMS
Une fois que la passerelle SMS reçoit cette requête, elle générera une réponse HTTP. La réponse HTTP contiendra un code de statut pour indiquer si la soumission du SMS a réussi ou non. Elle renverra également une structure encodée en JSON pour vous fournir des détails utiles sur la soumission du message.
HTTP/1.1 200 OK
User-Agent: OZEKI 10.3.123 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Fri, 30 Jul 2021 11:03:09 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Messages en attente de livraison.",
"data": {
"total_count": 1,
"success_count": 1,
"failed_count": 0,
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"from_station": "%",
"to_address": "+36201111111",
"to_station": "%",
"text": "Bonjour le monde !",
"create_date": "2021-07-30 11:14:56",
"valid_until": "2021-08-06 11:14:56",
"time_to_send": "2021-07-30 11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
}
]
}
}
Connectez votre passerelle SMS au réseau mobile et créez un compte utilisateur HTTP API
Nous supposons que vous avez déjà installé Ozeki SMS Gateway, et que vous avez connecté au réseau mobile. Pour pouvoir envoyer un SMS à un téléphone mobile depuis JavaScript, vous devez configurer un compte utilisateur HTTP API dans Ozeki SMS Gateway.
Créer un nouvel utilisateur (Tutoriel vidéo)
Cette vidéo vous montre comment configurer un nouveau compte utilisateur HTTP API. Elle commence par la page d'accueil d'Ozeki SMS Gateway et se termine par l'onglet Events du nouvel utilisateur. La vidéo vous montre comment créer et configurer votre nouvel utilisateur. La grande chose à propos de cette vidéo est qu'elle ne dure que 30 secondes mais contient toutes les informations dont vous avez besoin pour créer un nouvel utilisateur HTTP API.
Comment envoyer un SMS depuis JavaScript en utilisant l'API SMS JavaScript (Tutoriel vidéo)
Cette vidéo vous montre comment télécharger le fichier SendSms.js.zip depuis cette page. Si vous regardez la vidéo, vous remarquerez que le contenu de SendSms.cs zip est placé dans le dossier \www\ de WampServer. Vous verrez également que nous lançons WampServer en cliquant deux fois sur son icône, puis nous tapez http://localhost:8080/SendSms.js dans le navigateur web.
Exemple JavaScript SMS : SendSms.js
Le code d'exemple ci-dessous fait partie du fichier PHP SendSms.php.
En plus de cela, vous verrez deux autres fichiers appelés SendSms.css et Ozeki.Libs.Rest.js.
- Le fichier Ozeki.Libs.Rest.js contient tous les outils nécessaires pour envoyer, supprimer, marquer et recevoir des SMS.
- Le SendSms.php contient le code JavaScript, et quelques en-têtes qui nous permettront d'envoyer des requêtes HTTP sans erreurs CORS.
- Le SendSms.css contient la feuille de style.
Comment vérifier que le SMS a été accepté par l'utilisateur HTTP (Tutoriel vidéo)
Après l'envoi du SMS, il est bon de vérifier votre passerelle SMS, pour voir ce qu'elle a reçu. Vous pouvez vérifier le journal en ouvrant les détails de l'utilisateur HTTP depuis la console de gestion d'Ozeki SMS Gateway. La vidéo suivante vous montre ce qu'il faut rechercher. La vidéo commence avec le code ouvert et se termine avec les détails du message envoyé. Vous apprendrez comment lancer le projet, à quoi ressemble le projet pendant son exécution et à quoi ressemble le fichier journal après. La vidéo ne dure que 42 secondes et est facile à comprendre. Vous n'aurez aucun problème à la suivre.
Comment vérifier que le SMS a été envoyé au réseau mobile
La dernière étape pour vérifier la procédure consiste à consulter les journaux de la connexion au réseau mobile. Vous devrez peut-être activer la journalisation dans la configuration de la connexion avant d'envoyer le message pour voir les journaux. Si la journalisation est activée, vous verrez le numéro de téléphone et le texte du message que vous avez envoyé.
Tester si la requête a été acceptée (Tutoriel vidéo)
Dans la vidéo suivante, vous verrez comment vérifier si le client SMPP a réussi à envoyer votre message. Vous apprendrez comment ouvrir l'onglet Events de l'utilisateur SMPP et ce qu'il faut rechercher. La vidéo ne dure que 18 secondes mais sera très utile.
SMS reçu sur le téléphone (Tutoriel vidéo)
Dans la vidéo suivante, vous verrez à quoi ressemble un message entrant envoyé depuis Ozeki SMS Gateway. Elle commence par l'écran d'accueil d'un téléphone Android et se termine par l'ouverture du message. Elle ne dure que 18 secondes et vous pouvez voir tout le processus de réception d'un message.
Résumé
Le guide ci-dessus a expliqué les étapes pour envoyer un SMS depuis JavaScript. Comme on a pu le voir, Ozeki vous fournit tous les outils nécessaires pour la livraison des messages, donc si les étapes ont été suivies attentivement, l'envoi de messages depuis JavaScript n'est plus un problème. Ozeki SMS Gateway joue un rôle énorme dans la livraison, vous ne pourriez pas atteindre les utilisateurs mobiles sans ce programme. Il est important de noter qu'Ozeki SMS Gateway fonctionne dans tous les pays, donc les messages peuvent être envoyés internationalement avec cette solution.
Ne terminez pas la lecture ici, parcourez la page de tutoriels d'Ozeki et apprenez-en plus sur la réception de SMS en JavaScript.
Votre prochaine étape est de télécharger Ozeki SMS Gateway et de commencer le travail !
More information
- Envoyer un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Envoyer plusieurs SMS en Javascript avec l'API REST HTTP (exemple de code)
- Planifier un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Recevoir un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Supprimer un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Comment télécharger la dernière bibliothèque d'API SMS JavaScript depuis Github