Vue SPA и Laravel Socialite - PullRequest
Новая
       17

Vue SPA и Laravel Socialite

0 голосов
/ 16 декабря 2018

Я пытаюсь интегрировать входы в социальные сети с помощью laravel api backend, используя опцию laravel socialite без сохранения состояния, так как я создаю одностраничное приложение с 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
}

1 Ответ

0 голосов
/ 18 января 2019

Я работал над чем-то похожим и нашел решение.Код основан на этой замечательной стартовой теме: https://github.com/cretueusebiu/laravel-vue-spa

-

В handleProviderCallback (), предполагая, что вы используете Passport API Authentication, вы можете попробовать это с помощью 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 (), который позволяет отправлять данные между окнами, iframes ... 

<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>

И, наконец, это моя логика для компонента Login в приложении vue: 

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>

Надеюсь, это поможет вам!

...