如何将我在社交名流回调中获得的访问令牌返回给客户端？ 我需要将这些数据返回给 vue 以便用户登录。 令牌数据
这是我在 vue 中获取重定向网址的代码
googleLogin(){
const self = this;
let socialLogin = {
name: 'google'
};
self.$http.post(`api/googleLogin`, socialLogin)
.then(response => {
console.log('GOOGLE LOGIN RESPONSE ', response.body);
window.location = response.body;
})
}
而对于后端
public function googleLogin(Request $request){
$socialType = $request->name;
return response()->json(
Socialite::driver($socialType)
->with(['social_type' => $socialType])
->stateless()
->redirect()
->getTargetUrl()
);
}
public function googleLoginCallback(){
$http = new GuzzleHttpClient;
$user = Socialite::with('google')->stateless()->user();
$userCredentials = [
'token' => $user->token,
'refreshToken' => $user->refreshToken,
'expiresIn' => $user->expiresIn,
];
$response = $http->post(env('LOGIN_ENDPOINT'), [
'form_params' => [
'grant_type' => 'social',
'client_id' => env('CLIENT_ID'),
'client_secret' => env('CLIENT_SECRET'),
'network' => 'google',
'access_token' => $userCredentials['token'],
]
]);
return json_decode((string) $response->getBody(), true);
}
我正在研究类似的东西，我找到了解决方案。代码基于这个伟大的入门主题：https://github.com/cretueusebiu/laravel-vue-spa
--
在 googleLoginCallback(( 中，假设您使用的是 Passport API 身份验证，您可以尝试对控制器使用以下命令：
public function googleCallback()
{
$provider = 'google';
$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>
最后，这是我对 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>
希望对您有所帮助！