Найти в Дзене
Алексей Пыхов
6 подписчиков

Blazor WebAssembly. Telegram MiniApps. Получение данных пользователяСегодня

1
4 мин
Telegram Mini Apps предоставляют мощную платформу для создания интерактивных приложений внутри Telegram. В сочетании с Blazor WebAssembly разработчики получают возможность создавать такие приложения, используя C# и .NET. В этой статье мы подробно рассмотрим процесс интеграции Telegram WebApp SDK в Blazor-приложение. Первый шаг - добавление SDK Telegram в ваш Blazor-проект. Для этого модифицируем файл wwwroot/index.html: <!DOCTYPE html>
<html>
<head>
<!-- ... другие мета-теги ... -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script charset="utf-8">
window.getTelegramWebAppData = () => {
if (window.Telegram?.WebApp?.initDataUnsafe) {
return JSON.stringify(window.Telegram.WebApp.initDataUnsafe);
}
return "null";
};
</script>
</head>
<body>
<!-- ... остальное содержимое ... -->
</body>
</html> Создадим необходимые модели данных для работы с информацией от Telegram: public cla
Оглавление

Telegram Mini Apps предоставляют мощную платформу для создания интерактивных приложений внутри Telegram. В сочетании с Blazor WebAssembly разработчики получают возможность создавать такие приложения, используя C# и .NET. В этой статье мы подробно рассмотрим процесс интеграции Telegram WebApp SDK в Blazor-приложение.

1. Настройка проекта

Добавление Telegram WebApp SDK

Первый шаг - добавление SDK Telegram в ваш Blazor-проект. Для этого модифицируем файл wwwroot/index.html:

<!DOCTYPE html>
<html>
<head>
<!-- ... другие мета-теги ... -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script charset="utf-8">
window.getTelegramWebAppData = () => {
if (window.Telegram?.WebApp?.initDataUnsafe) {
return JSON.stringify(window.Telegram.WebApp.initDataUnsafe);
}
return "null";
};
</script>
</head>
<body>
<!-- ... остальное содержимое ... -->
</body>
</html>

2. Модели данных

Классы для работы с Telegram API

Создадим необходимые модели данных для работы с информацией от Telegram:

public class InitDataUnsafe
{
[JsonPropertyName("query_id")]
public string? QueryId { get; set; }

[JsonPropertyName("user")]
public WebAppUser? User { get; set; }

[JsonPropertyName("receiver")]
public WebAppUser? Receiver { get; set; }

[JsonPropertyName("chat_type")]
public string? ChatType { get; set; }

[JsonPropertyName("chat_instance")]
public string? ChatInstance { get; set; }

[JsonPropertyName("start_param")]
public string? StartParam { get; set; }

[JsonPropertyName("can_send_after")]
public int? CanSendAfter { get; set; }

[JsonPropertyName("auth_date")]
public string AuthDate { get; set; } = null!;

[JsonPropertyName("hash")]
public string Hash { get; set; } = null!;

[JsonPropertyName("signature")]
public string Signature { get; set; } = null!;
}

public class WebAppUser
{
[JsonPropertyName("id")]
public long Id { get; set; }

[JsonPropertyName("is_bot")]
public bool? IsBot { get; set; }

[JsonPropertyName("first_name")]
public string? FirstName { get; set; }

[JsonPropertyName("last_name")]
public string? LastName { get; set; }

[JsonPropertyName("username")]
public string? Username { get; set; }

[JsonPropertyName("language_code")]
public string? LanguageCode { get; set; }

[JsonPropertyName("is_premium")]
public bool? IsPremium { get; set; }

[JsonPropertyName("added_to_attachment_menu")]
public bool? AddedToAttachmentMenu { get; set; }

[JsonPropertyName("allows_write_to_pm")]
public bool? AllowsWriteToPm { get; set; }

[JsonPropertyName("photo_url")]
public string? PhotoUrl { get; set; }
}

public class WebAppChat
{
[JsonPropertyName("id")]
public long Id { get; set; }

[JsonPropertyName("type")]
public string Type { get; set; } = null!;

[JsonPropertyName("title")]
public string Title { get; set; } = null!;

[JsonPropertyName("username")]
public string? Username { get; set; }

[JsonPropertyName("photo_url")]
public string? PhotoUrl { get; set; }
}

3. Работа с Telegram API из Blazor

Получение данных через IJSRuntime

Для взаимодействия с Telegram API используем IJSRuntime:

@inject IJSRuntime JsRuntime

@code {
private InitDataUnsafe? initData;

protected override async Task OnInitializedAsync()
{
try
{
var json = await JsRuntime.InvokeAsync<string>("getTelegramWebAppData");
if (json != "null")
{
initData = JsonSerializer.Deserialize<InitDataUnsafe>(json);
}
}
catch (Exception ex)
{
Console.WriteLine($"Ошибка при получении данных: {ex.Message}");
}
}
}

4. Отображение данных пользователя

Компонент для отображения информации

Создадим компонент для отображения данных пользователя:

<div class="user-info">
@if (User.PhotoUrl != null)
{
<img src="@User.PhotoUrl" alt="User photo" class="user-photo" />
}

<div class="user-details">
<h3>@User.FirstName @User.LastName</h3>

<div class="detail-row"><span class="detail-label">ID:</span> @User.Id</div>

@if (!string.IsNullOrEmpty(User.Username))
{
<div class="detail-row">
<span class="detail-label">Username:</span> @@@User.Username
</div>
}

<div class="detail-row"><span class="detail-label">Bot:</span> @User.IsBot</div>
<div class="detail-row"><span class="detail-label">Premium:</span> @User.IsPremium</div>
<div class="detail-row"><span class="detail-label">Language:</span> @User.LanguageCode</div>
<div class="detail-row">
<span class="detail-label">Added to Menu:</span> @User.AddedToAttachmentMenu
</div>
<div class="detail-row">
<span class="detail-label">Allows PM:</span> @User.AllowsWriteToPm
</div>
</div>
</div>


@code {
[Parameter]
public WebAppUser User { get; set; } = null!;
}

В этой статье мы рассмотрели интеграции Telegram Mini Apps с Blazor WebAssembly:

  1. Добавили Telegram WebApp SDK в проект
  2. Создали модели для работы с данными
  3. Реализовали получение данных через IJSRuntime
  4. Настроили отображение информации о пользователе

gitverse.ru