Spaces:
Sleeping
Sleeping
File size: 5,533 Bytes
1e9310c 3c11f53 a222113 4eba8a4 a222113 5457996 a222113 1e9310c 112c1c4 a222113 1e9310c 3f54678 a222113 2bc38dc 1e9310c a222113 1e9310c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!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> |