Wpis ten przedstawia w jaki sposób możemy stworzyć skrypt do logowania przez konto Google na naszej stronie www. Na końcu znajduje się link repozytorium na GitHub.
1. Stworzenie aplikacji Google (Google APP)
Aby podłączyć pod naszą stronę możliwość logowania przez Google musimy mieć założone konto na Google. Następnie przechodzimy do Google API Console pod adresem:
https://console.developers.google.com/
Jeśli nie mamy stworzonego projektu, klikamy na „Stwórz projekt” (Create project) u góry w menu, możemy też wykorzystać projekt, który już mamy.
Następnie przechodzimy na stronę projektu, z menu po lewej wybieramy zakładkę „Biblioteka” (Library), szukamy pozycji „Google+ API”, klikamy na nią, następnie na „Włącz” (Enable).
Następnie przechodzimy do zakładki „Dane logowania” (Credentials) z menu po lewej stronie.
Klikamy na „Utwórz dane logowania” (Create Credentials) i wybieramy pozycję „ID klienta OAuth” (OAuth client ID). Jako typ aplikacji wybieramy „Aplikacja internetowa” (Web application),
wpisujemy nazwę aplikacji a w polu „Autoryzowane identyfikatory URI przekierowania” (Authorised redirect URIs) wpisujemy adres URL naszej strony, na której będziemy używać możliwości logowania przez Google.
Klikamy na przycisk „Utwórz” (Create).
Wyświetli się nowe okno z Google ID i Google Secret.
2. Zapisanie Api Client i Api Secret
Na serwerze tworzymy plik index.php (możemy oczywiście te dane przechowywać w innym pliku php i includować go do naszego projektu) z wartościami pobranymi z konsoli Google:
<?php
define('GOOGLE_ID','xxxxxxxxxx');
define('GOOGLE_SECRET','xxxxxxxxxx');
define('GOOGLE_REDIRECT_URL','xxxxxxxxxx');
Google ID to pobrany z Google Identyfikator klienta, Google Secret to Tajny klucz klienta, a redirect url to adres URL naszej aplikacji (musi być zgodny z adresem podanym podczas tworzenia aplikacji)
3. Dodanie linku do logowania przez Google
Teraz dodajemy link do logowania przez Google w naszej aplikacji.
<?php
define('GOOGLE_ID','xxxxxxxxxx');
define('GOOGLE_SECRET','xxxxxxxxxx');
define('GOOGLE_REDIRECT_URL','xxxxxxxxxx');
$google_login_url = 'https://accounts.google.com/o/oauth2/v2/auth?scope=' . urlencode('https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me') . '&redirect_uri=' . urlencode(GOOGLE_REDIRECT_URL) . '&response_type=code&client_id=' . GOOGLE_ID . '&access_type=online';
?>
<html>
<head>
<title>Logowanie przez Google</title>
</head>
<body>
<a href="<?= $google_login_url ?>">Zaloguj przez konto Google</a>
</body>
</html>
Poniżej wyjaśnienie atrybutów:
- scope: Zakres danych które chcemy pobrać z Google. Aby zdobyć informację o użytkowniku łącznie z adresem email potrzebujemy 3 wartości scope:
https://www.googleapis.com/auth/userinfo.profile
https://www.googleapis.com/auth/userinfo.email
https://www.googleapis.com/auth/plus.me - redirect_uri: Nasz adres URL do przekierowania
- response_type: Zostawiamy domyślną wartość czyli „code”
- client_id: ID naszej aplikacji na Google
- access_type: Ustawiamy na „online”
4. Uzyskiwanie Access Token
Zanim będziemy mogli pobrać od użytkownika dane musimy uzyskać dostęp do jednorazowego kodu dostępu.
Po kliknięciu przez użytkownika na naszej stronie przycisku „Zaloguj przez konto Google” i potwierdzeniu chęci zalogowania w naszej aplikacji Google przekierowuje użytkownika z powrotem na naszą stronę dodając zmienną „code” – jest to jednorazowy kod pozwalający uzyskać Access Token.
Do naszego kodu za definicjami stałych, a przed deklarowaniem zmiennej $google_login_url dodajemy następujący kod, który poprzez CURL uzyska z serwerów Google Access Token.
if(!empty($_REQUEST['code'])){
$url = 'https://accounts.google.com/o/oauth2/token';
$curlPost = 'client_id='.GOOGLE_ID.'&redirect_uri='.urlencode(GOOGLE_REDIRECT_URL).'&client_secret='.GOOGLE_SECRET.'&code='.$_REQUEST['code'].'&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_POSTFIELDS, $curlPost);
$data = json_decode(curl_exec($ch), true);
if(!empty($data['access_token'])){
print_r($data);
die();
}
}Po próbie zalogowania na ekranie wyświetli się tablica z danymi w tym między innymi access_token – o to nam chodziło:)
5. Uzyskiwanie danych użytkownika
Aby uzyskać dane użytkownika musimy ponownie poprzez zapytanie CURL odpytać serwery Google, wykorzystując uzyskany Access Token.
W tym celu zmieniamy w kodzie z punktu 4 linie:
print_r($data); die();
Na następujące:
$url = 'https://www.googleapis.com/oauth2/v2/userinfo?fields=email,verified_email';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer '.$data['access_token']]);
$data2 = json_decode(curl_exec($ch), true);
if(!empty($data2['email']) and !empty($data2['verified_email'])){
print_r($data2);
die();
}Teraz po zalogowaniu się zobaczmy wyprintowane wszystkie dane użytkownika, które możemy uzyskać, w tym jego adres email. Dane te możemy np. zapisać w bazie danych, aby zarejestrować użytkownika.
6. Zapisywanie w sesji zalogowanego użytkownika
Uzyskane dane użytkownika możemy zapisać w sesji, aby przy każdym odświeżeniu strony użytkownik nie musiał ponownie przechodzić przez logowanie. W tym celu na początku naszego pliku PHP dodajemy:
session_start();
A następnie zamieniamy linie z punktu 5:
print_r($data2); die();
Na następujące:
$_SESSION['logged_in'] = true; $_SESSION['email'] = $data2['email'];
Link do logowania przez Google jest sens generować, tylko jeśli użytkownik nie jest zalogowany, dlatego też dodajemy warunek sprawdzający czy istnieje zmienna sesyjna:
if(empty($_SESSION['logged_in'])){
$google_login_url = 'https://accounts.google.com/o/oauth2/v2/auth?scope=' . urlencode('https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me') . '&redirect_uri=' . urlencode(GOOGLE_REDIRECT_URL) . '&response_type=code&client_id=' . GOOGLE_ID . '&access_type=online';
}Dodajemy także warunek sprawdzający czy wyświetlić link do logowania, linię:
<a href="<?= $google_login_url ?>">Zaloguj przez konto Google</a>
Podmieniamy na:
<?php
if(empty($_SESSION['logged_in'])){
?>
<a href="<?= $google_login_url ?>">Zaloguj przez konto Google</a>
<?php
}elseif(!empty($_SESSION['email'])){
echo('Witaj '.$_SESSION['email']);
}
?>Po zalogowaniu zobaczmy wiadomość Witaj [nasz adres email]
Mam nadzieję, że ten wpis ułatwi Wam tworzenie aplikacji webowych z możliwością logowania przez konto Google.
Link do skryptu na GitHub: https://github.com/kamilwyremski/logowanie-google