<metaproperty="description"content="The Javascript SDK helps you easily integrate Telegram Passport requests into your website. Check out our GitHub repository…">
<metaproperty="og:title"content="Javascript SDK">
<metaproperty="og:image"content="">
<metaproperty="og:description"content="The Javascript SDK helps you easily integrate Telegram Passport requests into your website. Check out our GitHub repository…">
<p>The Javascript SDK helps you easily integrate Telegram Passport requests into your website. Check out our <ahref="https://github.com/TelegramMessenger/TGPassportPHPSample">GitHub repository</a> to see samples using this SDK.</p>
public_key: '-----BEGIN PUBLIC KEY----- ...', // place public key of your bot here
nonce: 'ab2df83746a87d2f3bd6...', // place nonce here
callback_url: 'https://example.com/callback/' // place callback url here
});
</script></code></pre>
<blockquote>
<p>Note that if you use a <ahref="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> (CSP) header with the <ahref="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src">frame-src</a>/<ahref="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/child-src">child-src</a> directive you should allow <code>tg:</code> source to prevent errors in some browsers (e.g. Firefox)</p>
<td><em>Optional.</em> Text on the button. Defaults to "Log In With Telegram".</td>
</tr>
<tr>
<td>radius</td>
<td>Integer</td>
<td><em>Optional.</em> Radius of the button and tooltip in px. Defaults to 23.</td>
</tr>
<tr>
<td>tooltip_text</td>
<td>String</td>
<td><em>Optional.</em> Text on the tooltip. Defaults to "Please <u>install Telegram</u> to use this option.".</td>
</tr>
<tr>
<td>tooltip_position</td>
<td>String</td>
<td><em>Optional.</em> Tooltip position. One of "top", "bottom", "left", "right". Defaults to "bottom".</td>
</tr>
<tr>
<td>tooltip_force</td>
<td>Boolean</td>
<td><em>Optional.</em> Always show a tooltip. Defaults to <em>false</em>.</td>
</tr>
</tbody>
</table>
<p>You can also create your custom button. Do not forget about the tooltip. You should add an <code>onclick</code> listener to the button which calls the <code>Telegram.Passport.auth(auth_params, tooltip_toggle);</code> method:</p>
<pre><code><button id="telegram_passport_auth">Log In With Telegram</button>
<script>
var auth_button = document.getElementById('telegram_passport_auth');
<p>When the user confirms your request by pressing the "Authorize" button, it will be redirected to the URL specified in the <em>callback_url</em> with the parameter <code>tg_passport=success</code> and the Bot API will send the bot an <ahref="/bots/api#update">Update</a> with the field <em>passport_data</em> which contains encrypted <ahref="/bots/api#passportdata">Telegram Passport data</a>.</p>
<p>If the user cancels your request, it will be redirected to the URL specified in the <em>callback_url</em> with the parameter <code>tg_passport=cancel</code>.</p>
<p>If an error occurs during the request, the user will be redirected to the URL specified in the <em>callback_url</em> with the parameter <code>tg_passport=error</code>. The parameter <code>error</code> will contain one of the following values: <strong>BOT_INVALID</strong>, <strong>PUBLIC_KEY_REQUIRED</strong>, <strong>PUBLIC_KEY_INVALID</strong>, <strong>SCOPE_EMPTY</strong>, <strong>NONCE_EMPTY</strong>.</p></div>
</div>
</div>
</div>
<divclass="footer_wrap">
<divclass="footer_columns_wrap footer_desktop">
<divclass="footer_column footer_column_telegram">
<h5>Telegram</h5>
<divclass="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
