Skip to content

Commit

Permalink
WIP: Telegam login in case of no user data found
Browse files Browse the repository at this point in the history
  • Loading branch information
@U-lis
U-lis authored Feb 5, 2025
1 parent e25385c commit bd01a7c
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 64 deletions.
73 changes: 41 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,75 @@
<head>
<style>
canvas {
width: min(calc(100vh * (9/16)), 100vw);
width: min(calc(100vh * (9 / 16)), 100vw);
max-width: 100%;
max-height: 100%;
height: auto;
aspect-ratio: 9/16;
display: block;
}

#modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
visibility: hidden; /* Initially hidden */
}
</style>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | proto</title>
<script>
const host = "https://petpop-internal.9c.gg";
const host = "https://5hxextbfd7.execute-api.ap-northeast-2.amazonaws.com/proto";
// const host = "http://localhost:3407";
</script>

<script src="https://telegram.org/js/telegram-web-app.js"></script>
<!-- <script async src="https://telegram.org/js/telegram-widget.js?7"-->
<!-- data-telegram-login="new9cproto_bot"-->
<!-- data-size="large"-->
<!-- data-auth-url=`http://localhost:3407/api/auth`-->
<!-- data-request-access="write"></script>-->
<script>
let token;
// Move pages
const movePage = (pageName) => {
window.open(`${host}/${pageName}#${token}`);
};
const onTelegramAuth = (user) => {
console.log(user);
};
</script>
<script src="telegram.js"></script>
</head>

<body style="text-align: center; padding: 0; border: 0; margin: 0;">
<!-- <div class="buttons">
<div id="modal" class="modal">
<div id="login-button" style="display: none"></div>
<script async src="https://telegram.org/js/telegram-widget.js?7"
data-telegram-login="new9cproto_bot"
data-size="medium"
data-userpic="false"
data-onauth="onTelegramAuth(user)"></script>
<button id="shop" onclick="movePage('shop')">Go to shop</button>
<button id="quest" onclick="movePage('quest')">Go to quest</button>
</div> -->
<canvas id="unity-canvas" tabindex="-1"
style="background: #805C65"></canvas>
data-onauth="onTelegramLogin(user)"></script>
</div>
<canvas id="unity-canvas" tabindex="-1" style="background: linear-gradient(to bottom, #1aa698, #EBE3CD)"></canvas>
<script src="Build/Build.loader.js"></script>
<script>
function initUnity() {
createUnityInstance(document.querySelector("#unity-canvas"), {
arguments: [],
dataUrl: "Build/public.data",
frameworkUrl: "Build/public.framework.js",
codeUrl: "Build/public.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "pl",
productName: "proto",
productVersion: "1.0",
// matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
}).then(instance => {
telegramLogin(instance);
});
}

window.addEventListener('load', () => {
// Unity Game
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
Expand All @@ -66,23 +86,12 @@
canvas.style.height = "100%";
canvas.style.position = "fixed";

document.body.style.textAlign = "center";
document.body.style.textAlign = "left";
}

createUnityInstance(document.querySelector("#unity-canvas"), {
arguments: [],
dataUrl: "Build/public.data",
frameworkUrl: "Build/public.framework.js",
codeUrl: "Build/public.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "pl",
productName: "proto",
productVersion: "1.0",
// matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
}).then(instance => {
sendUserDataToServer(instance);
});
if (checkTelegramData()) {
initUnity();
}
});
</script>
</body>
Expand Down
81 changes: 49 additions & 32 deletions telegram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,62 @@ Telegram.WebApp.ready();

// Get User Data
const initData = Telegram.WebApp.initDataUnsafe;
const userData = initData.user;
let userData = initData.user;

async function sendUserDataToServer(unityInstance) {
export const checkTelegramData = () => {
if (!userData) {
console.log("User data not available.");
document.getElementById("login-button").style = "display:block";
} else {
const response = await fetch(`${host}/api/auth/login/telegram`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: userData.id,
username: userData.username ?? userData.first_name,
is_bot: userData.is_bot ?? false,
is_premium: userData.is_premium ?? false,
allows_write_to_pm: userData.allows_write_to_pm,
photo_url: userData.photo_url ?? "",
}),
});
document.getElementById("modal").style.visibility = "visible";
return false;
}

const result = await response.json();
console.log("=======");
console.log(result);
console.log("=======");
if (response.success) {
console.log("Connected successfully!");
} else {
console.log("Connection failed: " + result.message);
};

export const onTelegramLogin = async (user) => {
const resp = await fetch(`${host}.api/auth/validate-telegram`,
{
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({user}),
}
token = result.token;
unityInstance.SendMessage("APIClient", "SetUri", host);
unityInstance.SendMessage("APIClient", "SetToken", "Bearer " + result.token);
unityInstance.SendMessage("APIClient", "Initialize");
);
if (resp.status === 200 && (await resp.json()).valid === true) {
user.is_bot = false;
user.is_premium = false;
user.allows_write_to_pm =false;
userData = user;
document.getElementById("modal").style.visibility = "hidden";
initUnity();
}
}

const telegramLogin = async() => {
alert("login")
};
async function telegramLogin(unityInstance) {
const response = await fetch(`${host}/api/auth/login/telegram`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: userData.id,
username: userData.username ?? userData.first_name,
is_bot: userData.is_bot ?? false,
is_premium: userData.is_premium ?? false,
allows_write_to_pm: userData.allows_write_to_pm,
photo_url: userData.photo_url ?? "",
}),
});

const result = await response.json();
console.log("=======");
console.log(result);
console.log("=======");
if (response.success) {
console.log("Connected successfully!");
} else {
console.log("Connection failed: " + result.message);
}
token = result.token;
unityInstance.SendMessage("APIClient", "SetToken", "Bearer " + result.token);
unityInstance.SendMessage("APIClient", "SetUri", host);
}

window.sendUserDataToServer = sendUserDataToServer;
window.onTelegramLogin = onTelegramLogin;
window.telegramLogin = telegramLogin;

0 comments on commit bd01a7c

Please sign in to comment.