JavaScript
5
Вклад в тег
import { useEffect } from 'react'
import { ITelegramUser } from '../../../../types/telegram/api-telegram-user.ts'
declare global {
interface Window {
onTelegramAuth: (user: ITelegramUser) => void
}
}
export const ButtonTelegramAuth = () => {
useEffect(() => {
const button = document.createElement('script')
button.async = true
button.src = 'https://telegram.org/js/telegram-widget.js?22'
button.setAttribute('data-telegram-login', 'name_bot')
button.setAttribute('data-size', 'large')
button.setAttribute('data-radius', '20')
button.setAttribute('data-onauth', 'onTelegramAuth')
document.body.appendChild(button)
window.onTelegramAuth = function (user) {
alert(
'Logged in as ' +
user.first_name +
' ' +
user.last_name +
' (' +
user.id +
(user.username ? ', @' + user.username : '') +
')'
)
}
return () => {
document.body.removeChild(button)
}
}, [])
return <div id="telegram-widget-container"></div>
}
script.setAttribute('data-auth-url', 'https://site.pw');
button.setAttribute('data-onauth', 'onTelegramAuth')
declare global {
interface Window {
onTelegramAuth: (user: ITelegramUser) => void
}
}
window.onTelegramAuth = function (user) {
alert(
'Logged in as ' +
user.first_name +
' ' +
user.last_name +
' (' +
user.id +
(user.username ? ', @' + user.username : '') +
')'
)
}
<div className='grid grid-col-[1fr_1fr] grid-row-[repeat(5,_1fr)]'>
<div className='row-start-2 row-end-4'> </div>
// и таким образом двигать нужные тебе блоки, если что ссылка на доку ниже
<div/>