¿Cómo integrar EnviosSMS a tu sistema o sitio Web?
A través del siguiente artículo aprenderás a utilizar la API para integrar EnviosSMS a tus sistemas, soluciones empresariales o sitio Web.
En este artículo aprenderás a utilizar la API RESTful que te ofrece EnviosSMS para poder enviar SMS desde tu sistema o sitio web, según lo requieras.
Antes de comenzar es válido aclarar que para entender este artículo y para su implementación es necesario tener conocimientos básicos en programación.
Nuestra API es de tipo REST, lo que significa que funciona a través de peticiones HTTP con un formato JSON. Del mismo modo, la respuesta a la petición también será en JSON y te informará si tu petición ha sido exitosa o hubo algún problema en el medio. La API de EnviosSMS atiende en la siguiente URL:
https://api.enviossms.com/restapi
La API puede ser solicitada desde cualquier lenguaje de programación. No obstante, por cuestiones prácticas, en este tutorial emplearemos una de las duplas más utilizadas en la Web actual, que es JavaScript y PHP.
En primer lugar, hablaremos de los datos obligatorios en la petición. Para enviar un SMS simple, debes realizar la petición a la siguiente URL:
https://api.enviossms.com/restapi/sms/1/text/single
Dicha petición debe ser de tipo POST y debe contener en su cabecera (Header) el parámetro Authorization que tendrá el valor nombreDeUsuario:contraseña encriptado en base64.
Por ejemplo, supongamos que los datos son los siguientes:
Nombre de usuario: MiUsuarioSMS
Contraseña o Password: 123456
Cadena (nombreDeUsuario:contraseña): MiUsuarioSMS:123456
La Cadena es el valor que debes encriptar en base64 y enviar en la cabecera de la petición POST. Por lo tanto:
Cadena codificada en base64: TWlVc3VhcmlvU01TOjEyMzQ1Ng==
Una vez que poseas la encriptación, el parámetro Authorization deberá quedar de la siguiente manera:
Authorization: Basic TWlVc3VhcmlvU01TOjEyMzQ1Ng==
Al principio, es necesario agregar la palabra Basic para aclararle a la API de EnviosSMS que es una autorización básica.
Finalmente, la cabecera de la petición HTTP de tipo POST deberá quedarte algo así:
- Authorization: TWlVc3VhcmlvU01TOjEyMzQ1Ng==
- Content-Type: application/json
Parámetros de la petición
Estos datos indican el remitente, el destinatario y el contenido del SMS a enviar, respectivamente.
El destino tendrá que utilizar el formato de número E.164. Es decir que los números telefónicos deben indicarse siguiendo el siguiente estándar:
- El prefijo + (signo de suma)
- Código de país (Lista Oficial)
- Código de área (sin 0)
- Número de teléfono en sí
Por ejemplo, para el teléfono móvil 011 15 2345-6789 de Argentina, el número en formato internacional sería:
54 9 1123456789
Nota que se omite el 0 y el 15, y se agrega el signo de suma (+) opcional, el código de país (54) junto al código de área (9)
Código HTML base
A partir de este código HTML se nos generarán 2 campos básicos. En uno se deberá ingresar el texto del mensaje y en el otro se introducirá el número de teléfono móvil del destinatario del mensaje, junto a un botón para enviar el mensaje. Dicho botón, ejecutará la función EnviarSMS() que declararemos en los siguientes apartados.
<!DOCTYPE html>
<!-- Codigo HTML -->
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Prueba API Envios SMS</title>
</head>
<body>
<input type="text" id="inputTexto" placeholder="Ingrese Mensaje">
<input type="number" id="inputNumero" placeholder="Ingrese número telefonico">
<button onclick="EnviarSMS();">Enviar mensaje</button>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
Realizar Integración utilizando JavaScript puro/vanilla.
En el código debajo realizamos la petición a través de JavaScript puro. Primero, declaramos las constantes con los datos de 'usuario:contraseña' de la cuenta y luego lo encriptamos en base64 con window.btoa(), tal como lo solicita la API de EnviosSMS. De este modo preparamos la cabecera de nuestra petición HTTP.
Luego, creamos la función enviarSMS() que tomará los datos de los campos del HTML para realizar la petición utilizando Fetch para luego mostrar la respuesta por consola.
//Código JavaScript
const usuario_contraseña = 'usuario:contraseña',
encriptacion = window.btoa(usuario_contraseña),
url = 'https://api.enviossms.com/restapi/sms/1/text/single',
myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', `Basic ${encriptacion}`);
const EnviarSMS = () => {
var texto = document.getElementById("inputTexto").value;
var numero = document.getElementById("inputNumero").value;
console.log(texto.length, numero.length);
if(texto.length != 0 && numero.length != 0 ){
const myInit = {
method: 'POST',
headers: myHeaders,
body: JSON.stringify({
'from': "Usuario",
'to': numero,
'text': texto
})
},
myRequest = new Request(url, myInit);
fetch(myRequest)
.then( response =>{
console.log(response);
});
}
}
Realizar Integración utilizando jQuery.
Si utilizas jQuery en lugar de JavaScript puro, también te preparamos instrucciones para que puedas integrar la API de EnviosSMS a tus proyectos y soluciones informáticas. Para ello, simplemente escribimos la función enviarSMS() para tomar los datos del formulario HTML y luego realizar la petición a través de AJAX.
//Código en JQuery
function EnviarSMS(){
var texto = document.getElementById("inputTexto").value;
var numero = document.getElementById("inputNumero").value;
var usuario_contraseña = "usuario:contraseña";
var encriptacion = window.btoa(usuario_contraseña);
console.log(encriptacion);
$.ajax({
type: "post",
url: 'https://api.enviossms.com/restapi/sms/1/text/single',
data: JSON.stringify({
'from' : "Usuario",
'to' : numero,
'text': texto
}),
headers:{
'Authorization' : "Basic " + encriptacion,
'Content-Type' : "application/json"
},
error: function(xhr, status, error){
var err = xhr.responseText;
console.log(err);
}
});
}
Realizar Integración utilizando PHP.
Para aquellos que busquen implementar nuestra API del lado del servidor /server side / backend presentamos la integración a través de PHP, uno de los lenguajes más utilizados. Para ello, tomamos los mismos datos del formulario HTML y armamos la petición HTTP que se realizará a través de la metodología cURL.
Los pasos para armar la petición continúan siendo igual a los anteriores lenguajes. Sin embargo, ahora para encriptar los datos en base64, PHP nos ofrece una función para ello (base64_encode()). Si al realizar la petición recibe el código 200, entonces la misma se concretó exitosamente.
<html lang="es">
<!-- Codigo PHP -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Prueba API Envios SMS</title>
</head>
<body>
<form action="index.php" method="post">
<input type="text" id="inputTexto" name="inputTexto" placeholder="Ingrese Mensaje">
<input type="number" id="inputNumero" name="inputNumero" placeholder="Ingrese número telefonico">
<button type="submit">Enviar mensaje</button>
</form>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$numero = $_POST['inputNumero'];
$texto = $_POST['inputTexto'];
$usuario_contraseña = "usuario:contraseña";
$encriptacion = base64_encode($usuario_contraseña);
$url = "https://api.enviossms.com/restapi/sms/1/text/single";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
"Authorization: Basic $encriptacion"
));
$params = array('from' => 'Usuario','to' => $numero, 'text' => $texto);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$data = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpcode == 200) {
echo $data;
}
}
?>
</body>
</html>
Conclusión
Integrar EnviosSMS a tu sistema es muy sencillo. Entendiendo los conceptos y el proceso presentado en este artículo, podrás consumir nuestra API RESTfull de forma práctica con cualquier lenguaje que utilices.
La sencillez con la que se emiten los mensajes vía API es una de las grandes ventajas de EnviosSMS, razón por la cual muchos desarrolladores nos eligen. Además, para aquellos programadores que deseen profundizar en el uso de la API, contamos con un apartado especial con las Referencias originales y Documentación Avanzada para Integradores.
Documentación Avanzada Probar con Postman