114 lines
2.8 KiB
TypeScript
114 lines
2.8 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { Config, OneTap } from '@vkid/sdk';
|
||
|
|
|
||
|
|
import { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
const VKAuthDynamic = () => {
|
||
|
|
const containerRef = useRef(null);
|
||
|
|
const isInitialized = useRef(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Динамическая загрузка SDK
|
||
|
|
const loadVKIDSDK = async () => {
|
||
|
|
try {
|
||
|
|
// Проверяем, не загружен ли уже SDK
|
||
|
|
if (window.VKIDSDK) return window.VKIDSDK;
|
||
|
|
|
||
|
|
const { default: VKID } = await import('@vkid/sdk');
|
||
|
|
window.VKIDSDK = VKID;
|
||
|
|
return VKID;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load VKID SDK:', error);
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const initialize = async () => {
|
||
|
|
if (isInitialized.current) return;
|
||
|
|
|
||
|
|
const VKID = await loadVKIDSDK();
|
||
|
|
if (!VKID || !containerRef.current) return;
|
||
|
|
|
||
|
|
isInitialized.current = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Конфигурация
|
||
|
|
VKID.Config.init({
|
||
|
|
app: Number(process.env.NEXT_PUBLIC_VK_APP_ID) || 1111111,
|
||
|
|
redirectUrl: process.env.NEXT_PUBLIC_REDIRECT_URL || window.location.origin,
|
||
|
|
responseMode: VKID.ConfigResponseMode.Callback,
|
||
|
|
source: VKID.ConfigSource.LOWCODE,
|
||
|
|
scope: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
// Создание и рендеринг виджета
|
||
|
|
const oneTap = new VKID.OneTap();
|
||
|
|
|
||
|
|
oneTap
|
||
|
|
.render({
|
||
|
|
container: containerRef.current,
|
||
|
|
showAlternativeLogin: true,
|
||
|
|
})
|
||
|
|
.on(VKID.WidgetEvents.ERROR, handleError)
|
||
|
|
.on(VKID.OneTapInternalEvents.LOGIN_SUCCESS, async (payload) => {
|
||
|
|
const { code, device_id } = payload;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const authData = await VKID.Auth.exchangeCode(code, device_id);
|
||
|
|
handleSuccess(authData);
|
||
|
|
} catch (error) {
|
||
|
|
handleError(error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('VKID initialization error:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
initialize();
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
// Очистка
|
||
|
|
isInitialized.current = false;
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleSuccess = async (data) => {
|
||
|
|
try {
|
||
|
|
// Отправка данных на ваш API endpoint
|
||
|
|
const response = await fetch('/api/auth/vk-callback', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(data),
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
// Успешная авторизация
|
||
|
|
console.log('Authentication successful:', result);
|
||
|
|
// Перенаправление или обновление состояния
|
||
|
|
window.location.href = '/dashboard'; // Пример редиректа
|
||
|
|
} else {
|
||
|
|
handleError(result);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Server request failed:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleError = (error) => {
|
||
|
|
console.error('Authentication error:', error);
|
||
|
|
// Можно показать уведомление пользователю
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div ref={containerRef} />
|
||
|
|
vk
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VKAuthDynamic;
|