如何将 Facebook 与 Laravel11-Vue3 应用程序集成

Question

大家好，我正在使用 Vue3 和 Laravel11 创建社交媒体规划器当我使用 PHP 的 Facebook SDK 时，当我尝试将用户重定向到 Facebook 身份验证页面时，出现 CORS 错误。这是我的代码： 1-Facebook服务提供商

<?php

namespace App\Providers;

use Facebook\Facebook;
use Illuminate\Support\ServiceProvider;

class FacebookServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        $this->app->singleton(Facebook::class, function () {
            return new Facebook([
                'app_id' => config('services.facebook.app_id'),
                'app_secret' => config('services.facebook.app_secret'),
                'default_graph_version' => config('services.facebook.default_graph_version'),
            ]);
        });
    }
}

2- Facebook 控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Services\FacebookService;
use Facebook\Facebook;

class FacebookController extends Controller
{

    public function __construct(private Facebook $fb)
    {
    }

    /**
     * Connect a user with Facebook.
     */
    public function connect(Request $request)
    {
        $loginUrl = FacebookService::getFacebookLoginUrl($this->fb);

        return redirect()->away($loginUrl);
    }
}

3- Facebook 服务：

<?php

namespace App\Services;

use Facebook\Facebook;

class FacebookService
{
    /**
     * Create a new class instance.
     */
    public function __construct()
    {
    }

    /**
     * Get Facebook login URL 
     * @param Facebook $fb
     * @return string
     */
    public static function getFacebookLoginUrl(Facebook $fb): string
    {
        $helper = $fb->getRedirectLoginHelper();

        $permissions = ['email'];

        $loginUrl = $helper->getLoginUrl(config('services.facebook.redirect_url'), $permissions);

        return $loginUrl ?? '';
    }
}

这是错误

Access to XMLHttpRequest at 'https://www.facebook.com/v19.0/dialog/oauth?client_id=*******&state=dc116e489af76f67ec24433bea3d81e8&response_type=code&sdk=php-sdk-5.1.4&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fapi%2Fv1%2Ffacebook%2Fcallback&scope=email' (redirected from 'http://localhost:8000/api/v1/facebook/connect') from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

提前致谢

Answer 1

您需要配置

config/cors.php

文件

<?php

return [

/*
|-------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|-------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

];