Przewodnik Logowanie przez Google v1.0.0Przewodnik Logowanie przez Google v1.0.0

Instalacja

Instalacja modułu `Logowanie przez Google`

1. Dodaj moduł `Logowanie przez Google` do swojego sklepu PrestaShop.

Logownie przez Google

2. Znajdź moduł `Logowanie przez Google` na liście modułów i kliknij "Instaluj".

Logownie przez Google

Konfiguracja

Znajdź moduł `Logowanie przez Google` na liście modułów i kliknij "Konfiguruj".

Logownie przez Google

Ustawienia Google API

1. `Nazwa aplikacji`.

2. `ID klienta`.

2.1. `URI przekierowania`.

3. `Klucz klienta`.

4. `Klucz programisty`.

Logownie przez Google

5. Aplikacja google.

Aby przeprowadzić całą operację musisz posiadać konto `gmail` oraz być zalogowany. Wejdź na stronę tworzenia aplikacji Google. Przejdź do strony

5.1. Kliknij `Create an empty project`.

Logownie przez Google

5.2. Wpisz nazwę aplikacji.

5.3. Zatwierdź warunki korzystania z serwisu (przed zatwierdzeniem zaleca się przeczytanie warunków umowy - link `Terms of Service`).

5.4. Kliknij `Create`, aby utworzyć aplikację.

Logownie przez Google

5.5. Zaczekaj na utworzenie aplikacji (prawy dolny róg strony). Google przekieruje Cię na jej główną stronę.

Logownie przez Google

5.6. Rozwiń zakładkę `Project`.

5.7. `Project ID` - `Nazwa aplikacji` z punktu 1.

Logownie przez Google

5.8. Rozwiń zakładkę `APIs & auth`.

5.9. Wejdź w `APIs & auth` => `APIs`.

5.10. Kliknij `Google+ API`.

Logownie przez Google

5.11. Kliknij `Enable API`.

Logownie przez Google

5.12. Wejdź w `APIs & auth` => `Credentials`.

5.13. Rozwiń `Add credentials`.

5.14. Kliknij `API key`.

Logownie przez Google

5.15. Pojawi się okno `Create new key`. Kliknij `Server key`.

Logownie przez Google

5.16. Kliknij `Create`, aby utworzyć klucz.

Logownie przez Google

5.17. Utworzono nowy klucz. Jest to `Klucz programisty z punktu 4.`

Logownie przez Google

5.18. Wejdź w `APIs & auth` => `Credentials`.

5.19. Rozwiń `Add credentials`.

5.20. Kliknij `OAuth 2.0 client ID`.

Logownie przez Google

5.21. Kliknij `Configure consent screen` - ustawia się tutaj dane do ekranu udostępnienia danych, przez logującego się klienta.

Logownie przez Google

5.22. Wpisz nazwę ekranu - `Product name`.

5.23. Pozostałe pola są opcjonalne i można je uzupełnić według uznania.

`Hompage URL` - adres strony domowej właściciela aplikacji.
`Product logo` - adres do loga ekranu.
`Privacy policy URL` - adres do dokumentu polityki prywatności serwisu właściela aplikacji.
`Terms of service URL` - adres do dokumentu warunków usług serwisu właściela aplikacji.

5.24. Kliknij `Save`, aby zapisać ustawienia eranu.

Logownie przez Google

5.25. Wybierz `Web application` (pojawią się nowe pola).

5.26. W pole `Authorized redirect URIs` wpisz `URI przekierowania` z punktu 2.1.

5.27. Kliknij `Create`, aby utworzyć klucz klienta.

Logownie przez Google

5.28. Kliknij `Web client 1` - w przypadku nadania kluczowi innej nazwy będzie widniał tam inny napis.

Logownie przez Google

5.29. Pole `Client ID` - to `ID klienta` z punktu 2.

5.30. Pole `Client secret` - to `Klucz klienta` z punktu 3.

Logownie przez Google

6. Po uzupełnieniu pól 1-4, kliknij `Zapisz`.

Proszę upewnić się, że na początku i końcu danych nie ma spacji. Logownie przez Google

Ustawienia dodatkowe.

1. Hasło.

Zaznacz `Tak`, jeżeli chcesz aby klient po zalogowaniu się przez Google mógł wprowadzić hasło w celu, późniejszego logowania się w tradycyjny sposób.

2. Wyślij maila.

Zaznacz `Tak`, jeżeli chcesz, aby w przypadku niezwórcenia przez Google API maila (niezweryfikowany mail - bardzo rzadka sytuacja) klient miał możliwość podania maila oraz potwierdzenia go poprzez link wysłany na danego maila.

3. Wiadomość.

Szablon wiadomości z punktu 2.

4. Kliknij `Zapisz`, aby zapisać ustawienia.

Logownie przez Google

Sklep

Przycisk logowania

Logownie przez Google

Przycisk logowania przy rejestracji

1. Znajdź interesujący Cię plik szablonu i wklej następujący kod:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
{literal}
.google_login_a {
display: inline-block;
position: relative;
overflow: hidden;
line-height: 31px;
border-radius: 3px;
background-color: #D34A2E;
color: #FFF;
border: 1px solid #D34A2E;
box-sizing: border-box;
float: left;
margin-top: 10px;
}
.google_login_a:hover {
background-color: #D55338;
}
.google_login_a i {
border-right: 1px solid #c3452b;
line-height: 31px;
padding-right: 6px;
box-sizing: border-box;
}
{/literal}
</style>
<button class="google_login_a" onclick="window.location = '{$link_redirect}'">
<i class="fa fa-google-plus"></i> {l s='Login with Google' mod='phgooglelogin'}
</button>

2. Do wybranego pliku szablonu musi być przekazana zmienna 'link_redirect' o wartości:

$this->context->link->getModuleLink('phgooglelogin', 'redirect', array(
'redirect' => urlencode(_PS_BASE_URL_SSL_.$_SERVER['REDIRECT_URL'])
))
Logownie przez Google