Laravel Socialite – Login con redes sociales: facebook, github, google y linkedin

Guía oficial de Laravel: https://laravel.com/docs/7.x/socialite

# Rutas a los servios de las redes sociales

https://developers.facebook.com/settings/developer/contact

https://github.com/settings/applications

https://www.linkedin.com/developers

https://console.developers.google.com/apis

# Instalación

composer require laravel/socialite
npm install
composer install
npm run dev

# Configuración

Edit file: config/services.php

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

    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT_URL'),
    ],

    'linkedin' => [
        'client_id' => env('LINKEDIN_CLIENT_ID'),
        'client_secret' => env('LINKEDIN_CLIENT_SECRET'),
        'redirect' => env('LINKEDIN_REDIRECT_URL'),
    ],

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

# Controlador

Edit file: controllers/auth/LoginController.php

Añadir los siguientes ‘use’ en el controlador

use Illuminate\Http\Request;
use Auth;
use Hash;
use Socialite;
use Str;
use App\User;

Añadir los siguientes métodos

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

public function handleProviderCallback($provider) {
  // Obtenemos los datos del usuario
  $social_user = Socialite::driver($provider)->stateless()->user();
  //dd($user); // Sirve para visualizar que llega el callback antes de seguir con el codigo 

  if ($user = User::where('email', $social_user->email)->first()) { 
    return $this->authAndRedirect($user); // Login y redirección
  } else {
     // add user to database
      if ($social_user->getName()==null) {
        $social_user->name = $social_user->nickname;
      } 
      $user = User::create([
        // 'token' => $user->token;
        'name' => $social_user->getName(),
        'email' => $social_user->getEmail(),
        'password' => Hash::make(Str::random(24)),
        'avatar' => $social_user->avatar,
        'provider' => $provider
      ]);
      return $this->authAndRedirect($user); // Login y redirección
  }
}

// Login y redirección
public function authAndRedirect($user) {
  Auth::login($user);
  return redirect($this->redirectTo);
}

Edit file: app/User.php. Añadir ‘avatar’ y ‘provider’

protected $fillable = [
  'name', 'email', 'password', 'avatar', 'provider',
];

Edit file: config/database/migrations/??_create_users_table.php

Añadir ‘avatar’ y ‘provider’ a la migración de la base de datos

$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->string('avatar')->default('images/users/default-woman.jpg');
$table->string('provider')->nullable();
$table->rememberToken();
$table->timestamps();

Migrar los cambios a la base de datos

php artisan migrate

# Enrutamiento

Edit file: routes/web.php

Route::get('login/{provider}', 'Auth\LoginController@redirectToProvider')->name('social.auth');
Route::get('login/{provider}/callback', 'Auth\LoginController@handleProviderCallback')->name('social.callback');

# Guardar datos de las cuentas

Edit file: .env

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URL=http://localhost:8000/login/github/callback

FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
FACEBOOK_REDIRECT_URL=http://localhost:8000/login/facebook/callback

LINKEDIN_CLIENT_ID=
LINKEDIN_CLIENT_SECRET=
LINKEDIN_REDIRECT_URL=http://localhost:8000/login/linkedin/callback

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=http://localhost:8000/login/google/callback

# Vista

Edit file: views/auth/login.blade.php

<div class="form-group row">
  <div class="col-md-6 offset-md-3">
    <a href="{{ route('social.auth', 'google') }}" class="btn btn-danger btn-block font-weight-bold">
      <img src="images/social/google.png" class="align-middle" style="height:26px;">
      &nbsp;&nbsp;Login with Google&nbsp;
    </a>
  </div>
</div>

Ejemplo de pagina de login

La función dd() nos mostrará la respuesta

Una vez se obtenga una respuesta precederemos implementar la función para que guarde los datos de respuesta que nos interesan en nuestra base de datos.