Article

Laravel Socialite: 다양한 소셜 로그인 구현하기

개요

현대적인 웹 애플리케이션에서 소셜 로그인은 필수 기능입니다. Laravel에서는 Socialite를 통해 각 플랫폼의 복잡한 OAuth 처리를 간단하게 구현할 수 있습니다.

Socialite Providers란?

Socialite Providers는 Laravel Socialite를 확장하는 커뮤니티 라이브러리로, 50개 이상의 소셜 플랫폼을 지원합니다.

지원하는 주요 플랫폼

글로벌한국소개
Google-가장 널리 사용, OAuth 2.0 표준
GitHub-개발자 커뮤니티
Facebook-글로벌 소셜 네트워크
Twitter-X (구 트위터)
Apple-iOS 앱 연동
-Kakao한국 점유율 높음
-Naver한국 포털 사이트
-Line메신저 기반 로그인

그 외 Discord, Microsoft, Instagram, Slack 등 40개 이상의 플랫폼을 지원합니다.

설치 및 설정

1단계: Composer로 설치

composer require socialiteproviders/all

또는 필요한 프로바이더만 설치:

composer require socialiteproviders/google
composer require socialiteproviders/kakao

2단계: 서비스 프로바이더 등록

config/app.phpproviders 배열에 등록합니다:

'providers' => [
    // ...
    \SocialiteProviders\Manager\ServiceProvider::class,
],

3단계: 환경 변수 설정

.env 파일에 각 플랫폼의 Client ID와 Secret을 추가합니다:

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

KAKAO_CLIENT_ID=your_client_id
KAKAO_CLIENT_SECRET=your_client_secret
KAKAO_REDIRECT_URI=http://localhost:8000/auth/kakao/callback

4단계: 설정 파일 수정 (config/services.php)

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

'kakao' => [
    'client_id' => env('KAKAO_CLIENT_ID'),
    'client_secret' => env('KAKAO_CLIENT_SECRET'),
    'redirect' => env('KAKAO_REDIRECT_URI'),
],

Controller 구현

소셜 인증 컨트롤러 작성

<?php

namespace App\Http\Controllers\Auth;

use Illuminate\Routing\Controller;
use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class SocialAuthController extends Controller
{
    // 소셜 로그인 페이지로 리다이렉트
    public function redirect($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    // 소셜 플랫폼에서 콜백받기
    public function callback($provider)
    {
        try {
            $socialUser = Socialite::driver($provider)->user();
        } catch (\Exception $e) {
            return redirect('/login')->withErrors('소셜 로그인 실패');
        }

        // 기존 사용자 확인 또는 신규 생성
        $user = User::firstOrCreate(
            [
                'email' => $socialUser->getEmail(),
            ],
            [
                'name' => $socialUser->getName(),
                'provider' => $provider,
                'provider_id' => $socialUser->getId(),
                'avatar' => $socialUser->getAvatar(),
            ]
        );

        // 로그인 처리
        Auth::login($user);

        return redirect('/dashboard');
    }
}

라우트 정의

routes/web.php에 라우트를 등록합니다:

Route::get('/auth/{provider}', [SocialAuthController::class, 'redirect'])
    ->name('social.login');

Route::get('/auth/{provider}/callback', [SocialAuthController::class, 'callback'])
    ->name('social.callback');

뷰에서 로그인 링크


    Google로 로그인



    카카오로 로그인



    Naver로 로그인

플랫폼별 설정 팁

Google

  • Google Cloud Console에서 OAuth 2.0 credential 생성
  • Authorized redirect URIs에 http://localhost:8000/auth/google/callback 등록

Kakao

  • Kakao Developers에서 애플리케이션 생성
  • REST API 키와 Client Secret 획득
  • Redirect URI 정확히 등록 (trailing slash 주의)
  • Naver Developers에서 애플리케이션 등록
  • Client ID와 Client Secret 획득

보안 고려사항

1. CSRF 방지

Socialite는 자동으로 state 파라미터를 생성하여 CSRF 공격을 방지합니다.

2. HTTPS 필수

프로덕션 환경에서는 반드시 HTTPS를 사용하세요.

3. 환경 변수 관리

Client Secret은 환경 변수로만 관리하고 절대 코드에 하드코딩하지 마세요.

4. 필요한 정보만 요청

OAuth 스코프를 최소화하여 사용자 정보를 과하게 요청하지 마세요:

Socialite::driver('google')
    ->scopes(['email', 'profile'])
    ->redirect();

문제 해결

Redirect URI 불일치 에러

The redirect URI provided does not match

해결: 플랫폼 설정의 Redirect URI와 코드의 URI가 정확히 일치하는지 확인하세요.

State 파라미터 에러

State 검증 실패 시:

// config/services.php에서 stateless 설정 (권장하지 않음)
'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URI'),
    // 'stateless' => true,  // 마지막 수단으로만 사용
],

사용자 정보 누락

일부 플랫폼에서 이메일이 제공되지 않는 경우:

$email = $socialUser->getEmail() ?? $socialUser->getId() . '@' . $provider . '.local';

사용자 테이블 마이그레이션

소셜 로그인을 지원하도록 users 테이블을 수정합니다:

Schema::table('users', function (Blueprint $table) {
    $table->string('provider')->nullable();
    $table->string('provider_id')->nullable();
    $table->string('avatar')->nullable();
    $table->unique(['provider', 'provider_id']);
});

마치며

Socialite Providers를 사용하면 복잡한 OAuth 처리를 간단하게 구현할 수 있습니다. 초기 설정에 시간이 걸릴 수 있지만, 한 번 설정하면 새로운 플랫폼을 추가하기는 매우 간단합니다. 사용자 관점에서는 여러 로그인 옵션이 가입 과정을 단순화하므로 서비스 사용성을 크게 향상시킬 수 있습니다.

댓글