Add username/password login for mobile users - headless Playwright login
This commit is contained in:
Khoa.vo
parent
7e742eba10
commit
c92a6a6bf5
3 changed files with 267 additions and 104 deletions
|
|
@ -22,6 +22,33 @@ class CredentialsRequest(BaseModel):
|
|||
credentials: dict # JSON credentials in http.headers format
|
||||
|
||||
|
||||
class CredentialLoginRequest(BaseModel):
|
||||
username: str
|
||||
password: str
|
||||
|
||||
|
||||
@router.post("/login", response_model=BrowserLoginResponse)
|
||||
async def credential_login(request: CredentialLoginRequest):
|
||||
"""
|
||||
Login with TikTok username/email and password.
|
||||
Uses headless browser - works on Docker/NAS.
|
||||
"""
|
||||
try:
|
||||
result = await PlaywrightManager.credential_login(
|
||||
username=request.username,
|
||||
password=request.password,
|
||||
timeout_seconds=60
|
||||
)
|
||||
return BrowserLoginResponse(
|
||||
status=result["status"],
|
||||
message=result["message"],
|
||||
cookie_count=result.get("cookie_count", 0)
|
||||
)
|
||||
except Exception as e:
|
||||
print(f"DEBUG: Credential login error: {e}")
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
|
||||
@router.post("/browser-login", response_model=BrowserLoginResponse)
|
||||
async def browser_login():
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -118,6 +118,129 @@ class PlaywrightManager:
|
|||
with open(USER_AGENT_FILE, "w") as f:
|
||||
json.dump({"user_agent": user_agent}, f)
|
||||
|
||||
@staticmethod
|
||||
async def credential_login(username: str, password: str, timeout_seconds: int = 60) -> dict:
|
||||
"""
|
||||
Headless login using username/password.
|
||||
Works on Docker/NAS deployments without a display.
|
||||
|
||||
Args:
|
||||
username: TikTok username, email, or phone
|
||||
password: TikTok password
|
||||
timeout_seconds: Max time to wait for login
|
||||
|
||||
Returns: {"status": "success/error", "message": "...", "cookie_count": N}
|
||||
"""
|
||||
print(f"DEBUG: Starting headless credential login for: {username}")
|
||||
|
||||
async with async_playwright() as p:
|
||||
browser = await p.chromium.launch(
|
||||
headless=True,
|
||||
args=PlaywrightManager.BROWSER_ARGS
|
||||
)
|
||||
|
||||
context = await browser.new_context(
|
||||
user_agent=PlaywrightManager.DEFAULT_USER_AGENT
|
||||
)
|
||||
|
||||
page = await context.new_page()
|
||||
|
||||
try:
|
||||
# Navigate to TikTok login page
|
||||
await page.goto("https://www.tiktok.com/login/phone-or-email/email", wait_until="domcontentloaded")
|
||||
await asyncio.sleep(2)
|
||||
|
||||
print("DEBUG: Looking for login form...")
|
||||
|
||||
# Wait for and fill username/email field
|
||||
username_selector = 'input[name="username"], input[placeholder*="Email"], input[placeholder*="email"], input[type="text"]'
|
||||
await page.wait_for_selector(username_selector, timeout=10000)
|
||||
await page.fill(username_selector, username)
|
||||
await asyncio.sleep(0.5)
|
||||
|
||||
# Fill password field
|
||||
password_selector = 'input[type="password"]'
|
||||
await page.wait_for_selector(password_selector, timeout=5000)
|
||||
await page.fill(password_selector, password)
|
||||
await asyncio.sleep(0.5)
|
||||
|
||||
print("DEBUG: Credentials filled, clicking login...")
|
||||
|
||||
# Click login button
|
||||
login_button = 'button[type="submit"], button[data-e2e="login-button"]'
|
||||
await page.click(login_button)
|
||||
|
||||
# Wait for login to complete - poll for sessionid cookie
|
||||
print("DEBUG: Waiting for login to complete...")
|
||||
elapsed = 0
|
||||
check_interval = 2
|
||||
cookies_found = {}
|
||||
|
||||
while elapsed < timeout_seconds:
|
||||
await asyncio.sleep(check_interval)
|
||||
elapsed += check_interval
|
||||
|
||||
# Check for error messages
|
||||
error_el = await page.query_selector('[class*="error"], [class*="Error"]')
|
||||
if error_el:
|
||||
error_text = await error_el.inner_text()
|
||||
if error_text and len(error_text) > 0:
|
||||
await browser.close()
|
||||
return {
|
||||
"status": "error",
|
||||
"message": f"Login failed: {error_text[:100]}",
|
||||
"cookie_count": 0
|
||||
}
|
||||
|
||||
# Check cookies
|
||||
all_cookies = await context.cookies()
|
||||
for cookie in all_cookies:
|
||||
if cookie.get("domain", "").endswith("tiktok.com"):
|
||||
cookies_found[cookie["name"]] = cookie["value"]
|
||||
|
||||
if "sessionid" in cookies_found:
|
||||
print(f"DEBUG: Login successful! Found {len(cookies_found)} cookies.")
|
||||
break
|
||||
|
||||
# Check if CAPTCHA or verification needed
|
||||
captcha = await page.query_selector('[class*="captcha"], [class*="Captcha"], [class*="verify"]')
|
||||
if captcha:
|
||||
await browser.close()
|
||||
return {
|
||||
"status": "error",
|
||||
"message": "TikTok requires verification (CAPTCHA). Please try the cookie method.",
|
||||
"cookie_count": 0
|
||||
}
|
||||
|
||||
print(f"DEBUG: Waiting for login... ({elapsed}s)")
|
||||
|
||||
await browser.close()
|
||||
|
||||
if "sessionid" not in cookies_found:
|
||||
return {
|
||||
"status": "error",
|
||||
"message": "Login timed out. Check your credentials or try the cookie method.",
|
||||
"cookie_count": 0
|
||||
}
|
||||
|
||||
# Save credentials
|
||||
PlaywrightManager.save_credentials(cookies_found, PlaywrightManager.DEFAULT_USER_AGENT)
|
||||
|
||||
return {
|
||||
"status": "success",
|
||||
"message": "Successfully logged in!",
|
||||
"cookie_count": len(cookies_found)
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
await browser.close()
|
||||
print(f"DEBUG: Login error: {e}")
|
||||
return {
|
||||
"status": "error",
|
||||
"message": f"Login failed: {str(e)[:100]}",
|
||||
"cookie_count": 0
|
||||
}
|
||||
|
||||
@staticmethod
|
||||
async def browser_login(timeout_seconds: int = 180) -> dict:
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -1,172 +1,185 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { API_BASE_URL } from '../config';
|
||||
|
||||
export const Login: React.FC = () => {
|
||||
const [cookies, setCookies] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [showBrowserLogin, setShowBrowserLogin] = useState(false);
|
||||
const login = useAuthStore((state) => state.login);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showCookieMethod, setShowCookieMethod] = useState(false);
|
||||
const [cookies, setCookies] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBrowserLogin = async () => {
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!username.trim() || !password.trim()) return;
|
||||
|
||||
setError('');
|
||||
setIsConnecting(true);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const res = await axios.post(`${API_BASE_URL}/auth/browser-login`);
|
||||
const res = await axios.post(`${API_BASE_URL}/auth/login`, {
|
||||
username: username.trim(),
|
||||
password: password.trim()
|
||||
});
|
||||
|
||||
if (res.data.status === 'success') {
|
||||
setTimeout(() => navigate('/'), 1000);
|
||||
} else if (res.data.status === 'timeout') {
|
||||
setError(res.data.message);
|
||||
setIsConnecting(false);
|
||||
navigate('/');
|
||||
} else {
|
||||
setError(res.data.message || 'Login failed. Please check your credentials.');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to connect. Use the cookie method above.');
|
||||
setIsConnecting(false);
|
||||
const message = err.response?.data?.detail || err.response?.data?.message || 'Login failed. Please try again.';
|
||||
setError(message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handleCookieLogin = async () => {
|
||||
if (!cookies.trim()) return;
|
||||
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await login(cookies);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError('Invalid format. Make sure you paste the full cookie JSON.');
|
||||
// Try to parse as JSON
|
||||
let jsonCreds;
|
||||
try {
|
||||
jsonCreds = JSON.parse(cookies);
|
||||
} catch {
|
||||
// If not JSON, wrap it as simple session format
|
||||
jsonCreds = {
|
||||
http: {
|
||||
cookies: { sessionid: cookies.trim() }
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const res = await axios.post(`${API_BASE_URL}/auth/credentials`, {
|
||||
credentials: jsonCreds
|
||||
});
|
||||
|
||||
if (res.data.status === 'success') {
|
||||
navigate('/');
|
||||
} else {
|
||||
setError(res.data.message || 'Failed to save cookies.');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Invalid cookie format.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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-12 pb-6 px-6 text-center">
|
||||
<div className="relative inline-block mb-4">
|
||||
<div className="w-16 h-16 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-16 h-16 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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">
|
||||
<svg className="w-7 h-7 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">PureStream</h1>
|
||||
<p className="text-gray-500 text-sm">Ad-free TikTok viewing</p>
|
||||
<h1 className="text-xl font-bold text-white mb-0.5">PureStream</h1>
|
||||
<p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div className="flex-1 overflow-y-auto px-5 pb-8">
|
||||
<div className="max-w-sm mx-auto">
|
||||
{error && (
|
||||
<div className="mb-5 p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm text-center">
|
||||
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* How to Login - Step by Step */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-white font-semibold text-lg mb-4 text-center">How to Login</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
||||
<div className="w-7 h-7 bg-cyan-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">1</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">Open TikTok in browser</p>
|
||||
<p className="text-gray-500 text-xs mt-0.5">Use Chrome/Safari on your phone or computer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
||||
<div className="w-7 h-7 bg-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">2</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">Export your cookies</p>
|
||||
<p className="text-gray-500 text-xs mt-0.5">Use "Cookie-Editor" extension (Chrome/Firefox)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
||||
<div className="w-7 h-7 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">3</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">Paste cookies below</p>
|
||||
<p className="text-gray-500 text-xs mt-0.5">Copy the JSON and paste it here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cookie Input */}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<textarea
|
||||
value={cookies}
|
||||
onChange={(e) => setCookies(e.target.value)}
|
||||
placeholder='Paste your cookie JSON here...'
|
||||
className="w-full h-32 bg-black/60 border-2 border-white/10 rounded-2xl p-4 text-white text-sm font-mono resize-none focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
|
||||
{/* Simple Login Form */}
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-400 text-xs mb-1.5 ml-1">Email or Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Enter your TikTok email"
|
||||
className="w-full bg-black/60 border-2 border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-400 text-xs mb-1.5 ml-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
className="w-full bg-black/60 border-2 border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Connect Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!cookies.trim()}
|
||||
className={`w-full py-4 text-white font-semibold rounded-2xl transition-all transform active:scale-[0.98] shadow-lg text-base ${cookies.trim()
|
||||
? 'bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 shadow-pink-500/20'
|
||||
disabled={!username.trim() || !password.trim() || isLoading}
|
||||
className={`w-full py-4 text-white font-semibold rounded-xl transition-all transform active:scale-[0.98] text-base mt-2 ${username.trim() && password.trim() && !isLoading
|
||||
? 'bg-gradient-to-r from-cyan-500 to-pink-500 shadow-lg shadow-pink-500/20'
|
||||
: 'bg-gray-700 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
Connect to TikTok
|
||||
{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" />
|
||||
Logging in...
|
||||
</span>
|
||||
) : (
|
||||
'Log In'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Help Link */}
|
||||
<div className="mt-6 text-center">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cyan-400 text-sm underline"
|
||||
>
|
||||
Get Cookie-Editor Extension →
|
||||
</a>
|
||||
</div>
|
||||
{/* Info */}
|
||||
<p className="text-gray-600 text-xs text-center mt-4">
|
||||
Your credentials are used only to log into TikTok on the server. They are not stored.
|
||||
</p>
|
||||
|
||||
{/* Desktop Browser Login - Hidden by default */}
|
||||
{/* Cookie Method - Alternative */}
|
||||
<div className="mt-8 pt-6 border-t border-white/10">
|
||||
<button
|
||||
onClick={() => setShowBrowserLogin(!showBrowserLogin)}
|
||||
onClick={() => setShowCookieMethod(!showCookieMethod)}
|
||||
className="w-full text-gray-500 hover:text-gray-400 text-sm py-2 flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>{showBrowserLogin ? '▲' : '▼'}</span>
|
||||
<span>Desktop Browser Login</span>
|
||||
<span>{showCookieMethod ? '▲' : '▼'}</span>
|
||||
<span>Alternative: Cookie Method</span>
|
||||
</button>
|
||||
|
||||
{showBrowserLogin && (
|
||||
<div className="mt-3 p-4 bg-white/5 rounded-xl">
|
||||
<p className="text-gray-400 text-xs text-center mb-3">
|
||||
⚠️ Only works on local machines with a display
|
||||
{showCookieMethod && (
|
||||
<div className="mt-3 p-4 bg-white/5 rounded-xl space-y-3">
|
||||
<p className="text-gray-400 text-xs text-center">
|
||||
If login doesn't work, you can paste TikTok cookies directly.
|
||||
</p>
|
||||
<textarea
|
||||
value={cookies}
|
||||
onChange={(e) => setCookies(e.target.value)}
|
||||
placeholder='Paste sessionid or full cookie JSON...'
|
||||
className="w-full h-24 bg-black/60 border border-white/10 rounded-xl p-3 text-white text-xs font-mono resize-none focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
onClick={handleBrowserLogin}
|
||||
disabled={isConnecting}
|
||||
className={`w-full py-3 rounded-xl transition-all text-sm ${isConnecting
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white/10 hover:bg-white/20 text-white'
|
||||
onClick={handleCookieLogin}
|
||||
disabled={!cookies.trim() || isLoading}
|
||||
className={`w-full py-3 rounded-xl text-sm transition-all ${cookies.trim() && !isLoading
|
||||
? 'bg-white/10 hover:bg-white/20 text-white'
|
||||
: 'bg-gray-800 text-gray-500 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-gray-500 border-t-white rounded-full animate-spin" />
|
||||
Connecting...
|
||||
</span>
|
||||
) : (
|
||||
'Open TikTok Login Window'
|
||||
)}
|
||||
Connect with Cookies
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue