マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

PHP WEB制作

Laravel SocialiteでGitHubを利用した認証

投稿日:

Lravel SocialiteでGitHubを利用したOAuthによる認証の手順を紹介します。

1. GithubでOAuthアプリケーションを作成

GitHubにログインし、
[Settings]→[OAuth Apps]→[Register a new application]
より作成画面に進みます。

Application name:アプリケーションの名前
Homepage URL:ホームページのURL
Authorization callback URL:GitHubで認証完了後の戻り先のURL
を指定し、Register applicationをクリックします。

アプリの作成が完了し、
「クライアントID」、「クライアントシークレット」
を情報が表示されたページに遷移いたします。

2. Laravel標準の認証をインストール

Artisanコマンドで以下を実行します。

php artisan make:auth

3. Laravel Socialiteのインストール

3.1 composerでSocialiteをインストールします。

composer require laravel/socialite

3.2 config/app.phpに、サービスプロバイダーを追加します。

'providers' => [
  ...
  Laravel\Socialite\SocialiteServiceProvider::class,
],

3.3 config/app.phpに、ファサードのエイリアスを追加します。

'aliases' => [
  ...
  'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

4. Laravelの各設定

4.1 config/service.phpに追記いたします。

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

4.2 .envに、以下を追記します。

GITHUB_CLIENT_ID=1.のクライアントID
GITHUB_CLIENT_SECRET=1.のクライアントシークレット
GITHUB_URL=1.のAuthorization callback URL

4.3 routes/web.phpに追記

GitHubの認証ページに転送するためのルート

Route::get('login/github', 'Auth\LoginController@redirectToProvider');

GitHubの認証後に戻るルート

Route::get('/login/callback/github', 'Auth\LoginController@handleProviderCallback');

5. データベースの調整

5.1 usersテーブルのパスワード列にnullを許可するために、composerでdoctrine/dbalをインストールします。

composer require doctrine/dbal

5.2 マイグレーション生成

php artisan make:migration change_users_table_for_socialite

5.3 マイグレーションファイル編集

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class ChangeUsersTableForSocialite extends Migration {
  /**
  * Run the migrations.
  *
  * @return void
  */
  public function up() {
    Schema::table('users', function (Blueprint $table) {
      $table->string('password')->nullable()->change();
    });
  }

  /**
  * Reverse the migrations.
  *
  * @return void
  */
  public function down() {
    Schema::table('users', function (Blueprint $table) {
      $table->string('password')->nullable(false)->change();
    });
  }
}

5.4 マイグレーションを実行します。

php artisan migrate

6. LoginControllerの編集

GitHubの認証ページヘユーザーを転送するためのルート:redirectToProvider
GitHubの認証後に、戻るルート:handleProviderCallback
を追記します。

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Socialite;
use Illuminate\Support\Facades\Auth;
use App\User;

class LoginController extends Controller {
  public function redirectToProvider() {
    return \Socialite::driver("github")->redirect();
  }

  public function handleProviderCallback() {
    try {
      $user = \Socialite::with("github")->user();
    } catch (\Exception $e) {
      return redirect('/welcome'); // エラーならトップへ転送
    }
    // mailアドレスおよび名前を保存
    $authUser = User::firstOrCreate(['email' => $user->getEmail(),
                                     'name' => $user->getName()]);
    auth()->login($authUser); // ログイン
    return redirect()->to('/home'); // homeへ転送
  }
}

7. ビューにGitHubでログイン用のリンク追加

resources/views/welcome.blade.phpなどの適当な場所に、GitHub認証のリンクを追加します。
<a href="<?php echo url("/login/github"); ?>" >Login Github</a>

 

以上で完了です。

-PHP, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(2)

こんにちは、デザイナーのAです! 前回、いいデザインと悪いデザインの見分け方・・・マージンの取り方についてご紹介しました。 デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(1) 今回 …

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook