|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
|
<meta content="utf-8" http-equiv="encoding"> |
|
<style> |
|
.button { |
|
border: none; |
|
color: white; |
|
padding: 16px 32px; |
|
text-align: center; |
|
text-decoration: none; |
|
display: inline-block; |
|
font-size: 16px; |
|
margin: 4px 2px; |
|
transition-duration: 0.4s; |
|
cursor: pointer; |
|
} |
|
|
|
.buttonGreen { |
|
background-color: white; |
|
color: black; |
|
border: 2px solid #4CAF50; |
|
} |
|
|
|
.buttonGreen:hover { |
|
background-color: #4CAF50; |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<h1>WhatsApp client browser example</h1> |
|
|
|
<form> |
|
<label for="idInstance">Id Instance:</label><br> |
|
<input required type="text" id="idInstance" name="idInstance"><br> |
|
<label for="apiTokenIsntance">API Token:</label><br> |
|
<input required type="text" id="apiTokenIsntance" name="apiTokenIsntance"><br> |
|
</form> |
|
|
|
<p style="color:blue" id="statusText"></p> |
|
<p style="color:blue" id="resultText"></p> |
|
<p>Press button to get qr code</p> |
|
<div style="display:grid; width: 20%"> |
|
<button id="getQrBtn" class="button buttonGreen">Get QR</button> |
|
<button style="display: none" hidden id="logoutQrBtn" class="button buttonGreen">Logout</button> |
|
<img hidden id="img-qr-code" alt="QR-Code" class="sb-qr-wizard-qr-code" aria-hidden="false" src="data:image/png;base64,%QR_DATA%" style=""> |
|
</div> |
|
<script type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script> |
|
<script> |
|
var intervalId = null |
|
const qrCodeElement = document.getElementById("img-qr-code") |
|
const qrTempalte = qrCodeElement.getAttribute('src'); |
|
|
|
document.getElementById("getQrBtn").addEventListener("click", function () { |
|
try { |
|
isAuthed(); |
|
clearInterval(intervalId) |
|
updateQRCode() |
|
intervalId = setInterval(updateQRCode, 5000); |
|
|
|
} catch (reason) { |
|
console.error(reason); |
|
document.getElementById("resultText").innerHTML = reason + ". See logs for details"; |
|
} |
|
}); |
|
|
|
document.getElementById("logoutQrBtn").addEventListener("click", function () { |
|
try { |
|
const restAPI = whatsAppClient.restAPI(({ |
|
idInstance: document.getElementById("idInstance").value, |
|
apiTokenInstance: document.getElementById("apiTokenIsntance").value |
|
})) |
|
|
|
restAPI.instance.logout() |
|
.then((data) => { |
|
document.getElementById("resultText").innerHTML = "isLogout=" + data.isLogout |
|
isAuthed(); |
|
}).catch((reason) => { |
|
console.error(reason); |
|
document.getElementById("resultText").innerHTML = reason + ". See logs for details"; |
|
}); |
|
} catch (reason) { |
|
console.error(reason); |
|
document.getElementById("resultText").innerHTML = reason + ". See logs for details"; |
|
} |
|
}); |
|
|
|
function updateQRCode() { |
|
const restAPI = whatsAppClient.restAPI(({ |
|
idInstance: document.getElementById("idInstance").value, |
|
apiTokenInstance: document.getElementById("apiTokenIsntance").value |
|
})) |
|
restAPI.instance.qr() |
|
.then((data) => { |
|
console.log(data); |
|
document.getElementById("resultText").innerHTML = ""; |
|
if (data.type === 'qrCode') { |
|
qrCodeElement.hidden = false; |
|
qrCodeElement.setAttribute('src', qrTempalte.replace("%QR_DATA%", data.message)) |
|
} else { |
|
qrCodeElement.hidden = true; |
|
clearInterval(intervalId) |
|
isAuthed(); |
|
document.getElementById("resultText").innerHTML = data.message |
|
} |
|
}).catch((reason) => { |
|
console.error(reason); |
|
document.getElementById("resultText").innerHTML = reason + ". See logs for details"; |
|
}); |
|
} |
|
|
|
function isAuthed() { |
|
const restAPI = whatsAppClient.restAPI(({ |
|
idInstance: document.getElementById("idInstance").value, |
|
apiTokenInstance: document.getElementById("apiTokenIsntance").value |
|
})) |
|
restAPI.instance.getStateInstance().then(data => { |
|
document.getElementById("statusText").innerHTML = data.stateInstance; |
|
|
|
if (data.stateInstance === 'authorized') { |
|
document.getElementById("getQrBtn").style.display = "none" |
|
document.getElementById("logoutQrBtn").style.display = "block" |
|
} else { |
|
document.getElementById("getQrBtn").style.display = "block" |
|
document.getElementById("logoutQrBtn").style.display = "none" |
|
} |
|
|
|
|
|
}) |
|
} |
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
