Łatwy Google Auth dla Node.js

5 prostych kroków do integracji z Google - zawiera kod.

Moje oczy puchły łzami , gdy zdałem sobie sprawę, że ostatnie 10 godzin kodowania było na nic… Passport.js dał mi, i ludziom tego świata, fałszywą nadzieję.

Nie jestem pewien, czy kiedykolwiek widziałeś kod w bibliotece Passport.js, ale nie ma go zbyt wiele i też nie jest zbyt dobry. Zasadniczo jest to trochę kodu, który zapewnia, że ​​dane uwierzytelniające są umieszczone we właściwym miejscu. Ale główną wadą tego jest to, że zabija twoją elastyczność. W przypadku paszportu należy przekierować żądania oddzwonienia na serwer. Jeśli nie wiesz co to znaczy; w zasadzie jest do bani, jeśli tworzysz jakąkolwiek aplikację inną niż aplikacja renderowana na serwerze (np. aplikacja jednostronicowa lub SPA).

Ale nie martw się! Oto krótki samouczek, który pokaże, jak poprawnie dodać Google Auth.

Zanim zaczniesz ️

W tym samouczku założono, że masz:

  1. Dobra znajomość JavaScript i Node.js
  2. Aplikacja z serwerem

Świetnie, chodźmy!

Krok 1: Zainstaluj zależności 🖥

Tylko jeden - dotyczy NPM, jeśli jeszcze tego nie zakładałeś.

  • googleapis

To było łatwe!

Krok 2: Skonfiguruj Google

Następnie musisz skonfigurować bibliotekę przy użyciu swoich poświadczeń, aby Google wiedział, kto wysyła żądania.

Aby uzyskać poświadczenia - jeśli jeszcze ich nie masz - przejdź do konsoli Google i utwórz nowy projekt. Gdy masz nowy projekt, poproś o klucze API. Oto dobry link do dodatkowej pomocy w tym zakresie.

Plik: src / google-util.js

Powyższy plik; importuje bibliotekę, tworzy obiekt konfiguracji z naszymi szczegółami i dodaje funkcję, która połączy się z Google, kiedy będziemy tego chcieli.

Krok 3: Uzyskaj adres URL logowania do Google

Dlaczego tego potrzebujemy?… Cóż, abyśmy mogli zalogować się do Google, musimy wysłać go na stronę logowania Google. Odtąd logują się na swoje konto, a następnie przekierowują do naszej aplikacji ze szczegółami logowania.

Plik: src / google-util.js

Powyższy kod robi kilka rzeczy; określa, jakich informacji i uprawnień oczekujemy od użytkownika podczas logowania, i tworzy funkcję, której użyjemy do wygenerowania adresu URL. Na koniec tworzymy funkcję, która generuje adres URL, który musisz wysłać do klienta.

Krok 4: Twoja kolej - Przekieruj użytkowników do adresu URL Google

Ten krok wymaga wysłania użytkowników na właśnie utworzony adres URL. W mojej aplikacji generuję adres URL w interfejsie API i wysyłam go do interfejsu użytkownika, gdzie robię to jako adres URL przycisku np.

 Zaloguj się za pomocą Google 

Spowoduje to przejście użytkownika do strony logowania.

Rozwiązywanie problemów: jeśli przejdziesz na stronę z informacją, że nie masz dostępu (lub czegoś podobnego), może to oznaczać, że nie skonfigurowałeś poprawnie poświadczeń projektu Google. Upewnij się, że poprawnie skonfigurowałeś je w konsoli Google.

Krok 5: Zapisz szczegóły logowania

Mamy nadzieję, że byłbyś w stanie zalogować się na swoje konto Google, a Google przekierowałby Cię z powrotem do Twojej aplikacji (lub adresu przekierowania, na który kazałeś przejść). Teraz musimy tylko upewnić się, że konto, na które się zalogowali, odpowiada użytkownikowi w naszej bazie danych (lub utworzy ją).

Aby to zrobić, Google podał nam parametr adresu przekierowania zwany „kodem”. Zobaczysz to jako:

https://yourwebsite.com/callback?code=a-bunch-of-random-characters

Musisz wyodrębnić ten parametr „kodu” i zwrócić go do biblioteki Google api, aby sprawdzić, kto jest zalogowanym użytkownikiem. Oto dobry pakiet NPM, który może pomóc wyodrębnić parametr, ale nie ma znaczenia, jak to zrobić.

Po ustawieniu parametru „kod” i wysłaniu go na serwer możemy uzyskać adres e-mail użytkownika i identyfikator do użycia w naszej aplikacji.

Plik: src / google-util.js

Teraz wszystko, co musisz zrobić, to sprawdzić adres e-mail lub identyfikator w bazie danych i zalogować użytkownika lub zarejestrować się - to zależy od Ciebie!

Pełna wersja

Oto pełna wersja kodu bez wszystkich komentarzy. Użyj tego dla dobrego przeglądu. Jeśli utkniesz, sprawdź powyższe przykłady z objaśnieniami.

Yahoooo !!

Twoja aplikacja obsługuje teraz Google. Aby uzyskać dostęp do jakichkolwiek interfejsów API Google, po prostu dodaj je do tablicy „zakresów”, a gdy użytkownik przejdzie do logowania, zostanie poproszony o dostęp do tych danych, np. Dane z kalendarza Google.

Jeśli podobał Ci się ten artykuł, proszę dać mu kilka klaśnięć (możesz zostawić do 50) lub możesz skomentować, jeśli masz jakieś pytania, postaram się odpowiedzieć!

Obserwuj mnie na Twitterze.

Dzięki!

Artykuł stworzony przez założycieli Authenticator - Proste i szybkie uwierzytelnianie Twojej aplikacji.

Więcej postów Jack Scott.

  • Jak uruchomiłem startup w 4 dni
  • Zbuduj pełny serwer GraphQL za pomocą Node.js
  • Do widzenia Redux