Bubble: Rejestracja i logowanie z Google

0:00Witam Cię w kolejnej lekcji, w której tym

0:01razem skupimy się na dodaniu do naszej aplikacji możliwości logowania i

0:05rejestracji z wykorzystaniem serwisu Google.

0:08Przystąpmy więc do działania.

0:10W tym celu otwieram nową kartę i zaczynam wpisywać console Google.

0:18Jak widzisz.

0:20Jesteśmy na wynikach wyszukiwania, musimy

0:22kliknąć w ten link console.developers.google.com.

0:27Zostaniemy przekierowani do konsoli dla developerów.

0:31Jeżeli jesteś niezalogowany,

0:33to Google wyświetli Ci tutaj informację abyś się zalogował.

0:36Ja na chwilę obecną jestem już zalogowany na swoje konto w Gmailu.

0:39Mogę więc przystąpić do działania.

0:42W tym celu musimy najpierw utworzyć nowy projekt.

0:45Na nowym koncie nie będziesz miał żadnych

0:46projektów, a więc musimy po prostu dodać nowy.

0:50W tym celu klikamy tutaj,

0:51nowy projekt.

0:53Musimy wpisać jego nazwę, ja go nazwę

0:55po prostu Projecto, lokalizacja mnie nie interesuje.

1:01Na chwilę obecną korzystam z konta Gmaila,

1:03więc tutaj nie mam żadnej organizacji przypiętych do mojej domeny.

1:07Klikam więc utwórz.

1:11Muszę chwilę poczekać aż to się wszystko, tutaj w Google załaduje.

1:25Nasz projekt został utworzony.

1:27Jesteśmy w nim.

1:28O czym świadczy ta informacja.

1:30Możemy więc przystąpić do dalszej pracy.

1:33To, co musimy zrobić w pierwszej kolejności, to utworzyć tutaj ekran zgody

1:37OAuth, ponieważ nasza aplikacja będzie działała w

1:41trybie testowym i dodatkowo nie będziemy zbierać żadnych wrażliwych informacji o

1:45użytkownikach, takich jak na przykład dane z ich kalendarza.

1:49Całość tutaj przebiegnie wyjątkowo szybko.

1:52Wybieramy tutaj user type

1:55zewnętrzny, klikamy utwórz.

2:00Podajemy nazwę aplikacji.

2:01Znowu wpiszę tutaj

2:03projecto, adres e-mail

2:06to Google wyświetli Ci od razu Twój adres, na który jesteś tu zalogowany.

2:11Czyli

2:12w moim przypadku jest to taki adres e-mai,

2:15mogę go sobie nawet tutaj skopiować, nie,

2:16nie da się go tutaj niestety zaznaczyć.

2:19Tak więc logo aplikacji możesz wgrać tutaj jakiś obrazek, jeżeli Ci na tym zależy.

2:23Ja tą opcja pomijam.

2:25Musimy tutaj teraz podać stronę główną,

2:27stronę polityki prywatności i warunków, ponieważ takich stron nie definiowaliśmy.

2:32Ja we wszystkich tych miejscach podam tą naszą główną stronę.

2:36Zaznaczam, kopiuję i wklejam w to miejsca.

2:43Jeżeli chciałbyś, aby Twoja aplikacja

2:45przestała być testowa, a zaczęła działać naprawdę wersji produkcyjnej, to będziesz

2:48musiał oczywiście tu podać odpowiednie adresy wraz ze swoją domeną.

2:53I potem przejść przez proces weryfikacji takiej aplikacji przez samo Google.

2:57Ponieważ jest to temat dosyć mocno skomplikowany, ja odsyłam Cię do innych

3:00materiałów w sieci, które to doskonale tłumaczą.

3:03My natomiast korzystamy jak pamiętasz tylko z

3:04wersji testowej, więc wystarczy tutaj wprowadzanie takich danych.

3:09Teraz musimy dodać tu brakującą domenę o czym nas informuję tutaj Google.

3:15Zaznaczam, kopiuję i wklejam.

3:19Tu muszę podać jeszcze dane kontaktowe dewelopera.

3:23W tym przypadku możemy po prostu podać dokładnie ten sam e-mail

3:27edulearnbubble@gmail.com.

3:36Ok, przechodzimy dalej.

3:37Klikamy zapisz i kontynuuj.

3:42Jak już wspominałem wcześniej

3:43nie potrzebujemy tutaj żadnych dodatkowych zakresów.

3:46Pozostawiamy więc te informacje wszędzie,

3:48o takiej wartości, jakie są domyślnie, klikamy zapisz i kontynuuj.

3:53Nie dodajemy użytkowników testowych.

3:56Znów zapisz i kontynuuj.

4:00Zjeżdżamy teraz na sam dół, patrzymy czy tutaj wszystko jest wypełnione poprawnie.

4:04Jest dokładnie tak, jak być powinno.

4:06Możemy więc wrócić do panelu poprzez ten przycisk powrót do panelu.

4:11Nasz ekran zgody został utworzony, a my

4:14teraz możemy tutaj utworzyć dane logowania.

4:17W tym celu klikam w to miejsce, zostaliśmy przekierowani we właściwe miejsce.

4:22Możemy więc utworzyć dane logowania.

4:24W tym celu klikamy tutaj.

4:27Wybieramy identyfikator klienta OAuth.

4:31Typ aplikacji to w naszym przypadku aplikacja internetowa, nazwa, nadajmy jej tutaj nazwę

4:38po prostu projecto.

4:40Teraz będziemy musieli przekazać w to miejsce odpowiedni identyfikator URI.

4:45Klikam więc tutaj i aby taki identyfikator uzyskać musimy wrócić do edytora Bubble,

4:51przejść do zakładki plugins i dodać nowy plugin.

4:57Poczekajmy aż załaduje nam się to okienko z plugin'ami.

5:00Plugin, którego potrzebujemy nosi nazwę po prostu Google.

5:07Jak widzisz jest to plugin przygotowany bezpośrednio przez sam zespół Bubbla'a.

5:10Klikamy więc instal, klikamy done, nasz plugin został dodany.

5:16My mamy tutaj odpowiedni adres URI.

5:18Musimy sobie zaznaczyć tą opcję jeżeli jest odznaczona.

5:21Niestety nie jestem w stanie tutaj skopiować tej wartości.

5:24Musimy więc przejść tutaj na naszą stronę, a tutaj zaznaczoną tą wartość skopiować.

5:31Teraz wkleić ją w to miejsce i uzupełnić pozostałe informacje.

5:36Czyli mamy tu api/1.1/oauth_redirect.

5:42Proszę przepisz tą wartość tak abyś nie popełnił tam żadnej literówki.

5:47Czyli api/1.1/aouth_redirect.

5:59Jeżeli ten adres wpisałeś poprawnie to klikamy tylko utwórz.

6:04Odpowiedni klucz został tutaj utworzony, czyli tzw.

6:07client OAuth, teraz możemy sobie skopiować te wartości.

6:11Wybieramy w pierwszej kolejności Twój identyfikator klienta.

6:14Klikamy w to miejsce i kopiujemy.

6:16Wracamy do edytora i tą wartość wklejamy tutaj w to pole pod app ID/API key.

6:24W tym miejscu i w tym miejscu.

6:27Wracamy znów tutaj do danych logowania.

6:29Tym razem kopiujemy sobie tajny klucz klienta.

6:34I wklejamy go w to miejsce i w to miejsce.

6:39W ten sposób połączyliśmy tutaj nasz

6:40plugin z danymi logowania utworzonymi w Google.

6:44Mogę więc kliknąć ok.

6:46Wrócić do edytora i teraz przystąpić do tworzenia naszego workflow.

6:51W tym celu przechodzimy do zakładki

6:53design, zaznaczamy przycisk sign up with Google i tworzymy nowy workflow.

7:00Utwórzmy dodatkowo tutaj może osobny folder, nazwijmy go po prostu Google.

7:06Klikam ok.

7:09W ten sposób mam tutaj tylko to jedno workflow.

7:12Zmieńmy kolor pomarańczowy.

7:15I teraz oczywiście musimy zdefiniować

7:16warunek, który w pierwszej kolejności będzie rejestrował użytkownika.

7:20Jak się domyślasz, musimy przejść,

7:23tutaj do sekcji only when i wpisać

7:27authentication view is not login.

7:31W takim wypadku chcemy rejestrować oczywiście naszego użytkownika.

7:35Teraz z listy dostępnych operacji tutaj

7:38wybieramy sekcję account i tym razem sign up login with the Social Network.

7:44Musimy wskazać provider'a,

7:45mamy tylko jednego zainstalowanego, czyli

7:47Google i tak naprawdę w ten sposób zarejestrujemy

7:51tutaj użytkownika i jednocześnie go zalogujemy w naszej aplikacji.

7:55A więc już na tym kroku ten użytkownik będzie zarejestrowany i zalogowany.

8:00Możemy teraz przystąpić do dalszego działania.

8:03Za pomocą tej tej operacji uzyskamy dane użytkownika w Google.

8:08Możemy więc sobie wyciągnąć jego imię i nazwisko

8:11i poprawnie uzupełnić w naszej bazie danych.

8:13Aby to zrobić klikam tutaj.

8:16Wybieram sekcję account i tym razem mail

8:18changes to current user, czyli chcemy zmienić tutaj dane na bieżącego użytkownika.

8:25Klikam change another field, wskazuje tutaj

8:28full name i aby pobrać wymagane przez nas dane klikam w to miejsce.

8:33Odnoszę się do current user i tym razem jak widzisz tutaj na liście pojawiło mi się

8:37jeszcze Google, a więc klikam w to miejsce.

8:40I teraz mogę sobie wyciągnąć informacje użytkownika z jego konta Google.

8:44W naszym przypadku jest to first name.

8:47Klikamy tutaj na samym końcu tak aby,

8:51w to miejsce tu dokładnie żeby nam kursor, czasami jest to ciężko tutaj zrobić.

8:55Wybieram sobie first name.

8:59Klikam tutaj.

9:00Jak widzisz teraz ten kursor tutaj świeci mi się zaraz pod currnet

9:03user Google first name,

9:05klikam spacja, wybieram insert dynamic data,

9:11current user i tym razem Google last name.

9:14W ten sposób wyciągamy imię, wstawiamy spację i wyciągamy nazwisko.

9:20Całe to przepisujemy, całą tą wartość

9:22przepisujemy tutaj do pola full name.

9:24Ostatnia rzecz, jaka nam pozostała tutaj

9:27do zrobienia, to przekierować użytkownika na stronę z dashboard'em.

9:36Nasz workflow jest już gotowy, możemy go przetestować.

9:39W tym celu wracamy na naszą stronę autentykacji.

9:44Odświeżamy.

9:46Potrzebny nam jest tutaj formularz rejestracji.

9:51I teraz mogę wybrać sign up with Google.

9:55Jak widzisz mam tutaj tylko jedno swoje konto.

9:59Klikam.

10:02Muszę chwilę poczekać, żeby to się tam wszystko odpowiednio,

10:06wykonało, ok

10:08jesteśmy przekierowani na stronę z dashboard'em.

10:11Zarejestrowani, jak widzisz dane z mojego konta zostały

10:15tutaj pobrane, a więc wszystko wykonało nam się poprawnie.

10:19Pozostaje nam więc teraz jeszcze dodanie opcji logowania.

10:23Jak się domyślasz, będzie ona wyjątkowo prosta.

10:25Mogę skopiować,

10:28ten workflow.

10:30Wkleić go w to miejsce.

10:32Zmienić kolor na purpurowy.

10:35Tym razem mówimy, że view ma być równe login,czyli chcemy zalogować użytkownika.

10:42Operację zostawiamy dokładnie tą samą, bo

10:45ona nie tylko rejestruje, ale jednocześnie też i loguje użytkownika.

10:49Tym razem już nie musimy tutaj zmieniać

10:51tych wartości, ponieważ ustawiliśmy ją jednorazowo przy rejestracji.

10:55Pozbywamy się jej.

10:58Wystarczy tylko ta operacja.

11:00Sprawdźmy, czy to teraz zadziała.

11:03Odświeżmy.

11:06Wylogujmy się.

11:10Jak widzisz teraz jestem w widoku login.

11:12Mam sign in with Google.

11:13Klikam, wskazuje swoje konto.

11:19I znów musimy chwilę poczekać i zostaliśmy zalogowani do naszej aplikacji.

11:24Dodatkowo możemy przejść do podglądu bazy danych.

11:28Jak widzisz mam tu nowego użytkownika, czyli siebie wraz z moim kontem gmail'owym.

11:34To by było na tyle w tej lekcji.

11:36Jak sam widzisz, wykorzystanie tutaj

11:38logowania i rejestracji z Google jest wyjątkowo proste.

11:40Bubble zadbało o to, aby wdrożenie tego rozwiązania było tutaj jak najprostsze.

11:45Tak więc dziękuję Ci serdecznie za uwagę i widzimy się już za moment.