Laravel 開発: Laravel Socialite を使用してサードパーティのログインを迅速に統合するにはどうすればよいですか?

Laravel は、Web アプリケーションの開発に使用される人気のある PHP フレームワークです。最も一般的な機能の 1 つは、サードパーティのログインをアプリケーションに統合することです。そうすることで、ユーザー エクスペリエンスが向上し、反復的な登録プロセスが削減されます。

この記事では、Laravel Socialite ライブラリを使用してサードパーティのログインを統合する方法について説明します。

Laravel ソーシャライトとは何ですか?

Laravel Socialite は、開発者がアプリケーションにサードパーティのログインを簡単に実装できるようにする Laravel フレームワークの拡張パッケージです。 Facebook、Twitter、LinkedInなどのさまざまなソーシャルプラットフォームをサポートしています。

Socialite はどのように機能しますか?

Socialite は OAuth プロトコルに従います。 OAuth は、ユーザーが資格情報を共有せずにアカウント情報をあるサイトから別のサイトに渡すことを可能にする承認フレームワークです。 OAuth にはユーザーの承認が必要です。この場合、ユーザーはアプリケーションがソーシャル メディア アカウントにアクセスすることを承認します。

Socialite 認証は次のように機能します:

1. ユーザーが「ログイン」ボタンをクリックすると、Socialite 認証がポイントされます:

   Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');

2. Socialite はユーザーに自分のソーシャル メディア アカウントへのアクセスを承認するように要求します。Socialite はソーシャル メディア サイトにリダイレクトします。

   Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

3. ユーザーは自分のアカウントとソーシャル メディア サイトを承認します。コールバック URL にリダイレクトします;

public function redirectToProvider($provider)
{
  return Socialite::driver($provider)->redirect();
}

4. Socialite は認可コードを含むコールバック URL をアプリケーションに返し、アプリケーションは認可コードを含む OAuth アクセス トークンを要求します;

   public function handleProviderCallback($provider)
   {
   $socialUser = Socialite::driver($provider)->user();
   }

5. 認証が完了すると、Socialite はユーザーの承認されたトークンを返し、それをアプリケーションに渡します。

Laravel で Socialite を使用するにはどうすればよいですか?

Socialite がサポートするソーシャル メディア プラットフォームを使用する場合は、アプリケーションの資格情報またはキーを 2 つの場所に設定する必要があります。

    'facebook' => [
        'client_id' => env('FB_CLIENT_ID'),
        'client_secret' => env('FB_CLIENT_SECRET'),
        'redirect' => env('FB_CALLBACK_URL'),
    ]

    'twitter' => [
        'client_id' => env('TW_CLIENT_ID'),
        'client_secret' => env('TW_CLIENT_SECRET'),
        'redirect' => env('TW_CALLBACK_URL'),
    ],

    'google' => [
         'client_id' => env('GOOGLE_CLIENT_ID'),
         'client_secret' => env('GOOGLE_CLIENT_SECRET'),
         'redirect' => env('GOOGLE_CALLBACK_URL')
    ]

アプリケーションの資格情報またはキーは、アプリケーションの ID を認証することを目的としています。

これを config/services.php ファイルで設定します。

ステップ 1: 承認ルートの作成

Socialite 承認をトリガーするために使用するルートを作成します:

Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');
Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

通常、これらのルートは SocialController というコントローラーに配置されます。 Socialite の認証とコールバックを処理します。

ステップ 2: SocialController を作成する

すべてのコントローラーと同様に、適切なコーディング方法を使用して SocialController を作成する必要があります。

次のコマンドを使用してコントローラーを作成します。

php artisan make:controller AuthSocialController

これにより、最終的には、ルートへの承認とコールバックに承認プロバイダーを使用できるようになります。

SocialController では、redirectToProvider と handleProviderCallback という 2 つのメソッドを定義します。 1 つ目は、認可プロバイダーへのリダイレクトです。後続のコールバック関数は、情報を取得して認証を完了するための認証コードを含むコールバック URL をクライアントに提供します。

以下は SocialController のサンプル コードです:

namespace AppHttpControllersAuth;
use AppHttpControllersController;
use IlluminateSupportFacadesAuth;
use IlluminateHttpRequest;
use LaravelSocialiteFacadesSocialite;

class SocialController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();

        // Do something with user data, for example:
        // $user->token;
        // $user->getId();
        // $user->getEmail();
    }
}

