mirror of
https://github.com/vndangkhoa/purestream.git
synced 2026-04-05 01:17:58 +07:00
Two-step login: Open TikTok in new tab, then paste sessionid
This commit is contained in:
Khoa.vo
parent
19c2b4b410
commit
4073a84a7a
1 changed files with 71 additions and 74 deletions
|
|
@ -7,17 +7,22 @@ export const Login: React.FC = () => {
|
||||||
const [sessionId, setSessionId] = useState('');
|
const [sessionId, setSessionId] = useState('');
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [showInstructions, setShowInstructions] = useState(true);
|
const [step, setStep] = useState<1 | 2>(1);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleLogin = async () => {
|
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;
|
if (!sessionId.trim()) return;
|
||||||
|
|
||||||
setError('');
|
setError('');
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Send sessionid as credentials
|
|
||||||
const res = await axios.post(`${API_BASE_URL}/auth/credentials`, {
|
const res = await axios.post(`${API_BASE_URL}/auth/credentials`, {
|
||||||
credentials: {
|
credentials: {
|
||||||
http: {
|
http: {
|
||||||
|
|
@ -29,10 +34,10 @@ export const Login: React.FC = () => {
|
||||||
if (res.data.status === 'success') {
|
if (res.data.status === 'success') {
|
||||||
navigate('/');
|
navigate('/');
|
||||||
} else {
|
} else {
|
||||||
setError(res.data.message || 'Login failed.');
|
setError(res.data.message || 'Connection failed.');
|
||||||
}
|
}
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(err.response?.data?.detail || 'Invalid session. Please try again.');
|
setError(err.response?.data?.detail || 'Invalid session ID. Please try again.');
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +46,7 @@ export const Login: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
|
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex-shrink-0 pt-8 pb-4 px-6 text-center">
|
<div className="flex-shrink-0 pt-10 pb-6 px-6 text-center">
|
||||||
<div className="relative inline-block mb-3">
|
<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="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">
|
<div className="relative w-14 h-14 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
|
||||||
|
|
@ -54,7 +59,7 @@ export const Login: React.FC = () => {
|
||||||
<p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
|
<p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scrollable Content */}
|
{/* Content */}
|
||||||
<div className="flex-1 overflow-y-auto px-5 pb-8">
|
<div className="flex-1 overflow-y-auto px-5 pb-8">
|
||||||
<div className="max-w-sm mx-auto">
|
<div className="max-w-sm mx-auto">
|
||||||
{error && (
|
{error && (
|
||||||
|
|
@ -63,92 +68,84 @@ export const Login: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Instructions Toggle */}
|
{/* Step 1: Open TikTok */}
|
||||||
<button
|
<div className={`transition-opacity ${step === 1 ? 'opacity-100' : 'opacity-50'}`}>
|
||||||
onClick={() => setShowInstructions(!showInstructions)}
|
<div className="flex items-center gap-2 mb-3">
|
||||||
className="w-full text-left mb-4 p-3 bg-cyan-500/10 border border-cyan-500/20 rounded-xl"
|
<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 className="flex items-center justify-between">
|
|
||||||
<span className="text-cyan-400 text-sm font-medium">📱 How to get your Session ID</span>
|
|
||||||
<span className="text-cyan-400">{showInstructions ? '▲' : '▼'}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
<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>
|
||||||
|
|
||||||
{showInstructions && (
|
{/* Arrow */}
|
||||||
<div className="mb-5 space-y-3">
|
<div className="flex justify-center my-4">
|
||||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
<div className="text-gray-600">↓</div>
|
||||||
<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>
|
</div>
|
||||||
<div>
|
|
||||||
<p className="text-white text-sm">Open TikTok app → Login</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
{/* Step 2: Get Session ID */}
|
||||||
<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>
|
<div className={`transition-opacity ${step === 2 ? 'opacity-100' : 'opacity-50'}`}>
|
||||||
<div>
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<p className="text-white text-sm">On desktop: Open TikTok in Chrome</p>
|
<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>
|
||||||
<p className="text-gray-500 text-xs mt-0.5">F12 → Application → Cookies → tiktok.com</p>
|
<span className="text-white font-medium">Copy your Session ID</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div className="bg-white/5 rounded-xl p-4 mb-4 text-sm">
|
||||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
<p className="text-gray-300 mb-2">After logging in on TikTok:</p>
|
||||||
<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>
|
<ol className="text-gray-400 space-y-1 ml-4 list-decimal text-xs">
|
||||||
<div>
|
<li>Press <code className="bg-black/50 px-1 rounded">F12</code> (or right-click → Inspect)</li>
|
||||||
<p className="text-white text-sm">Copy the <code className="bg-white/10 px-1 rounded text-cyan-400">sessionid</code> value</p>
|
<li>Go to <strong className="text-white">Application</strong> → <strong className="text-white">Cookies</strong></li>
|
||||||
<p className="text-gray-500 text-xs mt-0.5">Long string starting with numbers</p>
|
<li>Find <code className="bg-cyan-500/20 text-cyan-400 px-1 rounded">sessionid</code> and copy its value</li>
|
||||||
</div>
|
</ol>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Session ID Input */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-gray-400 text-xs mb-1.5 ml-1">Session ID</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={sessionId}
|
value={sessionId}
|
||||||
onChange={(e) => setSessionId(e.target.value)}
|
onChange={(e) => setSessionId(e.target.value)}
|
||||||
placeholder="Paste your sessionid here..."
|
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"
|
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}
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Connect Button */}
|
{/* Help */}
|
||||||
<button
|
<div className="mt-8 pt-6 border-t border-white/10 text-center">
|
||||||
onClick={handleLogin}
|
|
||||||
disabled={!sessionId.trim() || isLoading}
|
|
||||||
className={`w-full py-4 text-white font-semibold rounded-xl transition-all transform active:scale-[0.98] 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>
|
|
||||||
|
|
||||||
{/* Video Tutorial Link */}
|
|
||||||
<div className="mt-6 text-center">
|
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/results?search_query=how+to+get+tiktok+sessionid+cookie"
|
href="https://www.youtube.com/results?search_query=how+to+find+tiktok+sessionid+cookie+chrome"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-cyan-400 text-sm underline"
|
className="text-gray-500 text-xs underline hover:text-gray-400"
|
||||||
>
|
>
|
||||||
Watch tutorial on YouTube →
|
Need help? Watch a tutorial →
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Note */}
|
|
||||||
<p className="text-gray-600 text-xs text-center mt-4">
|
|
||||||
Your session ID connects you to your TikTok account. It's stored locally on the server.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue