您现在的位置是:网站首页 > 心得笔记

laravel实现第三方登录(QQ登录)

盛悦2019-03-12650人围观
简介qq登录的应用场景:在登录慕课网时,登录表单下方有一个QQ登录,此时我点击QQ登录,会弹出QQ登录页面(url=openapi.qzone.qq.com/oauth/...),并不属于慕课网,但是我们输入QQ账号和密码后会登录慕课网,但在这个过程中,慕课网的服务器并不知道用户的QQ账号和密码。

使用QQ登录的前提条件:

//1、登录  -》右上角登录-》登录成功后点击头像-》填写信息成为开发者(具体参照QQ互联官方文档)

//2、成为开发者审核通过后创建网站应用添加回调地址

首先composer安装依赖:

composer require socialiteproviders/qq

注册服务提供者:

'providers' => [
    SocialiteProviders\Manager\ServiceProvider::class,
]

添加Socialite门面:

'aliases' => [
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

添加事件监听器(App/Providers/EventServiceProvider):

protected $listen = [
    'SocialiteProviders\Manager\SocialiteWasCalled' => [
        'SocialiteProviders\QQ\QqExtendSocialite@handle'
    ],
]

config/services.php中添加

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

.env中添加:

QQ_KEY=101560502
QQ_SECRET=0448ce2d072c89a9e400f88828693004
QQ_REDIRECT_URI=https://blog.blonglee.me/notes

QQ_KEY和QQ_SECRET需要在qq互联上申请,QQ_REDIRECT_URI需要在qq互联上设置。

这里的回调地址必须要跟qq互联管理中心(https://connect.qq.com)设置的回调地址一样。

路由:

Route::get('/qqlogin','Front\QQloginController@qqlogin');
Route::get('/notes','Front\NotesController@index');

控制器:

QQloginController.php
<?php
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class QQloginController extends Controller
{
    //QQ登录 登录成功后自动跳转到回调地址
    public function qqLogin(){
        return Socialite::with('qq')->redirect();
    }
}

访问qqlogin页面显示效果:

2(1).png


点击头像允许授权后,网页会跳转到qq互联上填写的地址上。


如:我这里回调地址填写的是:

https://blog.blonglee.me/notes

回调地址对应的控制器:

<?php
namespace App\Http\Controllers\Front;
use Laravel\Socialite\Facades\Socialite;
class NotesController extends Controller
{

    /**
     * 笔记页面展示
     * @author Sheng Yue
     * @time 2018/11/23
     */
    public function index (Note $note)
    {
        $user = Socialite::driver('qq')->user();
        dd($user);
    }


页面会获取到QQ授权后用户的昵称、头像等基本信息,此时你就可以将信息保存到数据库。

3(1).png