前后端分离下 博客接入 gitee、github、微博 第三方登录
<h4 id="今天将博客的第三方登录写了一下-博客是前后端分离的-前端vue后端laravel-我在这里会一步步教大家如何理解-aouth-形式的授权登录">今天将博客的第三方登录写了一下 博客是前后端分离的 前端vue+后端laravel 我在这里会一步步教大家如何理解 aouth 形式的授权登录</h4><h6 id="完成效果图">完成效果图</h6>
<p><img src="https://img-blog.csdnimg.cn/2020091400003518.gif#pic_center" alt="在这里插入图片描述" loading="lazy"></p>
<h6 id="项目地址-可以的话帮忙点个-star-">项目地址 可以的话帮忙点个 <code>star</code> 😂</h6>
<p>博客前端地址<br>
博客后端地址</p>
<h5 id="aouth登录大概的流程图">aouth登录大概的流程图</h5>
<p><img src="https://img-blog.csdnimg.cn/20200913231842779.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDMyMTE3,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述" loading="lazy"></p>
<blockquote>
<p>如何申请应用如下</p>
</blockquote>
<ul>
<li>github应用创建地址</li>
<li>gitee应用创建地址</li>
<li>微博应用创建地址</li>
</ul>
<h4 id="在流程中因为是前后端分离">在流程中因为是前后端分离</h4>
<ul>
<li>前端拿到key和回调地址去请求授权地址 执行第一步 去拿授权code</li>
<li>后端拿到code 去取access_token 并且拿到用户信息</li>
<li>判断有无该用户授权信息 有则读 无则写 并且给用户颁发token 并且进行回调给前端</li>
<li>前端拿到token 请求接口去取用户数据 整个登录流程完成</li>
</ul>
<pre><code class="language-java"><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>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/20200913233336916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDMyMTE3,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述" loading="lazy"></p>
<h5 id="后端接口需要做的就是其他部分了">后端接口需要做的就是其他部分了</h5>
<ul>
<li>回调接口</li>
</ul>
<pre><code class="language-php"> /**
* 微博授权登录地址
* @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/'),
]);
}
</code></pre>
<ul>
<li>获取access_token方法</li>
</ul>
<pre><code class="language-php"> /**
* @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);
}
</code></pre>
<ul>
<li>获取用户信息方法</li>
</ul>
<pre><code class="language-php">
/**
* 获取用户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);
}
</code></pre>
<h5 id="关键的回调页面">关键的回调页面</h5>
<pre><code class="language-html"><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>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2020091323431782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDMyMTE3,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述" loading="lazy"></p>
<h5 id="整个流程ok">整个流程ok！</h5><br><br>
来源：https://www.cnblogs.com/pltrue/p/13664269.html
頁:
[1]