【網頁登入】QQ 登入、微信登入、微博登入、GitHub 登入

gyp719發表於2019-10-29
網頁Github

前言

近期開發了的網站應用第三方登入，因此編寫此文記錄開發的過程，方便以後的使用。

首先到 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;
    }
}

相關文章