Blog de EnviosSMS.com Manténgase al día con nuestras ultimas novedades! Volver al Blog
¿Cómo usar y enviar SMS desde la API Web?
En este tutorial le enseñaremos como usar los WebServices Rest API para poder enviar mediante ellos un SMS, y así poder integrar funcionalidades a cualquier sistema o sitio que desee.
Mediante un ejemplo les mostraremos como enviar un mensaje de texto con la API explicando cada uno de los detalles y el procedimiento para realizarlo de manera correcta.
Lo primero que vamos a hacer es aclarar cómo funciona nuestra API, la misma es del tipo REST lo que significa que funciona a través de peticiones HTTP con un formato JSON y recibirá una respuesta con un mensaje de estado de la petición. En nuestro caso la misma atiende en http://api.enviossms.com/restapi
Para entender y experimentar este tutorial es necesario tener conocimientos básicos de lenguajes de programación. Usted puede realizar el proceso en cualquier lenguaje, en este caso usaremos ejemplos en los lenguajes de Javascript, JQuery como framework o PHP. Usted luego podrá basarse en el ejemplo que más le sirva en su sistema.
De lo primero que vamos a hablar es sobre los campos de la petición, la URL será «http://api.enviossms.com/restapi/sms/1/text/single» y la petición será del tipo POST, esta misma debe llevar una cabecera «Authorization» que estará compuesta de la manera «nombredeusuario:contraseña» y además debe estar encriptada en base64.
Por ejemplo:
Nombre de usuario: UsuarioEnviosSMS
Password: SuClave
Cadena: UsuarioEnviosSMS:SuClave
Cadena codificada en Base64: QWxhZGRpb1pvcGVuIHNlc2FtXQ==
La cabecera tendría el siguiente formato
Authorization: Basic QWxhZGRpb1pvcGVuIHNlc2FtXQ==
Al principio hay que agregar la palabra «Basic» más la cadena encriptada con un espacio en el medio.
La cabecera finalmente quedaría formada de la siguiente manera:
- Authorization: Basic QWxhZGRpb1pvcGVuIHNlc2FtXQ==
- Content-Type: application/json
Después de establecer la cabecera pasaremos a los campos de la petición, que serán con los parámetros from, to, text. Estos indican el remitente, el destino, y el texto del mensaje a enviar respectivamente.
El destino tendrá que utilizar el formato de número E.164. Estos números de teléfono deben indicarse con el prefijo +(signo más), seguido del código de país, código de área (sin 0) y número de teléfono.
Tomando este ejemplo de un teléfono móvil para Argentina 011 1523456789, el número en formato internacional sería: 5491123456789, note que se omite el 0, el 15 y se agrega un número 9.
Código ejemplo:
index.html
<!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>
Con este código HTML se nos generará 2 campos básicos como se muestra en la imagen, con los que se ingresan el texto del mensaje y el número de telefóno móvil del destinatario del mensaje, junto a un botón para enviar el mensaje que ejecute la función EnviarSMS() que declararemos en los siguientes Scripts.
El formulario se nos mostrara de la siguiente forma:
//Código JavaScript const usuario_contraseña = 'usuario:contraseña', encriptacion = window.btoa(usuario_contraseña), url = 'http://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); }); } }
En el código anterior se logra realizar la petición en JavaScript, primero declaramos las constantes con los datos de ‘usuario:contraseña’ de la cuenta y luego la encriptamos como nos pide la API con window.btoa(). Definimos la cabecera de nuestra petición para luego crear la función EnviarSMS() que tomará los datos de los campos del HTML, y enviarlos en la petición utilizando el objeto Fetch para luego mostrar la respuesta por consola.
//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: 'http://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); } }); }
En este otro código se nos muestra un ejemplo en Javascript pero en este caso utilizando JQuery, muy sencillo, solo se escribe la función EnviarSMS() para luego tomar los datos del formulario HTML y así generar la petición Ajax
Ejemplo en PHP
index.php
<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 = "http://api.enviosms.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>
Finalmente otro ejemplo en este caso en uno de los lenguajes de servidor más utilizados, PHP, tomando el mismo formulario Html y armando la petición con el objeto CURL, los pasos a seguir para armar la petición siguen siendo igual que los anteriores, ahora para encriptar los datos de nuestra cuenta utilizaremos la línea base64_encode(). Si al lanzar la petición se ejecuta correctamente recibirá el código 200.