laravel - Vue SPA 和 Laravel 社交名流
问题描述
我正在尝试使用 laravel socialite stateless 选项通过 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
}
解决方案
我正在做类似的事情,我找到了解决方案。代码基于这个伟大的入门主题: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() 方法,该方法允许在窗口、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 应用程序中登录组件的逻辑:
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>
我希望它对你有帮助!
推荐阅读
- sql - 提供 id 数组并获取具有重复行的行
- random - 采样数据包
- jquery - 带有 Json 的导出功能不起作用
- python - 如何避免更新现有博客文章的 django 完整性错误
- python - Pandas、numpy.where() 和 numpy.nan
- postgresql - 如何在 Amazon Aurora PostgreSQL 无服务器集群上创建初始数据库
- javascript - 使用 sygnoos 的弹出式构建器定位弹出式广告的延迟
- devexpress - 运行控制台应用程序以将 .rdl 报告转换为 DevExpress 报告时出现问题
- python - 我们可以使用在 spark 2.4 上训练的 LightGBM 模型并将其加载到 spark 3 上吗?
- visual-studio - 是什么导致 Visual Studio 错误 CS0518(UWP 应用)?