Question

我正在尝试使用laravel socialite无状态选项通过laravel api后端集成社交登录，因为我正在使用vuejs构建单页应用程序，并且所有操作都通过http api调用完成。

但是我遇到了社交回调的问题，当前的回调已发送到laravel后端，并且可以正常工作，但是现在我想在开始身份验证之前将用户返回到同一页面，有关如何解决的任何想法这个？

public function handleProviderCallback($provider)
{
    $user = Socialite::driver($provider)->stateless()->user();

    // dont know how to return the user to the last page on vue
}

Answer 1

我正在做类似的事情，并且找到了解决方案。该代码基于以下出色的入门主题：https://github.com/cretueusebiu/laravel-vue-spa

-

在handleProviderCallback（）中，假设您使用的是Passport API身份验证，则可以对Controller进行尝试：

public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->stateless()->user();

        /* HERE CREATE USER WITH YOUR APP LOGIC. If email is unique... */

        // Login the created user
        Auth::login($user, true);

        // Get the username (or wathever you want to return in the JWT).
        $success['name'] = Auth::user()->name;
        // Create a new access_token for the session (Passport)
        $success['token'] = Auth::user()->createToken('MyApp')->accessToken;

        // Create new view (I use callback.blade.php), and send the token and the name.
        return view('callback', [
            'name' => $success['name'],
            'token' => $success['token'],
        ]);
    }

对于callback.blade.php视图，您唯一需要做的就是将请求的令牌和用户名发送到Vue应用程序。为此，您可以使用window.postMessage（）方法，该方法允许在Windows，iframe ...之间发送数据。

<html>
<head>
  <meta charset="utf-8">
  <title>Callback</title>
  <script>
    window.opener.postMessage({ token: "{{ $token }}", name: "{{ $name }}" }, "YOUR DOMAIN");
    window.close();
  </script>
</head>
<body>
</body>
</html>

最后，这是我对vue应用程序中的Login组件的逻辑：

export default {
        // Waiting for the callback.blade.php message... (token and username).
        mounted () {
          window.addEventListener('message', this.onMessage, false)
        },

        beforeDestroy () {
          window.removeEventListener('message', this.onMessage)
        },

        methods : {
            // This method call the function to launch the popup and makes the request to the controller. 
            loginGoogle () {
              const newWindow = openWindow('', 'message')
              axios.post('api/login-google')
                    .then(response => {
                      newWindow.location.href = response.data;
                    })
                    .catch(function (error) {
                      console.error(error);
                    });
              },
              // This method save the new token and username
              onMessage (e) {
                if (e.origin !== window.origin || !e.data.token) {
                  return
                }
                localStorage.setItem('user',e.data.name)
                localStorage.setItem('jwt',e.data.token)

                this.$router.go('/board')
              }
        }
    }

    // The popup is launched.

    function openWindow (url, title, options = {}) {
      if (typeof url === 'object') {
        options = url
        url = ''
      }

      options = { url, title, width: 600, height: 720, ...options }

      const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left
      const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top
      const width = window.innerWidth || document.documentElement.clientWidth || window.screen.width
      const height = window.innerHeight || document.documentElement.clientHeight || window.screen.height

      options.left = ((width / 2) - (options.width / 2)) + dualScreenLeft
      options.top = ((height / 2) - (options.height / 2)) + dualScreenTop

      const optionsStr = Object.keys(options).reduce((acc, key) => {
        acc.push(`${key}=${options[key]}`)
        return acc
      }, []).join(',')

      const newWindow = window.open(url, title, optionsStr)

      if (window.focus) {
        newWindow.focus()
      }

      return newWindow
    }

</script>

希望对您有帮助！

Vue SPA和Laravel社交名流

1 个答案: