php 實現第三方登錄(QQ、Github、微信)

語言: CN / TW / HK

theme: juejin highlight: a11y-light


前言

很多網站登錄時,允許使用第三方網站的身份,這稱為"第三方登錄"。

image.png

Oauth2.0協議

所謂第三方登錄,實質就是 OAuth 授權。用户想要登錄 A 網站,A 網站讓用户提供第三方網站的數據,證明自己的身份。獲取第三方網站的身份數據,就需要 OAuth 授權。

舉例來説,A 網站允許 GitHub 登錄,背後就是下面的流程。

  1. A 網站讓用户跳轉到 GitHub。
  2. GitHub 要求用户登錄,然後詢問"A 網站要求獲得 xx 權限,你是否同意?"
  3. 用户同意,GitHub 就會重定向回 A 網站,同時發回一個授權碼。
  4. A 網站使用授權碼,向 GitHub 請求令牌。
  5. GitHub 返回令牌.
  6. A 網站使用令牌,向 GitHub 請求用户數據。

安裝SDK

在您的composer.json中加入配置:

PHP >= 5.5.0

{ "require": { "yurunsoft/yurun-oauth-login": "~3.0" } }

PHP < 5.5.0

{ "require": { "yurunsoft/yurun-oauth-login": "~2.0" } }

參考地址 https://github.com/Yurunsoft/YurunOAuthLogin

下面是QQ、GitHub為例的代碼授權示例

GitHub授權

1、先登錄github,然後在setting中找到Developer settings,點擊OAuth Apps

image.png

2、創建一個OAuth Apps 產生client_id和client_secret

image.png

應用的名稱隨便填,主頁 URL 填寫http://yourhost,跳轉網址填寫 http://yourhost/oauth/redirect

提交表單以後,GitHub 應該會返回客户端 ID(client ID)和客户端密鑰(client secret),這就是應用的身份識別碼。

QQ授權

文檔地址 https://wiki.connect.qq.com/%e6%88%90%e4%b8%ba%e5%bc%80%e5%8f%91%e8%80%85

登錄QQ互聯中心,申請開發者,成為開發者後申請APP得到appid、appKey、和回調地址

image.png

代碼

1、將appid、appKey、回調寫入配置文件

<?php return [ //QQ 'qq' => [ 'appid' => 'xxxxxxx', 'appkey' => 'xxxxxxx', 'callbackUrl' => 'xxxxxxx/qqcallback', ], //後續登錄... //github 'github' => [ 'appid' => 'xxxxxxx', 'appkey' => 'xxxxxxx', 'callbackUrl' => 'xxxxxxx/oauthcallback', ] ];

image.png

2、Laravel8 實現

``` <?php

namespace app\home\controller;

use app\BaseController; use app\common\model\User as UserModel; use think\App; use think\Request; use Yurun\OAuthLogin\Github\OAuth2;

class Oauth extends BaseController { /* * 第三方object * @var OAuth2|null /

public $Auth = null;

/**
 * qq標識
 */
const OPEN_TYPE_QQ = 'qq';

/**
 * github標識
 */
const OPEN_TYPE_GITHUB = 'github';

public function __construct(App $app)
{
    parent::__construct($app);

    //實例化第三方登錄
    $this->Auth = new OAuth2(config('oauth.github.appid'), config('oauth.github.appkey'), config('oauth.github.callbackUrl'));
}

//授權頁面
public function oauthLogin()
{
    $url = $this->Auth->getAuthUrl();
    header('location:' . $url);
}

//回調處理
public function oauthcallback(Request $request)
{
    // 獲取accessToken 一定要寫
    $accessToken = $this->Auth->getAccessToken($request->get('state'));
    // 用户資料
    $userInfo = $this->Auth->getUserInfo();

    dd($userInfo);
}

} ```

4、效果

github數據:

image.png

QQ數據:

image.png