[网页登录] QQ 登录、微信登录、微博登录、GitHub 登录

前言

近期开发了的网站应用第三方登录,因此编写此文记录开发的过程,方便以后的使用。

说明:laravel5.8

QQ登录 举例说明

首先到 qq互联 申请加入开发者: 
右上角登录,登录后点击右上角头像,选第一个授权管理
然后首页 - 网站应用接入 - 开始创建
如果只是个人练手第三方登陆,可以不进行审核等操作,你会得到一个 App Key 和一个 App Secret。

微信开放平台

github 申请入口

【网页登录】QQ登录、微信登录、微博登录、github登录

 composer require socialiteproviders/qq

添加事件处理器 文件 app/Providers/EventServiceProvider.php

\SocialiteProviders\Manager\SocialiteWasCalled::class => [
    'SocialiteProviders\QQ\QqExtendSocialite@handle', // QQ 登录
],

添加路由 创建控制器

Route::get('qq', 'AuthorizationsController@qq');
Route::get('qq_callback', 'AuthorizationsController@qq_callback');

配置 文件 config/services.php

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

.env配置密钥

QQ_KEY=1014xxx
QQ_SECRET=e0a9ee7axxxxxx
QQ_REDIRECT_URI=http://homestead.test/qq_callback

控制器代码

public function qq()
{
  return \Socialite::with('qq')->redirect();
}

public function qq_callback()
{
  $oauthUser = \Socialite::with('qq')->user();

  $data = [
    'nickname' => $oauthUser->getNickname(),
    'avatar'   => $oauthUser->getAvatar(),
    'open_id'  => $oauthUser->getId(),
 ];
 return $data;
}
获取授权信息
var_dump($oauthUser->getId()); 
var_dump($oauthUser->getNickname());  
var_dump($oauthUser->getName());  
var_dump($oauthUser->getEmail());  
var_dump($oauthUser->getAvatar());

此时 $data 就可以获取用户的信息,剩下的就是逻辑操作

完整代码

1). 直接运行以下命令安装扩展包

composer require socialiteproviders/qq
composer require socialiteproviders/weixin
composer require socialiteproviders/weibo

2). 在你的 app/Providers/EventServiceProvider.php 文件中添加以下事件处理器

\SocialiteProviders\Manager\SocialiteWasCalled::class => [
    'SocialiteProviders\QQ\QqExtendSocialite@handle', // QQ 登录
    'SocialiteProviders\Weixin\WeixinExtendSocialite@handle', // 微信登录
    'SocialiteProviders\Weibo\WeiboExtendSocialite@handle', // 微博登录
],

3). 在你的 config/services.php 文件中添加以下配置

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

'weixin' => [
  'client_id' => env('WEIXIN_KEY'),
  'client_secret' => env('WEIXIN_SECRET'),
  'redirect' => env('WEIXIN_REDIRECT_URI'),
],

'weibo' => [
  'client_id' => env('WEIBO_KEY'),
  'client_secret' => env('WEIBO_SECRET'),
  'redirect' => env('WEIBO_REDIRECT_URI'),
],

'github' => [
  'client_id' => env('GITHUB_CLIENT_ID'),
  'client_secret' => env('GITHUB_CLIENT_SECRET'),
  'redirect' => env('GITHUB_REDIRECT_URI'),
],

4)在你的 .env 文件中添加以下配置

# QQ登录
QQ_KEY=10143xxxx
QQ_SECRET=e0a9ee7a933f8exxxx
QQ_REDIRECT_URI=http://homestead.test/qq_callback

# 微信登录
WEIXIN_KEY=wxe1d5fe78e1xxxx
WEIXIN_SECRET=d0c12f1e00492f8xxxx
WEIXIN_REDIRECT_URI=http://homestead.test/weixin_callback

# 微博登录
WEIBO_KEY=316078xxxx
WEIBO_SECRET=bd2781b3f12a98xxxx
WEIBO_REDIRECT_URI=http://homestead.test/weibo_callback

