fix mini app bot father

This commit is contained in:
lendry
2026-06-26 11:08:10 +03:00
parent 489b4d4a23
commit 7ed7cbdd16
7 changed files with 174 additions and 31 deletions

View File

@@ -2,21 +2,20 @@
import { useMemo, useState } from 'react';
import { Check, Copy, Loader2, Bot } from 'lucide-react';
import { useAuth } from '@/components/id/auth-provider';
import { useToast } from '@/components/id/toast-provider';
import { usePublicSettings } from '@/components/id/public-settings-provider';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { createManagedBot, getApiErrorMessage } from '@/lib/api';
import { useEmbeddedAuthFallback } from '@/lib/embedded-auth-bridge';
import { useMiniAppAuth } from '@/hooks/use-mini-app-auth';
import { cn } from '@/lib/utils';
type Step = 'name' | 'username' | 'done';
export function BotCreateMiniAppContent() {
const { token, isPinLocked, isLoading } = useAuth();
const embeddedToken = useEmbeddedAuthFallback();
const { projectName } = usePublicSettings();
const { effectiveToken, canUse, authReady, waitingForBridge, isLoading } = useMiniAppAuth();
const { showToast } = useToast();
const effectiveToken = token ?? embeddedToken;
const [step, setStep] = useState<Step>('name');
const [name, setName] = useState('');
@@ -24,11 +23,11 @@ export function BotCreateMiniAppContent() {
const [creating, setCreating] = useState(false);
const [createdBot, setCreatedBot] = useState<{ username: string; token: string; botId: string } | null>(null);
const canUse = Boolean(effectiveToken && !isPinLocked);
const canUseSession = canUse;
const usernamePreview = useMemo(() => `${username.replace(/_bot$/i, '').trim()}_bot`, [username]);
async function handleCreate() {
if (!canUse || !effectiveToken) return;
if (!canUseSession || !effectiveToken) return;
const trimmedName = name.trim();
const trimmedUsername = username.replace(/_bot$/i, '').trim();
if (!trimmedName) {
@@ -64,7 +63,7 @@ export function BotCreateMiniAppContent() {
showToast('Токен скопирован');
}
if (isLoading && !effectiveToken) {
if ((isLoading || waitingForBridge || !authReady) && !effectiveToken) {
return (
<div className="flex min-h-screen items-center justify-center p-6 text-center text-sm text-[#667085]">
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -73,10 +72,10 @@ export function BotCreateMiniAppContent() {
);
}
if (!canUse) {
if (!canUseSession) {
return (
<div className="flex min-h-screen items-center justify-center p-6 text-center text-sm text-[#667085]">
Войдите в Lendry ID, чтобы создать бота
Войдите в {projectName}, чтобы создать бота
</div>
);
}

View File

@@ -3,7 +3,7 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { Copy, ImageIcon, LayoutGrid, Loader2, RefreshCw, TextQuote, UserCircle2 } from 'lucide-react';
import { useAuth } from '@/components/id/auth-provider';
import { usePublicSettings } from '@/components/id/public-settings-provider';
import { useToast } from '@/components/id/toast-provider';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -14,7 +14,7 @@ import {
updateManagedBot,
updateManagedBotProfile
} from '@/lib/api';
import { useEmbeddedAuthFallback } from '@/lib/embedded-auth-bridge';
import { useMiniAppAuth } from '@/hooks/use-mini-app-auth';
import { parseComposerMenuButtonJson } from '@/lib/bot-menu-button';
function FieldTextarea({
@@ -78,9 +78,8 @@ function SectionCard({
export function BotManageMiniAppContent() {
const searchParams = useSearchParams();
const botId = searchParams.get('botId') ?? '';
const { token, isPinLocked, isLoading } = useAuth();
const embeddedToken = useEmbeddedAuthFallback();
const effectiveToken = token ?? embeddedToken;
const { projectName } = usePublicSettings();
const { effectiveToken, canUse: canUseSession, authReady, waitingForBridge, isLoading } = useMiniAppAuth();
const { showToast } = useToast();
const [loading, setLoading] = useState(true);
@@ -97,7 +96,7 @@ export function BotManageMiniAppContent() {
const [tokenPrefix, setTokenPrefix] = useState('');
const [newToken, setNewToken] = useState<string | null>(null);
const canUse = Boolean(effectiveToken && !isPinLocked && botId);
const canUse = Boolean(canUseSession && botId);
const loadBot = useCallback(async () => {
if (!canUse || !effectiveToken) return;
@@ -219,10 +218,19 @@ export function BotManageMiniAppContent() {
);
}
if ((waitingForBridge || !authReady) && !effectiveToken) {
return (
<div className="flex min-h-screen items-center justify-center p-6 text-center text-sm text-[#667085]">
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Загрузка...
</div>
);
}
if (!canUse) {
return (
<div className="flex min-h-screen items-center justify-center p-6 text-center text-sm text-[#667085]">
Войдите в Lendry ID, чтобы управлять ботом
Войдите в {projectName}, чтобы управлять ботом
</div>
);
}

View File

@@ -13,7 +13,9 @@ import {
fetchBotChatMessages,
sendBotMessage
} from '@/lib/api';
import { postEmbeddedAuthToIframe } from '@/lib/embedded-auth-bridge';
import { postEmbeddedAuthToIframe, EMBEDDED_AUTH_REQUEST } from '@/lib/embedded-auth-bridge';
import { AUTH_REFRESH_KEY, AUTH_SESSION_KEY, AUTH_TOKEN_KEY } from '@/lib/api';
import { normalizeMiniAppUrl, resolveMiniAppTargetOrigin } from '@/lib/mini-app-url';
import { extractMessageReplyMarkup, serializeInlineKeyboardMarkup } from '@/lib/bot-reply-markup';
import { resolveComposerMenuButton, type ComposerMenuButton } from '@/lib/bot-menu-button';
import { cn } from '@/lib/utils';
@@ -305,27 +307,44 @@ export function BotMiniAppSheet({
onClose
}: BotMiniAppSheetProps) {
const iframeRef = useRef<HTMLIFrameElement>(null);
const normalizedUrl = url ? normalizeMiniAppUrl(url) : null;
const resolvedAuthToken =
authToken ?? (typeof window !== 'undefined' ? window.localStorage.getItem(AUTH_TOKEN_KEY) : null);
const pushAuthToIframe = useCallback(() => {
if (!iframeRef.current || !authToken) return;
if (!iframeRef.current || !resolvedAuthToken) return;
postEmbeddedAuthToIframe(iframeRef.current, {
token: authToken,
refreshToken: authRefreshToken,
sessionId: authSessionId
token: resolvedAuthToken,
refreshToken: authRefreshToken ?? window.localStorage.getItem(AUTH_REFRESH_KEY),
sessionId: authSessionId ?? window.localStorage.getItem(AUTH_SESSION_KEY)
});
}, [authRefreshToken, authSessionId, authToken]);
}, [authRefreshToken, authSessionId, resolvedAuthToken]);
useEffect(() => {
function handleMessage(event: MessageEvent) {
if (event.origin !== window.location.origin) return;
if (event.data?.type !== 'lendry-id-embedded-auth-request') return;
const iframeOrigin = iframeRef.current
? resolveMiniAppTargetOrigin(iframeRef.current.getAttribute('src') || iframeRef.current.src, window.location.origin)
: window.location.origin;
if (event.origin !== iframeOrigin && event.origin !== window.location.origin) return;
if (event.data?.type !== EMBEDDED_AUTH_REQUEST) return;
pushAuthToIframe();
}
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, [pushAuthToIframe]);
if (!url) return null;
useEffect(() => {
if (!normalizedUrl || !resolvedAuthToken) return;
pushAuthToIframe();
const interval = window.setInterval(pushAuthToIframe, 350);
const timeout = window.setTimeout(() => window.clearInterval(interval), 3500);
return () => {
window.clearInterval(interval);
window.clearTimeout(timeout);
};
}, [normalizedUrl, pushAuthToIframe, resolvedAuthToken]);
if (!normalizedUrl) return null;
return (
<div className="fixed inset-0 z-[70] flex items-end justify-center bg-black/40 p-4 sm:items-center">
<div className="flex h-[min(88vh,720px)] w-full max-w-[520px] flex-col overflow-hidden rounded-[24px] bg-white shadow-2xl">
@@ -337,7 +356,7 @@ export function BotMiniAppSheet({
</div>
<iframe
ref={iframeRef}
src={url}
src={normalizedUrl}
title={title}
className="min-h-0 flex-1 border-0"
allow="clipboard-read; clipboard-write"

View File

@@ -26,6 +26,7 @@ import {
} from '@/lib/api';
import { useToast } from './toast-provider';
import { PinLockModal } from './pin-lock-modal';
import { EMBEDDED_AUTH_MESSAGE, type EmbeddedAuthPayload } from '@/lib/embedded-auth-bridge';
interface AuthContextValue {
user: PublicUser | null;
@@ -117,6 +118,19 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
resetPinRequiredNotification();
}, []);
React.useEffect(() => {
function handleEmbeddedAuth(event: Event) {
const detail = (event as CustomEvent<EmbeddedAuthPayload>).detail;
if (!detail?.token?.trim()) return;
setToken(detail.token.trim());
setHasStoredSession(true);
clearPinLock();
}
window.addEventListener(EMBEDDED_AUTH_MESSAGE, handleEmbeddedAuth as EventListener);
return () => window.removeEventListener(EMBEDDED_AUTH_MESSAGE, handleEmbeddedAuth as EventListener);
}, [clearPinLock]);
const activatePinLock = React.useCallback((sessionId: string) => {
const resolvedSessionId = sessionId || window.localStorage.getItem(AUTH_SESSION_KEY);
if (!resolvedSessionId) return;

View File

@@ -0,0 +1,37 @@
'use client';
import { useEffect, useState } from 'react';
import { useAuth } from '@/components/id/auth-provider';
import { useEmbeddedAuthFallback } from '@/lib/embedded-auth-bridge';
const EMBEDDED_AUTH_WAIT_MS = 4000;
export function useMiniAppAuth() {
const { token, isPinLocked, isLoading } = useAuth();
const embeddedToken = useEmbeddedAuthFallback();
const isEmbedded = typeof window !== 'undefined' && window.parent !== window;
const [bridgeTimedOut, setBridgeTimedOut] = useState(false);
useEffect(() => {
if (!isEmbedded) {
setBridgeTimedOut(true);
return;
}
const timer = window.setTimeout(() => setBridgeTimedOut(true), EMBEDDED_AUTH_WAIT_MS);
return () => window.clearTimeout(timer);
}, [isEmbedded]);
const effectiveToken = token ?? embeddedToken;
const waitingForBridge = isEmbedded && !effectiveToken && !bridgeTimedOut;
const authReady = !isEmbedded || Boolean(effectiveToken) || bridgeTimedOut || !isLoading;
const canUse = Boolean(effectiveToken && (!isPinLocked || Boolean(embeddedToken)));
return {
effectiveToken,
canUse,
authReady,
waitingForBridge,
isEmbedded,
isLoading
};
}

View File

@@ -2,8 +2,10 @@
import { useEffect, useState } from 'react';
import { AUTH_REFRESH_KEY, AUTH_SESSION_KEY, AUTH_TOKEN_KEY } from '@/lib/api';
import { resolveMiniAppTargetOrigin } from '@/lib/mini-app-url';
export const EMBEDDED_AUTH_MESSAGE = 'lendry-id-embedded-auth';
export const EMBEDDED_AUTH_REQUEST = 'lendry-id-embedded-auth-request';
export interface EmbeddedAuthPayload {
type: typeof EMBEDDED_AUTH_MESSAGE;
@@ -12,16 +14,57 @@ export interface EmbeddedAuthPayload {
sessionId?: string;
}
export function postEmbeddedAuthToIframe(iframe: HTMLIFrameElement, auth: { token: string; refreshToken?: string | null; sessionId?: string | null }) {
function collectTrustedOrigins() {
const origins = new Set<string>();
if (typeof window === 'undefined') return origins;
origins.add(window.location.origin);
if (document.referrer) {
try {
origins.add(new URL(document.referrer).origin);
} catch {
// ignore malformed referrer
}
}
return origins;
}
function resolveParentPostMessageTarget() {
if (typeof window === 'undefined' || window.parent === window) {
return window.location.origin;
}
if (document.referrer) {
try {
const referrerOrigin = new URL(document.referrer).origin;
if (referrerOrigin !== window.location.origin) {
return '*';
}
return referrerOrigin;
} catch {
return '*';
}
}
return '*';
}
export function postEmbeddedAuthToIframe(
iframe: HTMLIFrameElement,
auth: { token: string; refreshToken?: string | null; sessionId?: string | null }
) {
const target = iframe.contentWindow;
if (!target || !auth.token) return;
const payload: EmbeddedAuthPayload = {
type: EMBEDDED_AUTH_MESSAGE,
token: auth.token,
refreshToken: auth.refreshToken ?? undefined,
sessionId: auth.sessionId ?? undefined
};
target.postMessage(payload, window.location.origin);
const targetOrigin = resolveMiniAppTargetOrigin(iframe.getAttribute('src') || iframe.src, window.location.origin);
target.postMessage(payload, targetOrigin);
}
export function useEmbeddedAuthFallback() {
@@ -29,7 +72,7 @@ export function useEmbeddedAuthFallback() {
useEffect(() => {
function handleMessage(event: MessageEvent) {
if (event.origin !== window.location.origin) return;
if (!collectTrustedOrigins().has(event.origin)) return;
const data = event.data as Partial<EmbeddedAuthPayload> | null;
if (!data || data.type !== EMBEDDED_AUTH_MESSAGE || !data.token?.trim()) return;
@@ -42,11 +85,12 @@ export function useEmbeddedAuthFallback() {
if (data.sessionId) {
window.localStorage.setItem(AUTH_SESSION_KEY, data.sessionId);
}
window.dispatchEvent(new CustomEvent(EMBEDDED_AUTH_MESSAGE, { detail: data }));
}
window.addEventListener('message', handleMessage);
if (window.parent !== window) {
window.parent.postMessage({ type: 'lendry-id-embedded-auth-request' }, window.location.origin);
window.parent.postMessage({ type: EMBEDDED_AUTH_REQUEST }, resolveParentPostMessageTarget());
}
return () => window.removeEventListener('message', handleMessage);
}, []);

View File

@@ -0,0 +1,22 @@
export function normalizeMiniAppUrl(url: string) {
if (typeof window === 'undefined') return url;
try {
const parsed = new URL(url, window.location.href);
if (parsed.pathname.startsWith('/mini-apps/')) {
return `${window.location.origin}${parsed.pathname}${parsed.search}${parsed.hash}`;
}
return parsed.toString();
} catch {
return url;
}
}
export function resolveMiniAppTargetOrigin(iframeSrc: string | null | undefined, fallback: string) {
if (!iframeSrc) return fallback;
try {
return new URL(iframeSrc, fallback).origin;
} catch {
return fallback;
}
}