Como enviar SMS a partir de Javascript
A maneira mais simples de enviar SMS a partir de JavaScript é usar a API HTTP/Rest de SMS integrada do Ozeki SMS Gateway. Ao usar esta API, você enviará mensagens SMS enviando uma requisição HTTP Post para o gateway de SMS. A requisição HTTP Post conterá uma mensagem formatada em formato json. O gateway de SMS enviará este SMS para o telefone do destinatário e retornará uma resposta HTTP 200 OK para a sua requisição.
O exemplo de código JavaScript para SMS abaixo demonstra como você pode enviar SMS usando a API HTTP Rest de SMS do Ozeki SMS Gateway com a biblioteca JavaScript Ozeki.Libs.Rest. Esta biblioteca é fornecida gratuitamente e você pode usá-la e modificá-la em qualquer um dos seus projetos.
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>Enviar SMS com 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>Destinatário:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texto:</b>
<input class="form-control" type="text" id="Text" placeholder="Olá mundo!">
<button class="btn btn-primary" id="btnSend">
<b>ENVIAR</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Logs:</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>
Como usar o exemplo de SMS em JavaScript:
Este exemplo de SMS em JavaScript pode ser usado em qualquer aplicação web. Para usá-lo, você deve adicionar o Ozeki.Libs.Rest.js ao seu projeto. Depois de adicioná-lo ao seu projeto, você deve incluir a diretiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; na seção de cabeçalho do seu código-fonte JavaScript. Isso permitirá que você use as classes fornecidas pela biblioteca Ozeki.Libs.Rest. Você pode usar a classe Message para criar o SMS. Você pode usar a classe MessageApi para enviar o SMS para o gateway de SMS. O gateway de SMS encaminhará sua mensagem para a rede móvel através de uma conexão wireless ou pela Internet.
Baixar SendSms.js
O código-fonte explicado neste artigo pode ser baixado, usado e modificado gratuitamente.
Download: SendSms.js.zip (5.3Kb)
O arquivo SendSms.js.zip contém a biblioteca Ozeki.Libs.Rest, que fornece todas as ferramentas necessárias para enviar e receber mensagens SMS. Você também encontrará o projeto SendSms no zip, que contém o código de exemplo para mostrar como enviar um SMS. Este código de exemplo está listado abaixo.
Para enviar SMS a partir de JavaScript:
- Instale um usuário de API HTTP
- Ative "Log communication events" na aba Advanced
- Baixe e instale o WampServer
- Baixe e extraia o arquivo SendSms.js.zip
- Coloque o conteúdo do arquivo zip na pasta \www\ do wampserver: C:\wamp64\www
- Inicie o aplicativo Ozeki SMS Gateway
- Abra o site digitando http://localhost/SendSms.php no seu navegador
- Depois de abrir o site, você pode enviar um SMS clicando no botão Enviar
- Verifique os logs para confirmar se o SMS foi enviado
Instale o Ozeki SMS Gateway e crie um usuário de API HTTP
Para poder enviar SMS a partir de JavaScript, primeiro você precisa instalar o Ozeki SMS Gateway. O gateway SMS pode ser instalado no mesmo computador onde você desenvolve seu código JavaScript no Visual Studio. Após a instalação, o próximo passo é conectar o Ozeki SMS Gateway à rede móvel. Você pode criar um usuário de API HTTP para SMS. Crie um usuário com o nome de usuário "http_user" e senha "qwe123" para que o exemplo funcione sem modificações.
Após a configuração do ambiente, você pode executar seu código JavaScript.
URL da API HTTP para enviar SMS a partir de JavaScript
Para enviar SMS a partir de JavaScript, seu código JavaScript terá que fazer uma requisição HTTP para o gateway SMS. A URL da API é mostrada abaixo. Observe que o endereço IP (127.0.0.1) deve ser substituído pelo endereço IP do seu gateway SMS. Se o Ozeki SMS Gateway estiver instalado no mesmo computador onde o aplicativo JavaScript de SMS está sendo executado, pode ser 127.0.0.1. Se estiver instalado em um computador diferente, deve ser o endereço IP desse computador.
http://127.0.0.1:9509/api?action=rest
Autenticação HTTP para enviar SMS a partir de JavaScript
Para autenticar o cliente de SMS em JavaScript, você precisa enviar o nome de usuário e senha em uma string codificada em base64 para o servidor em uma requisição HTTP. O formato utilizado é: base64(nome de usuário+":"+senha). Em JavaScript, você pode usar o seguinte código para fazer essa codificação:
// Você pode encontrar o codificador Base64 no arquivo Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Por exemplo, se você codificar o nome de usuário 'http_user' e a senha 'qwe123', obterá a seguinte string codificada em base64: aHR0cF91c2VyOnF3ZTEyMw==. Para enviar
Cabeçalho da requisição HTTP para enviar SMS a partir de JavaScript
Para enviar as mensagens SMS, você precisa incluir as seguintes linhas como cabeçalhos na requisição HTTP. Observe que incluímos um cabeçalho de tipo de conteúdo e um cabeçalho de Autorização.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Requisição HTTP para enviar SMS a partir de JavaScript
Para enviar o SMS, seu aplicativo JavaScript enviará uma requisição HTTP semelhante à mostrada abaixo. Observe que esta requisição contém uma parte de cabeçalho HTTP e uma parte de corpo HTTP. O corpo HTTP é uma string de dados codificada em JSON. Ela contém o número do destinatário e o texto da mensagem.
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": "Olá mundo!",
"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
}
]
}
Resposta HTTP recebida pelo exemplo de SMS em JavaScript
Assim que o gateway SMS receber esta requisição, ele gerará uma resposta HTTP. A resposta HTTP conterá um código de status para indicar se a requisição de envio de SMS foi bem-sucedida ou não. Também retornará uma estrutura codificada em JSON para fornecer detalhes úteis sobre o envio da mensagem.
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": "Mensagens enfileiradas para entrega.",
"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": "Olá mundo!",
"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"
}
]
}
}
Conecte seu gateway SMS à rede móvel e crie uma conta de usuário de API HTTP
Assumimos que você já instalou o Ozeki SMS Gateway e conectou-o à rede móvel. Para poder enviar SMS para um telefone móvel a partir de JavaScript, você precisa configurar uma conta de usuário de API HTTP no Ozeki SMS Gateway.
Crie um novo usuário (Tutorial em vídeo)
Este vídeo mostra como configurar uma nova conta de usuário de API HTTP. Ele começa com a página inicial do Ozeki SMS Gateway e termina com a aba de Eventos do novo usuário. O vídeo mostrará como criar e configurar seu novo usuário. O melhor deste vídeo é que ele tem apenas 30 segundos, mas contém todas as informações necessárias para criar um novo usuário de API HTTP.
Como enviar SMS a partir de JavaScript usando a API de SMS JavaScript (Tutorial em vídeo)
Este vídeo mostra como baixar o arquivo SendSms.js.zip desta página. Se assistir ao vídeo, você notará que o conteúdo do SendSms.cs zip é colocado na pasta \www\ do WampServer. Você também verá que executamos o WampServer clicando duas vezes em seu ícone e, depois disso, digitamos http://localhost:8080/SendSms.js no navegador da web.
Exemplo de SMS em JavaScript: SendSms.js
O código de exemplo abaixo faz parte do arquivo PHP SendSms.php.
Além disso, você verá outros dois arquivos chamados SendSms.css e Ozeki.Libs.Rest.js.
- O arquivo Ozeki.Libs.Rest.js contém todas as ferramentas necessárias para enviar, excluir, marcar e receber mensagens SMS.
- O SendSms.php contém o código JavaScript e alguns cabeçalhos que nos permitirão enviar solicitações HTTP sem erros de CORS.
- O SendSms.css contém a folha de estilos.
Depois que o SMS for enviado, é uma boa ideia verificar seu gateway de SMS para ver o que foi recebido. Você pode verificar o log abrindo os detalhes do usuário HTTP no console de gerenciamento do Ozeki SMS Gateway. O vídeo a seguir mostra o que procurar. O vídeo começará com o código aberto e terminará com os detalhes da mensagem enviada. Você aprenderá como iniciar o projeto, como o projeto se parece durante a execução e como o arquivo de log fica depois. O vídeo tem apenas 42 segundos e é fácil de entender. Você não terá problemas para acompanhá-lo.
Como verificar se o SMS foi enviado para a rede móvel
O passo final para verificar o procedimento é dar uma olhada nos logs da conexão com a rede móvel. Talvez seja necessário ativar o registro na configuração da conexão antes de enviar a mensagem para ver os logs. Se o registro estiver ativado, você verá o número de telefone e o texto da mensagem que enviou.
Testar se a solicitação foi aceita (Tutorial em vídeo)No vídeo a seguir, você verá como verificar se o cliente SMPP teve sucesso ao enviar sua mensagem. Você aprenderá como abrir a guia de eventos do usuário SMPP e o que procurar. O vídeo tem apenas 18 segundos, mas será muito útil.
SMS recebido no telefone (Tutorial em vídeo)
No vídeo a seguir, você verá como é uma mensagem recebida que foi enviada do Ozeki SMS Gateway. Ele começará com a tela inicial de um telefone Android e terminará com a mensagem aberta. Tem apenas 18 segundos e você pode ver todo o processo de recebimento de uma mensagem.
Resumo
O guia acima explicou as etapas para enviar SMS a partir de JavaScript. Como pôde ser visto, Ozeki fornece todas as ferramentas necessárias para o envio de mensagens, então, se as etapas forem seguidas cuidadosamente, enviar mensagens a partir de JavaScript não será mais um problema. O Ozeki SMS Gateway desempenha um papel enorme no envio, você não conseguiria alcançar os usuários móveis sem este programa. É importante notar que o Ozeki SMS Gateway funciona em qualquer país, então as mensagens podem ser enviadas internacionalmente com esta solução.
Não termine a leitura aqui, navegue pela página de tutoriais da Ozeki e aprenda sobre recebimento de SMS em JavaScript.
Sua próxima tarefa é baixar o Ozeki SMS Gateway e começar a trabalhar!
More information
- Enviar SMS em Javascript com a API HTTP rest (exemplo de código)
- Enviar múltiplos SMS em Javascript com a API HTTP rest (exemplo de código)
- Agendar SMS em Javascript com a API HTTP rest (exemplo de código)
- Receber SMS em Javascript com a API HTTP rest (exemplo de código)
- Excluir SMS em Javascript com a API HTTP rest (exemplo de código)
- Como baixar a biblioteca mais recente da API de SMS em JavaScript do Github