찾다

집  >  기사  >  PHP 프레임워크  >  Laravel 개발: Laravel Socialite를 사용하여 타사 로그인을 빠르게 통합하는 방법은 무엇입니까?

Laravel 개발: Laravel Socialite를 사용하여 타사 로그인을 빠르게 통합하는 방법은 무엇입니까?

WBOY
WBOY원래의
2023-06-13 22:09:10712검색

Laravel은 웹 애플리케이션 개발에 사용되는 인기 있는 PHP 프레임워크입니다. 가장 일반적인 기능 중 하나는 타사 로그인을 애플리케이션에 통합하는 것입니다. 이렇게 하면 사용자에게 더 나은 사용자 경험을 제공하고 반복적인 등록 프로세스를 줄일 수 있습니다.

이 글에서는 Laravel Socialite 라이브러리를 사용하여 타사 로그인을 통합하는 방법에 대해 설명합니다.

라라벨 소셜라이트란 무엇인가요?

Laravel Socialite는 개발자가 애플리케이션에서 타사 로그인을 쉽게 구현할 수 있도록 하는 Laravel 프레임워크용 확장 패키지입니다. Facebook, Twitter, LinkedIn 등 다양한 소셜 플랫폼을 지원합니다.

소셜라이트는 어떻게 작동하나요?

소셜라이트는 OAuth 프로토콜을 따릅니다. OAuth는 사용자가 자격 증명을 공유하지 않고도 한 사이트에서 다른 사이트로 계정 정보를 전달할 수 있도록 하는 인증 프레임워크입니다. OAuth에는 사용자 인증이 필요하며, 이 경우 사용자는 자신의 소셜 미디어 계정에 액세스하기 위해 애플리케이션을 인증합니다.

Socialite 인증은 다음과 같이 작동합니다.

  1. 사용자가 "로그인" 버튼을 클릭하면 Socialite 인증으로 연결됩니다. 

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

  2. Socialite는 사용자에게 소셜 미디어 계정에 대한 액세스 권한을 부여하도록 요청합니다. 

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

3. 사용자가 자신의 계정을 승인하면 소셜 미디어 사이트가 콜백 URL로 리디렉션됩니다. 

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

  1. Socialite는 승인 코드와 함께 콜백 URL을 반환합니다. 인증 코드 액세스 토큰으로 OAuth를 요청하세요. 

    public function handleProviderCallback($provider)
{
$socialUser = Socialite::driver($provider)->user();
}
  2. 인증이 완료되면 Socialite는 사용자의 인증된 토큰을 반환하여 애플리케이션에 전달합니다.

Laravel에서 Socialite를 어떻게 사용하나요?

Socialite가 지원하는 소셜 미디어 플랫폼을 사용하면 다음 두 곳에서 애플리케이션 자격 증명이나 키를 설정해야 합니다. 

    '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')
    ]

애플리케이션 자격 증명이나 키는 애플리케이션의 신원을 확인하도록 설계되었습니다.

이를 config/services.php 파일에서 설정하겠습니다.

1단계: 인증 경로 생성

소셜라이트 인증을 트리거하는 경로 생성: 

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

일반적으로 이러한 경로는 Socialite 인증 및 콜백을 처리하는 SocialController라는 컨트롤러에 배치됩니다.

2단계: SocialController 만들기

모든 컨트롤러와 마찬가지로 좋은 코딩 방법을 사용하여 SocialController를 만들어야 합니다.

다음 명령을 사용하여 컨트롤러를 생성하세요: 

php artisan make:controller AuthSocialController

궁극적으로 이를 통해 인증 및 경로에 대한 콜백을 위해 인증 공급자를 사용할 수 있습니다.

SocialController에서는 RedirectToProvider와 HandleProviderCallback이라는 두 가지 메서드를 정의합니다. 첫 번째는 인증 공급자로의 리디렉션입니다. 그런 다음 후속 콜백 함수는 클라이언트에 대한 콜백 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를 "xxxxxxxxxxxxxxxxx"로 바꿉니다. 그런 다음 명령줄을 통해 애플리케이션을 시작하고 위의 보기 파일에 액세스할 수 있습니다. 버튼을 클릭하고 OAuth를 통해 계정을 승인하면 알려진 모든 사용자에 대해 인증됩니다.

결론

이 글에서는 Laravel Socialite 라이브러리를 사용하여 타사 로그인을 통합하는 방법을 배웠습니다. Socialite의 주요 목적은 소셜 미디어 로그인 프로세스를 단순화하여 사용자 경험을 향상시키는 것입니다. Google, Facebook, Twitter를 지원하도록 Socialite를 설정하는 방법을 배웠습니다. 또한 컨트롤러에서 인증 코드를 검색하고 요청된 데이터를 사용하여 OAuth 인증을 완료합니다. 이 프로세스에서는 실제로 새 계정을 생성하거나 기존 계정을 업데이트합니다.

위 내용은 Laravel 개발: Laravel Socialite를 사용하여 타사 로그인을 빠르게 통합하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Laravel 개발: Laravel 대기열을 사용하여 비동기 작업을 관리하는 방법은 무엇입니까?다음 기사：Laravel 개발: Laravel 대기열을 사용하여 비동기 작업을 관리하는 방법은 무엇입니까?

관련 기사

더보기