前后端分离下 博客接入 gitee、github、微博 第三方登录

今天将博客的第三方登录写了一下 博客是前后端分离的 前端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>

整个流程ok！