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

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

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

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

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

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

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

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

ユーザーが「ログイン」ボタンをクリックすると、Socialite 認証がポイントされます:
```
Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');
```
ログイン後にコピー
Socialite はユーザーに自分のソーシャルメディアアカウントへのアクセスを承認するように要求します。Socialite はソーシャルメディアサイトにリダイレクトします。
```
Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');
```
ログイン後にコピー

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

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

ログイン後にコピー

Socialite は認可コードを含むコールバック URL をアプリケーションに返し、アプリケーションは認可コードを含む OAuth アクセストークンを要求します;
```
public function handleProviderCallback($provider)
{
$socialUser = Socialite::driver($provider)->user();
}
```
ログイン後にコピー
認証が完了すると、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 サイトの他の関連記事を参照してください。