Laravel socialiteproviders/qq实现QQ第三方登录

作者: 温新

分类: 【Laravel】

阅读: 2511

时间: 2022-02-12 15:56:57

hi，我是温新，一名PHPer

2022-02-12

Laravel提供的laravel/socialite确实太方便太好用了，使用它可以很方便的实现QQ、微信、微博、apple等第三方登录。本篇文章用QQ登录进行演示。

第一步：QQ互联申请应用

1）打开QQ互联https://connect.qq.com/

2）点击应用管理，然后点击创建应用，再然后选择创建网站应用（根据自己的选择来创建，我这里是网站，因此选择创建网站应用）

3）网站地址和网站回调地址必须都是备案好的域名，需要注意，一定要为应用上传一个Logo图片，不然审核不通过。

4）审核需要7天左右（或者更短）

Laravel项目中引入扩展包并配置

1）引入QQ登录扩展包

composer require socialiteproviders/qq

2）config/services.php中添加如下配置

<?php

'qq' => [    
  // 应用的 APP ID
  'client_id' => env('QQ_CLIENT_ID'),  
  // 应用的 APP KEY
  'client_secret' => env('QQ_CLIENT_SECRET'),  
  // 应用的回调地址
  'redirect' => env('QQ_REDIRECT_URI') 
],

3）app/Providers/EventServiceProvider.php服务提供者中添加监听

<?php
    
protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        \SocialiteProviders\QQ\QqExtendSocialite::class.'@handle',
    ],
];

4）.env文件中配置相关APP_ID等信息

QQ_CLIENT_ID=10155
QQ_CLIENT_SECRET=4de0fd
QQ_REDIRECT_URI=https://www.demo.com/demo_qq_login

实现QQ第三方登录

创建路由

<?php

// routes/web.php
    
//QQ登录URL，可以想成静态页面，有个点击QQ登录的按钮
Route::get('/login/qq','Test\TestQqController@qqLogin');
//QQ回调的路径，和QQ互联平台一直
Route::get('/demo_qq_login','Test\TestQqController@qqLoginCallback');

创建控制并编写方法

创建控制

php artian make:controller Test\TestQqController

创建方法

<?php

namespace App\Http\Controllers\Test;

use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class TestQqController extends Controller
{
    /**
     * 访问该路由时
     * 重定向调出QQ登录授权页面进行授权登录
     */
    public function qqLogin()
    {
        return Socialite::driver('qq')->redirect();
    }

    /**
     * 点击 qqLogin 授权页面确认登录后
     * 会使用 回调地址 进行回调到自己的应用
     * 从而获取授权用户的信息
     */
    public function qqLoginCallback()
    {
        $user = Socialite::driver('qq')->user();
        dd($user);
    }
}

3）授权完成，获取到用户信息，后面就是入库操作了

SocialiteProviders\Manager\OAuth2\User {#1355 ▼
  +accessTokenResponseBody: array:3 [▶]
  +token: "SLDJF10212RR32R"
  +refreshToken: "988WFHWEFRHE312R12"
  +expiresIn: "7776000"
  +id: "3CE8CAB9DC3FSDF1R3RFF2RF3FR3F3F"
  +nickname: "自如初"
  +name: null
  +email: null
  +avatar: ""
  +user: array:22 [▼
    "ret" => 0
    "msg" => ""
    "is_lost" => 0
    "nickname" => ""
    "gender" => "男"
    "gender_type" => 2
    "province" => ""
    "city" => ""
    "year" => ""
    "constellation" => ""
    "figureurl" => ""
    "figureurl_1" => ""
    "figureurl_2" => ""
    "figureurl_qq_1" => ""
    "figureurl_qq_2" => ""
    "figureurl_qq" => ""
    "figureurl_type" => "1"
    "is_yellow_vip" => "0"
    "vip" => "0"
    "yellow_vip_level" => "0"
    "level" => "0"
    "is_yellow_year_vip" => "0"
  ]
}

前台页面按钮

到这里只是获取到用户了信息，但还没有结束。在实际的应用环境中，往往都有一个登录界面，登录界面中就含有第三方登录的相关按钮。前面准备工作都已经完成，那么前端页面也就容易了。

我模拟一个静态html页面，进行第三方登录，该html文件随便放在那里都行。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>QQ第三方登录</title>
</head>
<body>
    <!-- 这个URL地址是登录界面的地址，而不是回调地址 -->
	<a href="https://www.demo.com/demo_qq_login" title="QQ登录">QQ登录</a>
</body>
</html>

要有打破困难的勇气

请登录后再评论