今天将博客的第三方登录写了一下 博客是前后端分离的 前端vue+后端laravel 我在这里会一步步教大家如何理解 aouth 形式的授权登录
完成效果图
项目地址 可以的话帮忙点个 star 😂
aouth登录大概的流程图
如何申请应用如下
在流程中因为是前后端分离
- 前端拿到key和回调地址去请求授权地址 执行第一步 去拿授权code
- 后端拿到code 去取access_token 并且拿到用户信息
- 判断有无该用户授权信息 有则读 无则写 并且给用户颁发token 并且进行回调给前端
- 前端拿到token 请求接口去取用户数据 整个登录流程完成
<a @click="giteeLogin" v-title="`登录`"></a>
<script>
//登录方法 写在methods里面 如果只是前端不是vue 为function方法即可
login(){
//关键 方法打开一个新页面请求这个地址 其实 process.env.GITEE_CLIENT_ID 和process.env.REDIRECT_URI 写在配置文件中
window.open('https://gitee.com/oauth/authorize?client_id='+process.env.GITEE_CLIENT_ID+'&redirect_uri='+process.env.REDIRECT_URI+'&response_type=code')
//监听回调方法 方法文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
window.addEventListener('message', function (e) {
//e.data 就是后端颁发的token
//执行vuex里面的方法 可以理解拿到了token 去请求获取用户信息的接口
store.dispatch('loginByOauth',e.data)
}, false)
this.show = false
}
</script>
后端接口需要做的就是其他部分了
- 回调接口
/**
* 微博授权登录地址
* @param Request $request
* @param WeiBoOauth $oauth
*/
public function handleWeiBoCallback(Request $request, WeiBoOauth $oauth)
{
//微博回调code
$code = $request->get('code');
//根据code 拿access_token
$result = $oauth->getAccessToken($code);
$result = $result->getBody()->getContents();
$result = json_decode($result,true);
$access_token = $result['access_token'];
$userInfo = $oauth->getUserInfo($access_token);
$userInfo = json_decode($userInfo->getBody()->getContents(),true);
//判断用户是否存在
$user = User::query()->where('wb_id',$userInfo['id'])->first();
//不存在写入table
if(empty($user)) {
$user = User::query()->create([
'wb_id' => $userInfo['id'],
'name' => $userInfo['name'],
'github_name' => $userInfo['screen_name'],
'avatar' => $userInfo['avatar_large'],
'user_json' => json_encode($userInfo),
'bound_oauth' => 3
]);
}
//颁发token
$token = Auth::guard('api')->login($user);
//这一步是关键 通过后端的这个页面将token进行回调
return view('loading', [
'token' => $token,
'domain' => env('APP_CALLBACK','https://pltrue.top/'),
]);
}
- 获取access_token方法
/**
* @param $code
* @return \Psr\Http\Message\ResponseInterface
* @throws \GuzzleHttp\Exception\GuzzleException
*/
public function getAccessToken($code)
{
$client_id = env('WEIBO_CLIENT_ID');
$client_secret = env('WEIBO_CLIENT_SECRET');
$redirect_uri = env('WEIBO_REDIRECT_URL');
$url = sprintf('https://api.weibo.com/oauth2/access_token?client_id=%s&client_secret=%s&grant_type=authorization_code&code=%s&redirect_uri=%s',$client_id,$client_secret,$code,$redirect_uri);
$client = new Client();
return $client->post($url);
}
- 获取用户信息方法
/**
* 获取用户uid
* @param $access_token
* @return mixed
*/
public function getUid($access_token)
{
$url = "https://api.weibo.com/oauth2/get_token_info?access_token=".$access_token;
$client = new Client();
$result = $client->post($url);
$result = json_decode($result->getBody()->getContents(),true);
return $result['uid'];
}
/**
* 获取用户信息
* @param $access_token
*/
public function getUserInfo($access_token)
{
$uid = $this->getUid($access_token);
$url = 'https://api.weibo.com/2/users/show.json?uid='.$uid.'&access_token='.$access_token;
$client = new Client();
return $client->get($url);
}
关键的回调页面
<div style="text-align: center;margin: 100px auto;height: 500px;width: 400px">授权登陆中...</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
window.onload = function () {
//窗口通信函数api 将token发送给前一个页面 文档说明地址 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
window.opener.postMessage("bearer {{ $token }}", "{{ $domain }}");
window.close();
}
</script>
