[网页登录] 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 协议》,转载必须注明作者和本文链接
本帖由系统于 8个月前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 7
犯二青年

写的很不错,Mark一波

8个月前 评论
Epona

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

8个月前 评论
gyp719 (楼主) 8个月前

先收藏,用的时候再看。

8个月前 评论

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

8个月前 评论
gyp719 (楼主) 8个月前
vinhson

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

8个月前 评论
gyp719 (楼主) 8个月前
白俊遥 8个月前
gyp719 (楼主) 8个月前
白俊遥 8个月前
gyp719 (楼主) 8个月前
白俊遥 8个月前

请问要携带参数怎么带?比如带一个token用来标记当前操作的用户等参数?

8个月前 评论
QJAutumn (作者) 8个月前
UKNOW

为什么不用\Laravel\Socialite\

6个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!