Laravel 專案如何實現 GitHub 登入

sevdot發表於2018-10-15
LaravelGithub

為了讓使用者更好的使用網站，簡化使用者註冊流程，很多網站都支援第三方登入，包括微信、QQ、微博、Github等，我的個人網站--SevDot，也需要支援 Github 登入，本文以我的個人網站為例，介紹如何在 laravel 專案中實現 github 登入。

安裝 laravel 擴充套件包

Laravel 已提供 laravel/socialite 解決社會化登入問題，使用起來也非常簡單，但是僅支援一些國外的應用，比 Facebook、 Twitter、 LinkedIn、 Google、GitHub 和 Bitbucke等，對微信、QQ、微博等國內的一些應用並不支援，但幸運的是安正超大神已開源了支援國內應用的 Laravel 擴充套件包 overtrue/laravel-socialite。我們就使用 overtrue/laravel-socialite 來實現 Github 登入。

安裝

通過 Composer 將 overtrue/laravel-socialite 包新增到你的專案依賴裡面：

composer require "overtrue/laravel-socialite:~2.0"

配置

安裝 overtrue/laravel-socialite 完以後，在你的 config/app.php 檔案中註冊 Laravel\Socialite\SocialiteServiceProvider 。

'providers' => [
    // Other service providers...
    Overtrue\LaravelSocialite\ServiceProvider::class,
],

同時，在你的 app 配置檔案中，把 Socialite facade 加入到 aliases 陣列中。

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

使用 laravel-socialite 前，需要先新增上應用程式所使用的 OAuth 服務的憑證。這些憑據應該放在你的 config/services.php 檔案中，並且使用 facebook ， twitter ， linkedin ， google ， github 或 bitbucket 作為鍵名，具體取決於在你的應用中由哪個程式來提供驗證服務，比如：

'github' => [
    'client_id' => 'your-github-app-id',
    'client_secret' => 'your-github-app-secret',
    'redirect' => 'http://your-callback-url',
],

Github 申請應用

要實現 Github 登入，我需要到 Github 上為網站申請應用，點選連結到申請頁面：

image.png | left | 565x560

以我的個人網站為例做選項說明：

  1. 應用名稱（Application name）：SevDot
  2. 應用主頁地址（Homepage URL）：http://localhost:8000
  3. 應用描述（Application decription）：SevDot 是全棧開發工程師和終身學習者的個人網站。
  4. 授權回撥地址（Authorization callback URL）：http://localhost:8000/oauth/github/callback

點選 Register application 按鈕後會看到如下頁面：

image.png | left | 564x881

注意！我是在本地開發，使用的是 php artisan serve 命令等到的本地訪問地址：http://localhost:8000，線上服務或者已經配置好虛擬域名的請替換。

實現 Github 登入

我們為使用者表新增一個 github_name 欄位來儲存使用者的 Github 賬號，使用者表遷移檔案 [timestamp]_create_users_table.php 的程式碼如下：

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('sex')->nullable();
            $table->string('phone')->unique()->nullable();
            $table->string('password')->nullable();
            $table->string('avatar')->nullable();
            $table->string('real_name')->comment('真實姓名')->nullable();
            $table->string('city')->comment('城市')->nullable();
            $table->string('company')->comment('公司')->nullable();
            $table->string('github_name')->comment('github')->nullable();
            $table->string('weibo_name')->comment('微博使用者名稱')->nullable();
            $table->string('weibo_link')->comment('微博主頁')->nullable();
            $table->string('twitter_account')->comment('Twitter 帳號')->nullable();
            $table->string('linkedin')->comment('LinkedIn')->nullable();
            $table->string('personal_website')->comment('個人網站')->nullable();
            $table->string('wechat_qrcode')->comment('微信賬號二維碼')->nullable();
            $table->string('wechat_payment_qrcode')->comment('微信支付二維碼')->nullable();
            $table->string('introduction')->comment('個人簡介')->nullable();
            $table->text('signature')->comment('署名')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

我們需要兩個路由：一個重定向使用者到 Github 授權，另一個在 Github 驗證之後接收回撥，路由如下：

// 第三方登入
Route::get('/oauth/github', 'Auth\LoginController@redirectToProvider');
Route::get('/oauth/github/callback', 'Auth\LoginController@handleProviderCallback');

接下來給 LoginController 控制新增兩個方法，redirectToProvider 方法重定向到 Github 授權頁面，handleProviderCallback 方法在 Github 驗證之後接收回撥，程式碼如下：

 public function redirectToProvider()
    {
        return Socialite::driver('github')->redirect();
    }

    public function handleProviderCallback()
    {
        $github_user = Socialite::driver('github')->user();

        $user=User::where('github_name',$github_user->name)->first();
        if(empty($user)){
            $user=User::create([
                'name'=>$github_user->name,
                'email'=>$github_user->email,
                'github_name'=>$github_user->name,
                'avatar'=>$github_user->avatar,
                'verified'=>1,
            ]);
        }
        Auth::login($user);
        return Redirect()->guest('/');
    }

FAQ

cURL error 60: SSL certificate problem: unable to get local issuer certificate (see http: curl.haxx.se libcurl c libcurl errors.html)
在本地開發的時候會遇到這個問題，意思是無法獲得本地頒發者證照，解決方案就是給本地新增一個 SSL 證照。步驟如下：

  1. 點選連結下載最新的 curl 認可證照。
  2. 將 cacert.pem 檔案儲存到任意一個資料夾下，建議儲存到 PHP 資料夾下，比如我的儲存在 php7.1 資料夾下。
  3. 然後，在 php.ini 檔案中，向下滾動到找到 [curl] 的位置。，然後修改 php.ini 檔案，找到 curl.cainfo，你應該看到 curl.cainfo 項已被註釋，取消註釋並指向 cacert.pem 檔案，最後應該是這樣的一行： 
    curl.cainfo ="d:\webserver\php\php7.1\cacert.pem"

注意！ d:\webserver\php\php7.1 修改為你的地址。

相關文章