今天將博客的第三方登錄寫了一下 博客是前后端分離的 前端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>
