Jak dodać logowanie przez Google na swojej stronie?

logowanie przez google

Jak dodać logowanie przez Google na swojej stronie?

Logowanie przez Google to jedna z najwygodniejszych metod logowania na stronie internetowej. Użytkownik nie musi zakładać kolejnego konta, zapamiętywać hasła ani przechodzić długiej rejestracji. Wystarczy kliknięcie przycisku „Zaloguj przez Google”.

W tym poradniku pokażę krok po kroku, jak dodać logowanie Google na własnej stronie internetowej. Przykład będzie praktyczny i oparty o prostą stronę HTML oraz backend w PHP.

Do czego przydaje się logowanie przez Google?

Logowanie przez Google warto dodać między innymi do:

  • panelu klienta,
  • portalu ogłoszeniowego,
  • sklepu internetowego,
  • systemu rezerwacji,
  • platformy kursowej,
  • aplikacji webowej,
  • strony z kontami użytkowników.

Dla użytkownika jest to wygodne, a dla właściciela strony może oznaczać więcej rejestracji i mniej porzuconych formularzy.

Jak działa logowanie przez Google?

W dużym uproszczeniu proces wygląda tak:

  1. Użytkownik klika przycisk „Zaloguj przez Google”.
  2. Google pyta użytkownika, czy chce udostępnić podstawowe dane, np. adres e-mail, imię i zdjęcie profilowe.
  3. Google zwraca do strony specjalny token logowania.
  4. Strona wysyła ten token na serwer.
  5. Serwer sprawdza, czy token jest prawdziwy.
  6. Jeśli wszystko się zgadza, użytkownik zostaje zalogowany.

Bardzo ważne: nie wystarczy tylko odebrać danych w JavaScript. Token od Google trzeba sprawdzić po stronie serwera. Dopiero wtedy można bezpiecznie utworzyć sesję użytkownika.

Krok 1. Utwórz projekt w Google Cloud Console

Najpierw trzeba utworzyć dane dostępowe do logowania Google.

  1. Wejdź do Google Cloud Console.
  2. Utwórz nowy projekt lub wybierz istniejący.
  3. Przejdź do sekcji związanej z API i danymi logowania.
  4. Skonfiguruj ekran zgody OAuth.
  5. Utwórz nowe dane logowania typu OAuth Client ID.
  6. Jako typ aplikacji wybierz „Web application”.

W formularzu konfiguracji trzeba podać adres strony, na której będzie działało logowanie.

Przykład dla strony produkcyjnej:

https://twojadomena.pl

Przykład dla testów lokalnych:

http://localhost
http://localhost:3000

Po zapisaniu konfiguracji Google wygeneruje identyfikator klienta, czyli Client ID. Będzie wyglądał mniej więcej tak:

1234567890-abcxyz.apps.googleusercontent.com

Ten identyfikator będzie potrzebny w kodzie strony.

Krok 2. Dodaj przycisk „Zaloguj przez Google” na stronie

Teraz trzeba dodać kod HTML i JavaScript, który wyświetli przycisk logowania.

Przykładowy plik login.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Logowanie przez Google</title>
</head>
<body>

  <h1>Zaloguj się</h1>

  <script src="https://accounts.google.com/gsi/client" async defer></script>

  <div id="g_id_onload"
       data-client_id="TWOJ_GOOGLE_CLIENT_ID"
       data-callback="handleCredentialResponse"
       data-auto_prompt="false">
  </div>

  <div class="g_id_signin"
       data-type="standard"
       data-size="large"
       data-theme="outline"
       data-text="sign_in_with"
       data-shape="rectangular"
       data-logo_alignment="left">
  </div>

  <script>
    function handleCredentialResponse(response) {
      fetch('/google-login.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          credential: response.credential
        })
      })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          window.location.href = '/panel.php';
        } else {
          alert('Nie udało się zalogować.');
        }
      })
      .catch(error => {
        console.error('Błąd logowania:', error);
        alert('Wystąpił błąd logowania.');
      });
    }
  </script>

</body>
</html>

W tym miejscu trzeba podmienić:

TWOJ_GOOGLE_CLIENT_ID

na prawdziwy Client ID wygenerowany w Google Cloud Console.

Krok 3. Zainstaluj bibliotekę Google na serwerze

W przykładzie użyjemy PHP. Do weryfikacji tokenu najlepiej użyć oficjalnej biblioteki Google.

Jeśli masz dostęp do terminala na serwerze, uruchom:

composer require google/apiclient

Composer utworzy folder vendor, z którego będzie korzystał plik logowania.

Krok 4. Przygotuj plik google-login.php

Ten plik odbiera token z przeglądarki, sprawdza go po stronie serwera i loguje użytkownika.

<?php

require_once __DIR__ . '/vendor/autoload.php';

session_start();

header('Content-Type: application/json');

$clientId = 'TWOJ_GOOGLE_CLIENT_ID';

$input = json_decode(file_get_contents('php://input'), true);

if (!isset($input['credential'])) {
    echo json_encode([
        'success' => false,
        'message' => 'Brak tokenu logowania.'
    ]);
    exit;
}

$credential = $input['credential'];

$client = new Google_Client([
    'client_id' => $clientId
]);

$payload = $client->verifyIdToken($credential);

if (!$payload) {
    echo json_encode([
        'success' => false,
        'message' => 'Nieprawidłowy token Google.'
    ]);
    exit;
}

$googleId = $payload['sub'];
$email = $payload['email'] ?? '';
$name = $payload['name'] ?? '';
$picture = $payload['picture'] ?? '';

/*
Tutaj normalnie sprawdzasz użytkownika w bazie danych.
Jeśli użytkownik istnieje - logujesz go.
Jeśli nie istnieje - tworzysz nowe konto.
*/

$_SESSION['user'] = [
    'google_id' => $googleId,
    'email' => $email,
    'name' => $name,
    'picture' => $picture
];

echo json_encode([
    'success' => true
]);

Również tutaj trzeba podmienić:

TWOJ_GOOGLE_CLIENT_ID

na prawdziwy Client ID z Google Cloud Console.

Krok 5. Utwórz tabelę użytkowników w bazie danych

Jeśli chcesz zapisywać użytkowników w bazie danych, możesz utworzyć prostą tabelę MySQL:

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  google_id VARCHAR(255) NOT NULL UNIQUE,
  email VARCHAR(255) NOT NULL,
  name VARCHAR(255),
  picture TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Najważniejsze pole to google_id. To unikalny identyfikator użytkownika w Google. Lepiej opierać konto użytkownika właśnie o ten identyfikator, a nie tylko o adres e-mail.

Krok 6. Zapisz albo znajdź użytkownika w bazie

W prawdziwej aplikacji po weryfikacji tokenu trzeba sprawdzić, czy użytkownik już istnieje w bazie.

Przykładowa logika:

  1. Sprawdź, czy istnieje użytkownik z takim google_id.
  2. Jeśli istnieje, pobierz jego dane.
  3. Jeśli nie istnieje, dodaj go do bazy.
  4. Zapisz ID użytkownika w sesji.
  5. Przekieruj użytkownika do panelu.

Przykład fragmentu z PDO:

$pdo = new PDO(
    'mysql:host=localhost;dbname=nazwa_bazy;charset=utf8mb4',
    'uzytkownik_bazy',
    'haslo_bazy'
);

$stmt = $pdo->prepare('SELECT * FROM users WHERE google_id = ?');
$stmt->execute([$googleId]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$user) {
    $stmt = $pdo->prepare(
        'INSERT INTO users (google_id, email, name, picture) VALUES (?, ?, ?, ?)'
    );

    $stmt->execute([
        $googleId,
        $email,
        $name,
        $picture
    ]);

    $userId = $pdo->lastInsertId();
} else {
    $userId = $user['id'];
}

$_SESSION['user_id'] = $userId;

To już daje podstawę do działania systemu logowania.

Krok 7. Przygotuj panel użytkownika

Po poprawnym zalogowaniu użytkownik może zostać przekierowany do panelu.

Przykładowy plik panel.php:

<?php

session_start();

if (!isset($_SESSION['user'])) {
    header('Location: /login.html');
    exit;
}

$user = $_SESSION['user'];

?>

