vndangkhoa/kv-tiktok
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add bookmarklet for auto sessionid extraction from TikTok

Browse source
This commit is contained in:
Khoa.vo 2025-12-19 15:19:00 +07:00
parent 4073a84a7a
commit fd9b444222
1 changed files with 84 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
frontend/src/pages/Login.tsx
View file

@ -1,24 +1,23 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import axios from 'axios';
import { API_BASE_URL } from '../config';
export const Login: React.FC = () => {
const [sessionId, setSessionId] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [step, setStep] = useState<1 | 2>(1);
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const openTikTokLogin = () => {
// Open TikTok login in new tab
window.open('https://www.tiktok.com/login', '_blank');
setStep(2);
};
const handleConnect = async () => {
if (!sessionId.trim()) return;
// Check if we have a sessionid from URL (bookmarklet redirect)
useEffect(() => {
const sessionIdFromUrl = searchParams.get('sessionid');
if (sessionIdFromUrl) {
handleAutoConnect(sessionIdFromUrl);
}
}, [searchParams]);
const handleAutoConnect = async (sessionId: string) => {
setError('');
setIsLoading(true);
@ -26,7 +25,7 @@ export const Login: React.FC = () => {
const res = await axios.post(`${API_BASE_URL}/auth/credentials`, {
credentials: {
http: {
cookies: { sessionid: sessionId.trim() }
cookies: { sessionid: sessionId }
}
}
});
@ -34,19 +33,39 @@ export const Login: React.FC = () => {
if (res.data.status === 'success') {
navigate('/');
} else {
setError(res.data.message || 'Connection failed.');
setError('Connection failed. Please try again.');
setIsLoading(false);
}
} catch (err: any) {
setError(err.response?.data?.detail || 'Invalid session ID. Please try again.');
} finally {
setError('Invalid session. Please try again.');
setIsLoading(false);
}
};
// Get the current app URL for bookmarklet redirect
const appUrl = window.location.origin;
// Bookmarklet code - extracts sessionid and redirects back
const bookmarkletCode = `javascript:(function(){var c=document.cookie.split(';');var s='';for(var i=0;i<c.length;i++){var p=c[i].trim().split('=');if(p[0]==='sessionid'){s=p[1];break;}}if(s){window.location='${appUrl}/login?sessionid='+encodeURIComponent(s);}else{alert('Please login to TikTok first!');}})();`;
const copyBookmarklet = () => {
navigator.clipboard.writeText(bookmarkletCode);
alert('Bookmarklet code copied! Create a new bookmark and paste this as the URL.');
};
if (isLoading) {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col items-center justify-center">
<div className="w-16 h-16 border-4 border-pink-500/30 border-t-pink-500 rounded-full animate-spin mb-4" />
<p className="text-white">Connecting to TikTok...</p>
</div>
);
}
return (
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
{/* Header */}
<div className="flex-shrink-0 pt-10 pb-6 px-6 text-center">
<div className="flex-shrink-0 pt-10 pb-4 px-6 text-center">
<div className="relative inline-block mb-3">
<div className="w-14 h-14 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl rotate-12 absolute -inset-1 blur-lg opacity-50" />
<div className="relative w-14 h-14 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
@ -68,84 +87,59 @@ export const Login: React.FC = () => {
</div>
)}
{/* Step 1: Open TikTok */}
<div className={`transition-opacity ${step === 1 ? 'opacity-100' : 'opacity-50'}`}>
<div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 bg-cyan-500 rounded-full flex items-center justify-center text-white font-bold text-xs">1</div>
<span className="text-white font-medium">Login to TikTok</span>
</div>
<button
onClick={openTikTokLogin}
className="w-full py-4 bg-black border-2 border-white/20 hover:border-white/40 rounded-xl text-white font-medium flex items-center justify-center gap-3 transition-all"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
</svg>
Open TikTok Login
</button>
<p className="text-gray-500 text-xs text-center mt-2">Opens in new tab - login with your account</p>
</div>
{/* One-Time Setup (Desktop) */}
<div className="bg-gradient-to-r from-cyan-500/10 to-pink-500/10 border border-white/10 rounded-2xl p-5 mb-6">
<h2 className="text-white font-semibold mb-3 flex items-center gap-2">
<span className="text-lg">🖥️</span> Desktop Setup (One-Time)
</h2>
<ol className="text-gray-300 text-sm space-y-2 mb-4">
<li className="flex gap-2">
<span className="text-cyan-400">1.</span>
<span>Drag this button to your bookmarks bar:</span>
</li>
</ol>
{/* Arrow */}
<div className="flex justify-center my-4">
<div className="text-gray-600">↓</div>
</div>
{/* Step 2: Get Session ID */}
<div className={`transition-opacity ${step === 2 ? 'opacity-100' : 'opacity-50'}`}>
<div className="flex items-center gap-2 mb-3">
<div className={`w-6 h-6 rounded-full flex items-center justify-center text-white font-bold text-xs ${step === 2 ? 'bg-pink-500' : 'bg-gray-600'}`}>2</div>
<span className="text-white font-medium">Copy your Session ID</span>
</div>
<div className="bg-white/5 rounded-xl p-4 mb-4 text-sm">
<p className="text-gray-300 mb-2">After logging in on TikTok:</p>
<ol className="text-gray-400 space-y-1 ml-4 list-decimal text-xs">
<li>Press <code className="bg-black/50 px-1 rounded">F12</code> (or right-click → Inspect)</li>
<li>Go to <strong className="text-white">Application</strong> → <strong className="text-white">Cookies</strong></li>
<li>Find <code className="bg-cyan-500/20 text-cyan-400 px-1 rounded">sessionid</code> and copy its value</li>
</ol>
</div>
<input
type="text"
value={sessionId}
onChange={(e) => setSessionId(e.target.value)}
placeholder="Paste sessionid value here..."
className="w-full bg-black/60 border-2 border-white/10 rounded-xl p-4 text-white text-sm font-mono focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600 mb-4"
disabled={isLoading}
/>
<button
onClick={handleConnect}
disabled={!sessionId.trim() || isLoading}
className={`w-full py-4 text-white font-semibold rounded-xl transition-all text-base ${sessionId.trim() && !isLoading
? 'bg-gradient-to-r from-cyan-500 to-pink-500 shadow-lg shadow-pink-500/20'
: 'bg-gray-700 cursor-not-allowed'
}`}
>
{isLoading ? (
<span className="flex items-center justify-center gap-2">
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
Connecting...
</span>
) : (
'Connect'
)}
</button>
</div>
{/* Help */}
<div className="mt-8 pt-6 border-t border-white/10 text-center">
{/* Draggable Bookmarklet */}
<a
href="https://www.youtube.com/results?search_query=how+to+find+tiktok+sessionid+cookie+chrome"
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 text-xs underline hover:text-gray-400"
href={bookmarkletCode}
onClick={(e) => e.preventDefault()}
onDragEnd={() => { }}
className="inline-block py-2 px-4 bg-gradient-to-r from-pink-500 to-orange-500 text-white font-bold rounded-lg text-sm cursor-grab active:cursor-grabbing shadow-lg mb-4"
title="Drag me to your bookmarks bar!"
>
Need help? Watch a tutorial →
📎 Get PureStream
</a>
<p className="text-gray-500 text-xs">
Can't drag? <button onClick={copyBookmarklet} className="text-cyan-400 underline">Copy code</button> and create a bookmark manually.
</p>
</div>
{/* How to Use */}
<div className="bg-white/5 rounded-2xl p-5">
<h2 className="text-white font-semibold mb-3 flex items-center gap-2">
<span className="text-lg">📱</span> How to Connect
</h2>
<ol className="text-gray-300 text-sm space-y-3">
<li className="flex gap-3">
<div className="w-6 h-6 bg-cyan-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-xs">1</div>
<span>Go to <a href="https://www.tiktok.com" target="_blank" rel="noopener noreferrer" className="text-cyan-400 underline">tiktok.com</a> and login with your account</span>
</li>
<li className="flex gap-3">
<div className="w-6 h-6 bg-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-xs">2</div>
<span>Click the <strong className="text-pink-400">"📎 Get PureStream"</strong> bookmark</span>
</li>
<li className="flex gap-3">
<div className="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-xs">3</div>
<span>You'll be automatically redirected and logged in!</span>
</li>
</ol>
</div>
{/* Note */}
<p className="text-gray-600 text-xs text-center mt-6">
The bookmarklet securely reads your TikTok session and connects it to PureStream.
</p>
</div>
</div>
</div>