Spaces:
Sleeping
Sleeping
File size: 7,213 Bytes
1e9310c 3c11f53 a222113 4eba8a4 a222113 5457996 a222113 1e9310c 112c1c4 a222113 6632feb a222113 6632feb a222113 6632feb a222113 6632feb a222113 2bc38dc 1e9310c a222113 6632feb |
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 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
<!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>
document.addEventListener("DOMContentLoaded", function () {
var intervalId = null;
const qrCodeElement = document.getElementById("img-qr-code");
const qrTempalte = qrCodeElement.getAttribute('src');
document.getElementById("getQrBtn").addEventListener("click", function () {
try {
if (typeof whatsAppClient === 'undefined') {
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
}
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() {
try {
if (typeof whatsAppClient === 'undefined') {
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
}
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";
});
} catch (reason) {
console.error(reason);
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
}
}
function isAuthed() {
try {
if (typeof whatsAppClient === 'undefined') {
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
}
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";
}
}).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";
}
}
});
</script>
</body>
</html>
|