<h1>Witaj, <?php echo htmlspecialchars($user['name']); ?></h1>

<p>Twój adres e-mail: <?php echo htmlspecialchars($user['email']); ?></p>

<?php if (!empty($user['picture'])): ?>
  <img src="<?php echo htmlspecialchars($user['picture']); ?>" alt="Zdjęcie profilowe" width="80">
<?php endif; ?>

<p><a href="/logout.php">Wyloguj</a></p>

Krok 8. Dodaj wylogowanie

Do wylogowania wystarczy usunąć sesję użytkownika.

Przykładowy plik logout.php:

<?php

session_start();
session_destroy();

header('Location: /login.html');
exit;

Najczęstsze problemy przy logowaniu przez Google

1. Błąd: invalid_client

Najczęściej oznacza to źle wpisany Client ID albo użycie Client ID z innego projektu.

2. Błąd po wdrożeniu na domenie

Sprawdź, czy domena została dodana w Google Cloud Console jako dozwolone źródło JavaScript. Adres musi się zgadzać, na przykład:

https://twojadomena.pl

Jeżeli strona działa z www, dodaj również:

https://www.twojadomena.pl

3. Logowanie działa lokalnie, ale nie działa na stronie

Sprawdź, czy strona działa po HTTPS. W praktyce na produkcyjnej stronie powinien być aktywny certyfikat SSL.

4. Token jest odbierany w JavaScript, ale użytkownik nie jest logowany

Najprawdopodobniej brakuje obsługi po stronie serwera. JavaScript powinien wysłać token do backendu, a backend powinien go zweryfikować.

5. Użytkownik nie zapisuje się w bazie

Sprawdź połączenie z bazą danych, strukturę tabeli oraz to, czy pole google_id nie powoduje konfliktu.

Czy logowanie przez Google jest bezpieczne?

Tak, ale tylko wtedy, gdy jest poprawnie wdrożone. Najważniejsze zasady to:

  • nie ufaj danym odebranym wyłącznie w JavaScript,
  • zawsze weryfikuj token po stronie serwera,
  • używaj HTTPS,
  • nie zapisuj niepotrzebnych danych użytkownika,
  • nie przechowuj tokenów w miejscach dostępnych publicznie,
  • opieraj konto użytkownika o unikalne ID Google, czyli pole sub.

Czy da się dodać logowanie Google do WordPressa?

Tak. W WordPressie najczęściej robi się to przez gotową wtyczkę, na przykład do logowania społecznościowego. To dobre rozwiązanie, jeśli strona jest prosta i nie wymaga niestandardowego panelu użytkownika.

Jeżeli jednak tworzysz własny portal, aplikację, katalog firm, system ogłoszeń albo panel klienta, często lepsze jest wdrożenie logowania bezpośrednio w kodzie. Wtedy masz pełną kontrolę nad tym, jak użytkownik jest zapisywany w bazie i co widzi po zalogowaniu.

Podsumowanie

Dodanie logowania przez Google składa się z kilku etapów:

  1. utworzenia projektu w Google Cloud Console,
  2. wygenerowania Client ID,
  3. dodania przycisku logowania na stronie,
  4. odebrania tokenu od Google,
  5. zweryfikowania tokenu po stronie serwera,
  6. utworzenia albo znalezienia użytkownika w bazie,
  7. zalogowania użytkownika przez sesję.

Największy błąd to traktowanie samego JavaScriptu jako pełnego logowania. Przycisk Google na stronie to dopiero początek. Prawdziwe bezpieczeństwo zaczyna się po stronie serwera.

Jeśli chcesz dodać logowanie przez Google na swojej stronie, portalu lub panelu klienta, mogę pomóc w takim wdrożeniu. Zajmuję się tworzeniem stron internetowych, poprawkami technicznymi, konfiguracją analityki oraz automatyzacją procesów biznesowych.

Powiązane artykuły:

Udostępnij w Social Mediach
fb-share-icon
Tweet
fb-share-icon
Previous Post
Stworzyłem własną wtyczkę do WordPressa – Auto CTA Box
 Next Post
Jak rozpoznać uczciwego informatyka – 5 cech dobrego specjalisty

Leave a Comment