ステップ 3: ビュー コントローラーの使用

通常、ビュー コントローラーを使用してすべてのレンダリングを管理します。ビュー。これにより、コードが読みやすく、管理しやすくなります。 Laravel のビュー コントローラーを使用して、アプリケーションの簡単なビューを作成しましょう。

次のコマンドを使用してビュー コントローラーを作成します:

php artisan make:controller SocialAuthController

以下はコントローラーで行われた変更です。

namespace AppHttpControllers;

use IlluminateHttpRequest;

class SocialAuthController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $existingUser = User::where('email', $user->getEmail())->first();
        if ($existingUser) { // If user already exists, login the user                
            auth()->login($existingUser, true);
        } else { // Register new user                    
            $newUser = new User();
            $newUser->name = $user->getName();
            $newUser->email = $user->getEmail();
            $newUser->google_id = $user->getId();
            $newUser->password = encrypt('amitthakur');
            $newUser->save();
            auth()->login($newUser, true);
        }
        return redirect()->to('/home');
    }
}

ステップ 4: ログイン ビューの作成

これで、コントローラーとルーティングの準備が整いました。次に、ログイン用のビューを作成する必要があります。

ビュー ファイルを作成し、social_login.blade.php という名前を付けます。サードパーティのログインをトリガーできるボタンを表示する必要があります。この場合、Google、Facebook、Twitter でのログインをサポートする 3 つのボタンが表示されます。

次に、ビュー ファイルのサンプル コードを示します。

@extends('layouts.app')
@section('content')
<main class="py-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Login') }}</div>
                    <div class="card-body">
                        <a href="{{ route('social.oauth', ['provider' => 'google']) }}" class="btn btn-google">Sign in with google</a>
                        <a href="{{ route('social.oauth', ['provider' => 'facebook']) }}" class="btn btn-facebook">Sign in with Facebook</a>
                        <a href="{{ route('social.oauth', ['provider' => 'twitter']) }}" class="btn btn-twitter">Sign in with twitter</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

上部のレイアウト ファイルを使用します。ユーザーがいずれかのボタンをクリックすると、認可プロバイダーにリダイレクトされます。 SocialController の応答でユーザー データを取得し、認証を完了します。

ステップ 5: 新しいルートを作成する

次に、上記のビュー ファイルを処理するための新しいルートを作成する必要があります。

web.php ファイルを次のように変更します。

Route::get('social', 'SocialAuthController@index')->name('social.login');
Route::get('social/{provider}', 'SocialAuthController@redirectToProvider')->name('social.oauth');
Route::get('social/{provider}/callback', 'SocialAuthController@handleProviderCallback');

上記のルートは、コントローラー コードで参照できるように名前で識別されることに注意してください。

ステップ 6: テスト

ソーシャル メディア ID が設定されたので、アプリケーションをテストする前に、.env ファイルを使用してアプリケーションを構成する必要があります。

.env ファイルを構成するには、次のコードを追加します。

FACEBOOK_CLIENT_ID=xxxxxxxxxxxxxxxxx
FACEBOOK_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
FACEBOOK_CALLBACK_URL=http://www.example.com/auth/facebook/callback

GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxx
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
GOOGLE_CALLBACK_URL=http://www.example.com/auth/google/callback

TWITTER_CLIENT_ID=xxxxxxxxxxxxxxxxx
TWITTER_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
TWITTER_CALLBACK_URL=http://www.example.com/auth/twitter/callback

この行の実際のアプリケーション ID を「xxxxxxxxxxxxxxxxxxxx」に置き換えます。その後、コマンド ラインからアプリケーションを起動し、上記のビュー ファイルにアクセスできます。いずれかのボタンをクリックし、OAuth 経由でアカウントを認証すると、既知のすべてのユーザーで認証されます。

結論

この記事では、Laravel Socialite ライブラリを使用してサードパーティのログインを統合する方法を学びました。 Socialite の主な目的は、ソーシャル メディアのログイン プロセスを簡素化し、ユーザー エクスペリエンスを向上させることです。 Google、Facebook、Twitter をサポートするために Socialite をセットアップする方法を学びました。また、コントローラー内の認証コードを取得し、要求されたデータを使用して OAuth 認証を完了します。このプロセスでは、実際には新しいアカウントが作成されるか、既存のアカウントが更新されます。

以上がLaravel 開発: Laravel Socialite を使用してサードパーティのログインを迅速に統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。