如何使用React与Laravel实现Twitter登录？三种测试方案均失效求解决方案

你测试过的三种方案如下：

• 方案1
  
• 方案2
  
• 方案3
  

前置准备 #

先前往X开发者平台创建应用，获取Client ID、Client Secret，同时配置好和代码完全一致的回调地址，开放OAuth 2.0的用户信息读取权限。本地测试时建议用ngrok映射本地服务为公网HTTPS地址，X不支持HTTP本地地址作为回调。

后端Laravel侧实现 #

• 安装Laravel官方Socialite扩展包：
  composer require laravel/socialite
• 在config/services.php中添加X登录配置：

'twitter' => [
    'client_id' => env('TWITTER_CLIENT_ID'),
    'client_secret' => env('TWITTER_CLIENT_SECRET'),
    'redirect' => env('TWITTER_REDIRECT_URI'),
]

• 在.env文件中填入对应参数：

TWITTER_CLIENT_ID=你的开发者平台Client ID
TWITTER_CLIENT_SECRET=你的开发者平台Client Secret
TWITTER_REDIRECT_URI=你的回调地址，比如https://your-domain.com/auth/twitter/callback

• 添加路由到routes/api.php：

Route::get('/auth/twitter', [\App\Http\Controllers\TwitterAuthController::class, 'redirect']);
Route::get('/auth/twitter/callback', [\App\Http\Controllers\TwitterAuthController::class, 'callback']);

• 创建控制器TwitterAuthController：

<?php

namespace App\Http\Controllers;

use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class TwitterAuthController extends Controller
{
    public function redirect()
    {
        return Socialite::driver('twitter')->redirect();
    }

    public function callback()
    {
        try {
            $twitterUser = Socialite::driver('twitter')->user();
        } catch (\Exception $e) {
            return response()->json(['message' => '登录授权失败'], 400);
        }

        // 查找或创建用户
        $user = User::updateOrCreate(
            ['twitter_id' => $twitterUser->id],
            [
                'name' => $twitterUser->name,
                'email' => $twitterUser->email,
                'avatar' => $twitterUser->avatar,
                'password' => bcrypt(\Str::random(16))
            ]
        );

        // 生成登录token，用Sanctum的话就用下面的代码
        $token = $user->createToken('auth-token')->plainTextToken;

        // 跳转到前端页面并携带token
        return redirect("你的前端登录成功页面地址?token={$token}");
    }
}

前端React侧实现 #

• 登录页添加X登录按钮，点击直接跳转后端的/api/auth/twitter接口即可：

const TwitterLoginButton = () => {
  const handleLogin = () => {
    window.location.href = `${process.env.REACT_APP_API_URL}/auth/twitter`
  }

  return <button onClick={handleLogin}>使用X（Twitter）账号登录</button>
}

• 前端配置回调页面路由，在回调页面加载时获取url中的token，存储到localStorage后完成登录流程：

import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const TwitterCallbackPage = () => {
  const navigate = useNavigate()

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const token = params.get('token')
    if (token) {
      localStorage.setItem('auth_token', token)
      navigate('/home')
    } else {
      navigate('/login', { state: { error: '登录失败' } })
    }
  }, [navigate])

  return <div>登录中...</div>
}

常见问题排查 #

• 回调地址必须和X开发者平台配置的完全一致，包括协议、域名、路径、尾斜杠都不能有差异
• 确保开发者平台的OAuth 2.0设置中已经开启了邮箱、用户资料的读取权限
• 跨域问题需要在Laravel的cors配置中放开前端域名的访问权限

内容的提问来源于stack exchange，提问作者sachitha kariyawasm