Laravel社会名流与SPA Loging

Question

我使用的是vue.js、laravel和vue-authenticate，它们的文档可以找到这里。

我的前端运行在localhost:8080上，后端运行在127.0.0.1:8000上

vue-验证配置

Vue.use(VueAuthenticate, {
  baseUrl: 'http://127.0.0.1:8000', // Your API domain

  providers: {
    facebook: {
      clientId: '123456789',
      redirectUri: 'http://127.0.0.1:8000/facebook/callback', // Your client app URL
      scope: ['email', 'rsvp_event', 'public_profile', 'user_events']
    }
  }
});

问题

当我单击使用Facebook记录自己时，会出现以下错误

客户端错误：POST https://graph.facebook.com/v2.9/oauth/access_token导致一个400 Bad Request响应：{“400 Bad Request”：{“message”：“错误验证验证代码。请确保您的redirect_uri与您的redirect_uri相同(截断.)

URL如下所示：

http://127.0.0.1:8000/facebook/callback?code=AQCio_tQpGgfBUKrdBRqIFDMS9NJvaFXX4hhnyFhKylIoTmU27ciMHBZiojdJT5XA2pApaPsoRO3ocokWrDx-TEBTSOmWQErkcmbOEi6fUYUPtlfJfiYw-49NyKYEDq63akgEqDI2r2FeBrw2Wo8IjlchNZ7F_IcAIyJjstVYShCZAK3Beu_rNEPG-1M6wvLHqXbe2dhRQcW9TeE2dxtewK-MPEb3ffmmoX5bK9uyZrF-TTH4tpsOKI2S6HPpDy2wSasUcXCtdMJfV3TLFuFlq1H3pgza6nyvhy8Ln1OQYbRTT30uBaZWnUt7R3JQsfAxzM#_=_

问题

我该怎么做才能解决这个问题？

此外，我不得不说，我对回调函数有些困惑，等等。我是不是在合适的时候调用了正确的功能？

Laravel路线

Route::get('auth/facebook', 'SocialAuthController@redirectToProviderApi');
Route::get('facebook/callback', 'SocialAuthController@handleProviderCallbackAPI');

函数

 public function redirectToProviderApi()
    {
        return Socialite::driver('facebook')
            ->scopes(['rsvp_event', 'public_profile', 'user_events'])
            ->stateless()->redirect();
    }

    public function handleProviderCallbackAPI (Request $request) {

        $name = 'facebook';
        if ($request->has('redirectUri')) {
            config()->set("services.{$name}.redirect", $request->get('redirectUri'));
        }


        $provider = Socialite::driver($name);

        $provider->stateless();

        // Step 1 + 2
        $profile = $provider->user();
        $user = $service->createOrGetUser($profile);
        return response()->json(['token' => $this->createToken($user)]);
    }

Answer 1

您的Facebook API redirect_uri必须与您使用的API相同。

http://127.0.0.1:8000/facebook/callback