Social Login (Google & Facebook) with Laravel Socialite

  • Time to read less than 1 minute

Καλησπέρα και πάλι! Εδώ δεν χάνουμε χρόνο, οπότε περιγράφω λίγο τι θέλω να κάνω και μετά μπαίνω στο ψητό! Όπως λέει και ο τίτλος Social Login (Google & Facebook) with Laravel Socialite.

Θέλω δηλαδή να μπορώ να κάνω register και login χρησιμοποιώντας το google ή το facebook.

Ξεκινάω μια καινούργια εφαρμογή

Πρώτα πόλλα χρειάζομαι ένα φρέσκο laravel app ας το πούμε social-login.

laravel new social-login --auth

Στην συνέχεια θα χρειαστούμε μία βάση οπότε ανάλογα με τα εργαλεία που χρησιμοποιείς φτιάξε μία και ονόμασε την και αυτήν social-login

Ενημερώνεις το .env file με στοχεία της βάσης. Το δικό μου είναι κάπως έτσι

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=social-login
DB_USERNAME=root
DB_PASSWORD=root

και πάμε κατευθείαν για να κατασκευάσουμε τη βάση τρέχοντας τα migrations

php artisan migrate

Δεν χρειάζεται να πω πολλά, αλλά αν μέχρι εδώ είσαι οκ πρέπει στον browser σου πλέον να μπορείς να δεις την παρακάτω εικόνα, όπως και να μπορείς να κάνεις REGISTER έναν νέον χρήστης και loggάρεις κανονικά με αυτόν.

blog-ucanteachme-laravel-fresh-installation.jpg
blog-ucanteachme-laravel-fresh-installation

Την περίοδο που φτιάχνω αυτά τα μαθήματα για να μπορέσει να παίξει σωστά το social login θα πρέπει η εφαρμογή να σηκωθεί σε server και να μην παίζει τοπικά. Αυτό που έχω κάνει στα παρασκήνια είναι να δημιουργήσω ένα public git repository στο github το οποίο μπορείς να το βρεις εδώ. Ανέβασα την εφαρμογή σε έναν server που έχω και μπορείς πλέον να την δεις live στο social-login.ucanteachme.gr

Σεττάρω το Laravel Socialite

Πάμε παρακάτω τώρα σεττάροντας το Laravel Socialite στην εφαρμογή μας. Το πρώτο που χρειάζεται να κάνεις είναι να προσθέσεις μέσω composer το Socialite στην εφαρμογή.

composer require laravel/socialite

Το επόμενο βήμα είναι το configuration. Μέσα στο config/services.php θα πρέπει να προσθέσουμε μία νέα εγγραφή για τα settings του Google sing in.

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

και όπως καταλαβαίνεις αυτό για να παίξει θα χρειαστούν αυτά τα 3 entries να προστεθούν μέσα στο .env αρχείο σου. Μπορείς αν θέλεις να κάνεις την προετοιμασία σου και να τα προσθέσεις χωρίς value ακόμα μέχρι να τα ετοιμάσουμε. Οπότε μέσα στο .env κάτω κάτω να έχεις κάτι τέτοιο:

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT=

Εδώ αν σκεφτείς λίγο την αρχιτεκτονική έχει νόημα να φτιάξουμε ένα καινούργιο Controller ο οποίος θα ανάλάβει όλη τη δουλειά για τα social logins. Προφανώς μπορείς να τον πεις όπως θέλεις. Το όνομα που του έδωσα εγώ είναι GoogleLoginController και τον τοποθέτησα μέσα στο Auth directory παρέα με τους υπόλοιπους controllers που είναι σχετικοί με το authentication.

php artisan make:controller Auth/GoogleLoginController

Το Socialite για να κάνει την δουλειά του θα χρειαστεί τα παρακάτω 2 routes που θα χρειαστεί να μπουν μέσα στο web.php

Route::get('login/google', 'Auth\GoogleLoginController@redirect');
Route::get('login/google/callback', 'Auth\GoogleLoginController@handle');

Από τα routes αντιλαμβάνεσαι ότι χρειαζόμαστε τις μεθόδους redirect και handle μέσα στον Controller μας


namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class GoogleLoginController extends Controller
{
    /**
     * Redirect the user to the authentication page.
     *
     * @return \Illuminate\Http\Response
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Obtain the user information.
     *
     * @return \Illuminate\Http\Response
     */
    public function handle()
    {
        $user = Socialite::driver('google')->user();
    }
}

Η μέθοδος redirect() δεν θα αλλάξει καθόλου και είναι υπεύθυνση σύμφωνα με αυτά που πρόσθεσες στο config/services.php να σε κάνει redirect για login στο google. Η μέθοδος handle από την άλλη θέλει λίγο δουλίστα. Αυτή τη στιγμή το μόνο που κάνει είναι επιστρέφει τον $user που έκανε login στο google. Εμείς θα πρέπει όμως να κάνουμε τα εξής:

  • έλεγχος αν ο χρήστης υπάρχει (email)
  • αν δεν υπάρχει να τον δημιουργήσουμε
  • να loggάρουμε αυτό το χρήστη στην εφαρμογή
  • και να κάνουμε redirect σε κάποια σελίδα. Ας πούμε στην home
public function handleProviderCallback($provider) {
    $user = Socialite::driver($provider)->user();

    $user = User::firstOrCreate([
        'email' => $user->getEmail()
    ], [
        'name' => $user->getName(),
        'password' => Hash::make(Str::random()),
        'avatar' => $user->getAvatar()
    ]);

    Auth::login($user, true);

    return redirect(route('home'));
}

Φτιάχνω τα απαραίτητα κουμπιά στις υπάρχουσες σελίδες για login και register

Το functionality είναι έτοιμο. Μένει μόνο να το συνδέσουμε με κάποια κουμπιά-links στο frontend. Το μόνο που μας χρειάζεται είναι να φτιάξουμε link το οποίο μας οδηγεί στο 1ο route που φτιάξαμε login/google. Από εκεί και πέρα αναλαμβάνει το Socialite.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.