# github 登录
GITHUB_CLIENT_ID=2256544xxxx
GITHUB_CLIENT_SECRET=9faae51cde7edcd0989cxxxx
GITHUB_REDIRECT_URI=http://homestead.test/github_callback

5).web.php配置

// QQ登录
Route::get('qq', 'AuthorizationsController@qq');
// QQ回调
Route::get('qq_callback', 'AuthorizationsController@qq_callback');

// 微信登录
Route::get('weixin', 'AuthorizationsController@weixin');
// 微信回调
Route::get('weixin_callback', 'AuthorizationsController@weixin_callback');

// 微博登录
Route::get('weibo', 'AuthorizationsController@weibo');
// 微博回调
Route::get('weibo_callback', 'AuthorizationsController@weibo_callback');

// github登录
Route::get('github', 'AuthorizationsController@github');
Route::get('github_callback', 'AuthorizationsController@github_callback');

6).控制器代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AuthorizationsController extends Controller
{
    public function qq()
    {
        return \Socialite::with('qq')->redirect();
    }

    public function qq_callback()
    {
        $oauthUser = \Socialite::with('qq')->user();

        $data = [
            'nickname' => $oauthUser->getNickname(),
            'avatar'   => $oauthUser->getAvatar(),
            'open_id'  => $oauthUser->getId(),
        ];
        return $data;
    }

    public function weixin()
    {
        return \Socialite::with('weixin')->redirect();
    }

    public function weixin_callback()
    {
        $oauthUser = \Socialite::with('weixin')->user();

        $data = [
            'nickname' => $oauthUser->getNickname(),
            'avatar'   => $oauthUser->getAvatar(),
            'open_id'  => $oauthUser->getId(),
            'sex'      => $oauthUser['sex'] == 1 ? '男' : '女',
        ];
        return $data;
    }

    public function weibo()
    {
        return \Socialite::with('weibo')->redirect();
    }

    public function weibo_callback()
    {
        $oauthUser = \Socialite::with('weibo')->user();

        $data = [
            'nickname' => $oauthUser->getNickname(),
            'avatar'   => $oauthUser->getAvatar(),
            'open_id'  => $oauthUser->getId(),
        ];
        return $data;
    }

    public function github()
    {
        return \Socialite::with('github')->redirect();
    }

    public function github_callback()
    {
        $oauthUser = \Socialite::with('github')->user();

        $data = [
            'nickname' => $oauthUser->getNickname(),
            'avatar'   => $oauthUser->getAvatar(),
            'open_id'  => $oauthUser->getId(),
        ];
        return $data;
    }
}
本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 4年前 自动加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 27

写的很不错,Mark一波

4年前 评论
Epona

控制器里的方法可以重写一下,很多代码都是差不多的:smile_cat:

4年前 评论
gyp719 (楼主) 3年前
gyp719 (楼主) 4年前
fmujie 3年前
fmujie 3年前

先收藏,用的时候再看。

4年前 评论

👍
另外指一点:类里的方法名,是不是最好 驼峰 qqCallback命名,而不是蛇形 qq_callback? :smile:

4年前 评论
gyp719 (楼主) 4年前

https://james.dmzfa.com 让你感受一下流程

4年前 评论
gyp719 (楼主) 4年前
白俊遥 4年前
gyp719 (楼主) 4年前
白俊遥 4年前
gyp719 (楼主) 4年前
白俊遥 4年前
UKNOW

为什么不用\Laravel\Socialite\

4年前 评论

报这个错:param client_id is wrong or lost (100001)

3年前 评论

@fmujie 什么登录报这个错, 其次你这个报错 是你的密钥错误或者密钥不存在

3年前 评论
fmujie 3年前

实现了一个gitee第三方登录的例子 在线Demo(https://element.wmhello.cn)

8个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!