Skip to content

Instantly share code, notes, and snippets.

@jhowbhz

jhowbhz/Integracao.html

Last active October 10, 2022 18:48
Show Gist options
  • Save jhowbhz/fdeef0d066b91da99e83b508267a3c43 to your computer and use it in GitHub Desktop.
Save jhowbhz/fdeef0d066b91da99e83b508267a3c43 to your computer and use it in GitHub Desktop.
Download ZIP
Integração API do WhatsApp APIGratis
Raw
Integracao.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="apibrasil" />
<meta name="generator" content="APIBrasil" />
<title>APIBrasil - Examples</title>
<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.2/examples/cover/cover.css" rel="stylesheet" />
</head>
<body class="d-flex h-100 text-center text-black">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<img src="https://apigratis.com.br/img/logo.png" alt="">
<h1>WhatsApp QRCode</h1>
</div>
</header>
<main class="px-3 m-3">
<form class="row" onsubmit="return false;">
<div class="card pt-3">
<div class="card-title">
<img src="https://me-qr-scanner.com/assets/img/Mask-Group.png" class="w-20" alt="" id="image" />
</div>
<div class="card-body">
<div class="alert alert-primary d-none" role="alert"> </div>
<div class="alert alert-success d-none" role="alert"> </div>
<div class="alert alert-danger d-none" role="alert"> </div>
<div class="row">
<div class="col-6 mb-3">
<input type="text" class="form-control" id="session" placeholder="Samsung #1" required>
</div>
<div class="col-6 mb-3">
<input type="text" class="form-control" id="secretkey" placeholder="SecretKey" required>
</div>
<div class="mb-3">
<label for="qrcode" style="float: left">Token para demais requisições</label>
<input type="text" class="form-control" id="yourToken" placeholder="Aguardando iniciar a sessão..." disabled>
</div>
</div>
</div>
<div class="card-body">
<button type="submit" class="btn btn-lg w-100 btn-success" onclick="generateToken()"> Conectar uma sessão </button>
</div>
</div>
</form>
</main>
<footer class="mt-auto text-white-50">
<p><a href="https://apigratis.com.br/documentacoes" target="_blank">https://apigratis.com.br/docs</a></p>
</footer>
</div>
</body>
<script src="https:////cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
<script>
const server = 'https://whatsapp-free01.wppserver.com/api'
const server_socket = 'https://whatsapp-free01.wppserver.com'
const socket = io(`${server_socket}`, {
transportOptions: {
polling: {
extraHeaders: {
'Authorization': 'Bearer abc',
},
},
},
});
async function generateToken(){
session = document.getElementById('session').value
let secretkey = document.getElementById('secretkey').value //`LIzBSyCmNVzwt2ErKgtnZgG`
axios({
method: 'POST',
url: `${server}/${session}/${secretkey}/generate-token`,
responseType: 'stream',
}).then(async function (response) {
let data = JSON.parse(response?.data);
console.log(data)
document.getElementById('session').value
document.getElementById('yourToken').value = data?.token
document.getElementById('image').src = 'http://www.drivethrurpg.com/shared_images/ajax-loader.gif'
document.getElementById('image').style.width = '50%'
await startSession(session, data.token);
}).catch(function (error) {
document.getElementsByClassName('alert-danger')[0].classList.remove('d-none')
document.getElementsByClassName('alert-danger')[0].innerHTML = `<strong>Aviso!</strong> ${error?.response?.data?.message ?? 'Erro não identificado'}`
});
}
async function startSession(session, bearerToken){
document.getElementsByClassName('alert-danger')[0].classList.add('d-none')
document.getElementsByClassName('alert-success')[0].classList.add('d-none')
axios({
method: 'POST',
url: `${server}/${session}/start-session`,
responseType: 'stream',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${bearerToken}`
},
data:{
"webhook": "https://webhook.site/c5b08f90-fd50-4bc9-823c-a933269a6067"
}
}).then(async function (response) {
switch(response?.data?.status){
case 'CONNECTED':
document.getElementById('image').src = `https://static.wixstatic.com/media/46f3fb_0a0f693ad5af49e8adc522d5080165fc~mv2.gif`
document.getElementById('image').style.width = '40%'
break;
default:
document.getElementById('image').src = 'http://www.drivethrurpg.com/shared_images/ajax-loader.gif'
document.getElementById('image').style.width = '50%'
break;
}
}).catch(function (error) {
document.getElementsByClassName('alert-danger')[0].classList.remove('d-none')
document.getElementsByClassName('alert-danger')[0].innerHTML = `<strong>Erro!</strong> ${error.response.data.message}`
})
}
socket.on('onpresencechanged', () => {
console.log('onpresencechanged')
})
socket.on('qrCode', (qrCode) => {
document.getElementById('image').src = qrCode.data;
document.getElementById('image').style.width = '40%'
});
socket.on('session-logged', (session) =>{
if(session?.status == true){
Swal.fire({
icon: 'success',
title: 'Conectado!',
text: 'Sua sessão foi conectada com sucesso!',
confirmButtonText: 'Muito bom!',
footer: '<a href="https://apigratis.com.br/documentacoes" target="_blank">https://apigratis.com.br/docs</a>'
})
document.getElementById('image').src = `https://static.wixstatic.com/media/46f3fb_0a0f693ad5af49e8adc522d5080165fc~mv2.gif`
document.getElementById('image').style.width = '40%'
}
})
socket.on('received-message', (message) => {
if(session == message?.response?.session){
Swal.fire({
icon: 'success',
title: 'Mensagem recebida',
text: `${message?.response?.body ?? 'no text'}`,
showConfirmButton: false,
footer: '<a href="https://apigratis.com.br/documentacoes" target="_blank">https://apigratis.com.br/docs</a>'
})
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment