mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-12 01:40:59 +01:00
178 lines
8.8 KiB
HTML
178 lines
8.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html class="">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Web events</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta property="description" content="How telegram apps interact with webpages">
|
||
|
|
<meta property="og:title" content="Web events">
|
||
|
|
<meta property="og:image" content="">
|
||
|
|
<meta property="og:description" content="How telegram apps interact with webpages">
|
||
|
|
<link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon" />
|
||
|
|
|
||
|
|
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
|
||
|
|
|
||
|
|
<link href="/css/telegram.css?212" rel="stylesheet" media="screen">
|
||
|
|
<style>
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="preload">
|
||
|
|
<div class="dev_page_wrap">
|
||
|
|
<div class="dev_page_head navbar navbar-static-top navbar-tg">
|
||
|
|
<div class="navbar-inner">
|
||
|
|
<div class="container clearfix">
|
||
|
|
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
|
||
|
|
<ul class="nav navbar-nav">
|
||
|
|
<li><a href="//telegram.org/">Home</a></li>
|
||
|
|
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
|
||
|
|
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
|
||
|
|
<li class="active"><a href="/api">API</a></li>
|
||
|
|
<li class=""><a href="/mtproto">Protocol</a></li>
|
||
|
|
<li class=""><a href="/schema">Schema</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container clearfix">
|
||
|
|
<div class="dev_page">
|
||
|
|
<div id="dev_page_content_wrap" class=" ">
|
||
|
|
<div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/api" >API</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/api/web-events" >Web events</a></li></ul></div>
|
||
|
|
<h1 id="dev_page_title">Web events</h1>
|
||
|
|
|
||
|
|
<div id="dev_page_content"><!-- scroll_nav -->
|
||
|
|
|
||
|
|
<p>When interacting with HTML5 games and the websites of payment gateways, Telegram apps should expose APIs to allow receiving data and events from the websites.</p>
|
||
|
|
<h3><a class="anchor" href="#event-apis" id="event-apis" name="event-apis"><i class="anchor-icon"></i></a>Event APIs</h3>
|
||
|
|
<p>Games and payment gateways can generate events that are meant to be received by the Telegram apps.
|
||
|
|
Typically events are generated by using the <code>postEvent</code> method of the <a href="https://github.com/TelegramMessenger/GamingCommunication/blob/master/games.js">GamingCommunication library</a>.
|
||
|
|
The <code>postEvent</code> function will try sending the event to the Telegram app in a number of different ways.</p>
|
||
|
|
<h4><a class="anchor" href="#webviewproxy" id="webviewproxy" name="webviewproxy"><i class="anchor-icon"></i></a>WebviewProxy</h4>
|
||
|
|
<p>In mobile apps, the event receiver API should be typically exposed as a <code>window.TelegramWebviewProxy</code> object with a <code>postEvent</code> method.</p>
|
||
|
|
<pre><code>window.TelegramWebviewProxy.postEvent(eventType, eventData)</code></pre>
|
||
|
|
<h4><a class="anchor" href="#windowexternal" id="windowexternal" name="windowexternal"><i class="anchor-icon"></i></a>window.external</h4>
|
||
|
|
<p>Alternatively, a <code>window.external.notify</code> method can be exposed, accepting a string JSON payload with the event type and payload:</p>
|
||
|
|
<pre><code>window.external.notify(JSON.stringify({eventType: eventType, eventData: eventData}));</code></pre>
|
||
|
|
<h4><a class="anchor" href="#postmessage-api" id="postmessage-api" name="postmessage-api"><i class="anchor-icon"></i></a>postMessage API</h4>
|
||
|
|
<p>Finally, web MTProto clients that need to open a game or process a payment in an iframe can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage">postMessage API</a> to receive events from iframes.
|
||
|
|
The <a href="https://github.com/TelegramMessenger/GamingCommunication/blob/master/games.js">GamingCommunication library</a> by defaultwill use <code>'*'</code> as <code>targetOrigin</code>, sending messages to parent pages regardless of the origin of the embedder.</p>
|
||
|
|
<pre><code>window.parent.postMessage(JSON.stringify({eventType: eventType, eventData: eventData}), targetOrigin);</code></pre>
|
||
|
|
<h4><a class="anchor" href="#event-types" id="event-types" name="event-types"><i class="anchor-icon"></i></a>Event types</h4>
|
||
|
|
<p><code>eventType</code> is a simple string indicating the event type, and <code>eventData</code> is a payload with an object that will be parsed by the Telegram app.</p>
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>eventType</th>
|
||
|
|
<th>eventData</th>
|
||
|
|
<th>Description</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>payment_form_submit</code></td>
|
||
|
|
<td>JSON object with <code>data</code> and <code>title</code> fields</td>
|
||
|
|
<td><code>title</code> is the censored credit card title.<br><code>data</code> is a service-specific JSON payload with information about the payment credentials provided by the user to the payment system.<br><strong>Neither Telegram, nor bots will have access to your credit card information.</strong><br>Credit card details will be handled only by the payment system.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>share_score</code></td>
|
||
|
|
<td>null</td>
|
||
|
|
<td>Will be called by games when the user explicitly clicks on the <strong>share score</strong> button to share the game, along with his score.<br>Typically done by using <a href="/method/messages.forwardMessages">messages.forwardMessages</a> on the game message with the <code>with_my_score</code> flag.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>share_game</code></td>
|
||
|
|
<td>null</td>
|
||
|
|
<td>Will be called by games when the user explicitly clicks on the <strong>share game</strong> button to share the game, without sharing his score.<br>Typically done by using <a href="/method/messages.forwardMessages">messages.forwardMessages</a> on the game message without the <code>with_my_score</code> flag, or by sharing the game's short URL.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>game_over</code></td>
|
||
|
|
<td>null</td>
|
||
|
|
<td>Can be called by games when the user loses a game</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>game_loaded</code></td>
|
||
|
|
<td>null</td>
|
||
|
|
<td>Can be called by games once the game fully loads</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>resize_frame</code></td>
|
||
|
|
<td>JSON object with <code>height</code> field</td>
|
||
|
|
<td>Called by supported pages inside of <a href="https://instantview.telegram.org">IV</a> iframe embeds, indicates the new size of the embed frame.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_wrap">
|
||
|
|
<div class="footer_columns_wrap footer_desktop">
|
||
|
|
<div class="footer_column footer_column_telegram">
|
||
|
|
<h5>Telegram</h5>
|
||
|
|
<div class="footer_telegram_description"></div>
|
||
|
|
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
|
|
<ul>
|
||
|
|
<li><a href="//telegram.org/faq">FAQ</a></li>
|
||
|
|
<li><a href="//telegram.org/blog">Blog</a></li>
|
||
|
|
<li><a href="//telegram.org/jobs">Jobs</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
|
||
|
|
<ul>
|
||
|
|
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
|
||
|
|
<li><a href="//telegram.org/dl/android">Android</a></li>
|
||
|
|
<li><a href="//telegram.org/dl/wp">Windows Phone</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
|
||
|
|
<ul>
|
||
|
|
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
|
||
|
|
<li><a href="//macos.telegram.org/">macOS</a></li>
|
||
|
|
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column footer_column_platform">
|
||
|
|
<h5><a href="/">Platform</a></h5>
|
||
|
|
<ul>
|
||
|
|
<li><a href="/api">API</a></li>
|
||
|
|
<li><a href="//translations.telegram.org/">Translations</a></li>
|
||
|
|
<li><a href="//instantview.telegram.org/">Instant View</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_columns_wrap footer_mobile">
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/blog">Blog</a></h5>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="//telegram.org/apps">Apps</a></h5>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="/">Platform</a></h5>
|
||
|
|
</div>
|
||
|
|
<div class="footer_column">
|
||
|
|
<h5><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/js/main.js?42"></script>
|
||
|
|
<script src="/js/jquery.min.js?1"></script>
|
||
|
|
<script src="/js/bootstrap.min.js"></script>
|
||
|
|
|
||
|
|
<script>window.initDevPageNav&&initDevPageNav();
|
||
|
|
backToTopInit("Go up");
|
||
|
|
removePreloadInit();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|