Laravel第三方登录开发之实现QQ登录

## Laravel第三方登录开发之实现QQ登录

[TOC]

>   在我们的项目开发中，第三方登录可以很好的为用户提供便捷，比如微信、QQ、微博登录等等。
>
>   Laravel，作为一个优雅的PHP框架，已经集成了诸多第三方登录插件。
>
>   本文，将详细论述如何在Laravel框架中，实现QQ登录。

### 1. 准备工作

进行开发之前，首先需要在`QQ互联平台创建应用`。

1、前往`QQ互联中心`（网址：[https://connect.qq.com/manage.html#/](https://connect.qq.com/manage.html#/)）登录注册，并完成`开发者实名认证`。

![开发者认证](https://img.zxdmy.com/md/20210318170304.png)

2、点击下方的`创建应用`按钮，弹出框选择`创建网站应用`

![创建应用](https://img.zxdmy.com/md/20210318170312.png)

3、填写应用的`基本资料`

![image-20210318150959178](https://img.zxdmy.com/md/20210318170315.png)

>   这里注意，`网站名称`需要是`网站ICP备案`号的名称，否则审核不通过。

4、`完善资料`，然后点击`创建应用`即可。

![image-20210318151037087](https://img.zxdmy.com/md/20210318170318.png)

>   这里注意：
>
>   +   `网站回调地址`，可以填写多个，这个要记住，开发过程要用这个地址。比如：http://www.domain.com/oauth/qq
>
>   +   `提供方`，即域名`备案的主体`，个人即为姓名。

5、等待审核通过。

![image-20210318151421998](https://img.zxdmy.com/md/20210318170322.png)

5、应用审核通过后，点击应用的`查看`按钮，即可看到应用的`APP ID`和`APP Key`。

![image-20210318151540249](https://img.zxdmy.com/md/20210318170325.png)

6、`应用接口`处，`unionid接口`，选择`接入`。

>   至此，前期准备工作完成，开发过程中，至需要三个参数：
>
>   +   APP ID
>   +   APP Key
>   +   网站回调地址

### 2. 实现QQ登录，并获取用户基本信息

1、`创建一个Laravel项目`。

>   如何创建？[点击此处查看](https://blog.csdn.net/cxh_1231/category_10786101.html)

2、`添加依赖插件/服务`：

打开`Terminal`，使用如下 `composer` 命令即可添加

```php
composer require socialiteproviders/qq
```

如图：

![image-20210318152140043](https://img.zxdmy.com/md/20210318170342.png)

3、添加`服务提供器`Service Provider

打开文件 `config/app.php` ，找到 `provider` 字典，添加的内容如下：

```php
'providers' => [
    //Laravel\Socialite\SocialiteServiceProvider::classo //有博文说，如果有这行，请注释掉
    SocialiteProviders\Manager\ServiceProvider::class,//添加这样
],
```

4、添加`门面`Facades Aliase

同样在 `config/app.php` 中，往下翻，即可看到 `aliases` 字典，添加的内容如下：

```php
'aliases' => [
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,//追加这行
],
```

5、添加`事件处理器 ` EventServiceProvider

在文件 `app/Providers/EventServiceProvider.php` 中，找到 `$listen` 数组，添加内容如下：

```php
protected $listen = [
    //添加下面这个处理器
    'SocialiteProviders\Manager\SocialiteWasCalled' => [
        'SocialiteProviders\QQ\QqExtendSocialite@handle',
    ],
];
```

6、配置参数

在上一节的末尾，说明了需要的参数。

在配置文件 `config/services.php` 中，添加如下内容：

```php
'qq' => [
    'client_id' => env('QQ_KEY'),
    'client_secret' => env('QQ_SECRET'),
    'redirect' => env('QQ_REDIRECT_URI'),  
], 
```

然后在 `.env` 文件中，设置参数

```php
QQ_KEY=APP ID
QQ_SECRET=APP Key
QQ_REDIRECT_URI="网站回调地址"
```

7、添加`路由`

在 `web.php` 路由文件中，添加如下路由，其中各个路由的说明见注释。

```php
//qq回调的路径，和QQ互联平台一直
Route::get('/plugin/qqlogin/callback.php','AuthController@callback');
//qq登录的路径，可以自定义
Route::get('/login/qq','AuthController@qqLogin');
```

8、创建控制类

```php
php artisan make:controller AuthController
```

9、编写控制类内容，并测试：

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;

class AuthController extends Controller
{
    //
    //跳转QQ登录按钮
    public function qqLogin()
    {
        return Socialite::driver('qq')->redirect();
    }

//登录的回调
 public function callback()
 {
 //获取回调信息
 $userInfo = Socialite::driver('qq')->user();
 //打印返回的信息，有基本信息字段和详细信息数组
 //dd($userInfo);
 // 获取基本信息
 echo '用户ID：' . $userInfo->getId() . ' ';
 echo '用户头像URL：' . $userInfo->getAvatar() . ' ';
 echo '用户昵称：' . $userInfo->getNickname() . ' ';

//获取更加详细的西乡
 $user = $userInfo->user;
 echo '性别：' . $user['gender'] . ' ';
 echo '性别：' . $user['gender_type'] . ' ';
 echo '省份：' . $user['province'] . ' ';
 echo '城市：' . $user['city'] . ' ';
 echo '年：' . $user['year'] . ' ';

}
}
```

### 3. 效果测试

1、访问登录页面，路由中已设置网址为：http://yourdomain.com/login/qq

2、自动跳转至登录QQ官方的授权登录页面

![image-20210318162116461](https://img.zxdmy.com/md/20210318170348.png)

3、扫码或者快捷登录后，即可跳转至回调页面：http://yourdomain.com/plugin/qqlogin/callback.php

>   如果跳转后，出现 CURL出现code ERROR 60错误，请看最后一节。
>
>   ![image-20210318204911005](https://img.zxdmy.com/md/20210327193040.png)

4、如上源码，将回调信息，使用`dd`函数，打印出来，是这样的：

![image-20210318162335899](https://img.zxdmy.com/md/20210318170351.png)

5、可以对一些关键信息打印，如上源码注释，打印信息如下：

![image-20210318162428626](https://img.zxdmy.com/md/20210318170354.png)

### 4. 获取unionid

>   执行HTTP请求：
>
>   `composer require fishtail/http`

在上面的结果图片中，通过dd函数，打印的返回结果，最后的 unionid 值为空。

所以，需要单独获取该用户的 unionid，只需要一个get请求即可搞定。

官网获取unionid的介绍：https://wiki.connect.qq.com/unionid%E4%BB%8B%E7%BB%8D

首先，修改回调控制类的方法，修改如下：

```php
    //登录的回调
    public function callback()
    {
        //获取基本信息
        $userInfo = Socialite::driver('qq')->user();

//打印返回的信息，有基本信息字段和详细信息数组
        //dd($userInfo);
        //通过dd打印，可以看出，基本信息中的 unionid 为空，可以发送get请求获取

//发送get请求，获取 unionid
        $userInfo2 = Http::get('https://graph.qq.com/oauth2.0/me?access_token=' . $userInfo->accessTokenResponseBody['access_token'] . '&unionid=1&fmt=json');
        $userInfo2 = json_decode($userInfo2, true);
        //dd($userInfo2);
        $unionid = $userInfo2['unionid'];

// 获取基本信息
 echo '用户ID：' . $userInfo->getId() . ' ';
 echo '用户unionid：' . $unionid . ' ';
 echo '用户头像URL：' . $userInfo->getAvatar() . ' ';
 echo '用户昵称：' . $userInfo->getNickname() . ' ';

//获取更加详细的信息
 $user = $userInfo->user;
 echo '性别：' . $user['gender'] . ' ';
 echo '性别：' . $user['gender_type'] . ' ';
 echo '省份：' . $user['province'] . ' ';
 echo '城市：' . $user['city'] . ' ';
 echo '年：' . $user['year'] . ' ';
 
 }
```

其实只添加了三行代码。

然后，第19行，即打印获取的 unionid，截图如下：

![image-20210318165323085](https://img.zxdmy.com/md/20210318170400.png)

>   这里注意，代码第12行处的get 请求，参考自：https://learnku.com/articles/47768
>
>   ![image-20210318165227728](https://img.zxdmy.com/md/20210318170403.png)

### 5、测试阶段的一个问题

![image-20210318204904408](https://img.zxdmy.com/md/20210327193050.png)

>   参考自：https://my.oschina.net/u/4346195/blog/3499485

1、访问[https://curl.haxx.se/ca/cacert.pem](https://curl.haxx.se/ca/cacert.pem) 下载名为 `cacert.pem` 的文件

2、将文件放在某个文件夹下（比如桌面），然后复制其路径，如：C:\Users\zhangsan\Desktop\cacert.pem

3、然后打开 `php.ini` 文件，找到最后面的 `curl.cainfo = ` ，将其取消注释，并修改为 `curl.cainfo = cacert.pem文件路径` ，保存即可。如：

```php
[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
curl.cainfo = "C:\Users\zhangsan\Desktop\cacert.pem"
```

重启phpstudy。

>   参考资料：
>
>   1.  https://learnku.com/articles/24984
>   2.  https://my.oschina.net/u/4346195/blog/3499485
>   3.  https://learnku.com/articles/47768
>   4.  https://wiki.connect.qq.com/unionid%E4%BB%8B%E7%BB%8D