今天将部落格的第三方登入寫了一下 部落格是前後端分離的 前端vue+後端laravel 我在這裡會一步步教大家如何了解 aouth 形式的授權登入
完成效果圖
項目位址 可以的話幫忙點個
star
😂
部落格前端位址
部落格後端位址
aouth登入大概的流程圖
如何申請應用如下
- github應用建立位址
- gitee應用建立位址
- 微網誌應用建立位址
在流程中因為是前後端分離
- 前端拿到key和回調位址去請求授權位址 執行第一步 去拿授權code
- 後端拿到code 去取access_token 并且拿到使用者資訊
- 判斷有無該使用者授權資訊 有則讀 無則寫 并且給使用者頒發token 并且進行回調給前端
- 前端拿到token 請求接口去取使用者資料 整個登入流程完成
<a @click="giteeLogin" v-title="`登入`"></a>
<script>
//登入方法 寫在methods裡面 如果隻是js不是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>