Otwarta autoryzacja, znana również jako OAuth, to protokół używany do autoryzowania użytkownika na Twojej stronie za pomocą usługi innych firm, takich jak Google, Github, Facebook itp. Usługa stron trzecich udostępnia niektóre dane (nazwa, e-mail, zdjęcie profilowe itp.) ze swoją witryną, a następnie upoważnia użytkownika w jego imieniu bez zarządzania hasłami i nazwami użytkowników dla Twojej witryny i zapisywania użytkowników dużo dodatkowych problemów.

Jak działa Oauth

Gdy użytkownik kliknie „Zaloguj się z Google”, zabiera użytkownika do strony Zgoda Google OAuth. Gdy użytkownik zgadza się na zgodę i uwierzytelni swoją tożsamość w Google, Google skontaktuje się z Twoją witryną jako usługa strony trzecie. W ten sposób użytkownik może być autoryzowany bez zarządzania poświadczeniami dla Twojej witryny.

Wdrożenie Google OAuth za pomocą węzła.JS

Prawie wszystkie języki programowania zapewniają różne biblioteki do wdrożenia Google OAuth do autoryzacji użytkowników. Węzeł.JS zapewnia biblioteki „paszportowe” i „paszport-Google-Oauth20” do wdrożenia Google OAuth. W tym artykule zaimplementujemy protokół OAuth, aby upoważnić użytkowników do korzystania z węzła.JS.

Utwórz projekt w Google

Pierwszym krokiem do wdrożenia Google OAuth jest utworzenie projektu w konsoli programistów Google dla Twojej witryny. Ten projekt służy do uzyskania klawiszy API używanych do składania żądań do Google w celu otwartego uwierzytelnienia. Goto następujący link i utwórz swój projekt:

https: // konsola.programiści.Google.com

.

Konfigurowanie projektu Google

Po utworzeniu projektu przejdź do projektu i wybierz „Ekran zgody OAuth” z menu po lewej stronie.

Kliknij przycisk „Utwórz” i podaj wszystkie szczegóły swojego projektu. Kliknij „Zapisz i kontynuuj”, aby przejść dalej.

Teraz zapewnij zakres swojego projektu. Zakłady to rodzaje uprawnień, aby uzyskać dostęp do danych użytkownika z konta Google. Musisz skonfigurować uprawnienia, aby uzyskać określone dane użytkownika z konta Google. Kliknij „Zapisz i kontynuuj."

Teraz dodaj użytkowników testu do projektu, jeśli chcesz. Użytkownicy testowi są jedynymi dozwolonymi użytkownikami, którzy mogą uzyskać dostęp do Twojej aplikacji internetowej w trybie testowania. Na razie nie wprowadzimy żadnego użytkownika testowego i klikniemy „Zapisz i kontynuuj”, aby przejść do strony podsumowania projektu.

Przejrzyj swój projekt na stronie podsumowania i zapisz konfigurację. Teraz wygenerujemy poświadczenia dla naszego projektu. Wybierz kartę „Umowy” w menu po lewej stronie i kliknij przycisk „Utwórz poświadczenia” na górze, aby wygenerować OAuth 2.0 identyfikatorów klientów.

Z menu rozwijanego wybierz „Identyfikator klienta OAuth” i określ typ aplikacji jako „aplikacja internetowa” i nazwisko aplikacji.

Na tej samej stronie musimy podać dwa URI, „autoryzowane pochodzenie JavaScript” i „autoryzowane Uris przekierowania”. „Autoryzowane pochodzenie JavaScript” to pochodzenie HTTP Twojej aplikacji internetowej i nie może mieć żadnej ścieżki. „Autoryzowane URI przekierowania” jest dokładnym URI ze ścieżką, w której użytkownik zostanie przekierowany po uwierzytelnianiu Google.

Po wprowadzeniu wszystkich wymaganych wpisów kliknij „Utwórz”, aby utworzyć poświadczenia OAuth.

Inicjowanie węzła.Projekt JS

Do tej pory utworzyliśmy projekt Google, aby autoryzować użytkowników do naszej aplikacji za pomocą Google. Teraz zamierzamy zainicjować węzeł.JS Project wdrożenie OAuth. Utwórz katalog o nazwie „Auth” i zainicjuj projekt Express.

Ubuntu@ubuntu: ~ $ mkdir auth
Ubuntu@ubuntu: ~ $ CD Auth
Ubuntu@ubuntu: ~ $ npm init -y

Instalowanie wymaganych pakietów NPM

Aby zaimplementować Google OAuth za pomocą węzła.JS, musimy zainstalować niektóre pakiety NPM. Użyjemy „paszportu”, „ekspresowego”, „ścieżki” i „paszport-google-oauth20”. Zainstaluj te pakiety za pomocą NPM.

Ubuntu@ubuntu: ~ $ npm instaluj ekspresowy paszport paszport-google-oauth20 ścieżka

Pisanie węzła.Kod JS

Przede wszystkim napiszemy dwie proste strony internetowe HTML, jedną z przyciskiem i zezwolimy użytkownikowi po kliknięciu przycisku. Druga strona zostanie autoryzowana, a użytkownik zostanie przekierowany na autoryzowaną stronę po autoryzacji. Utwórz plik „indeks publiczny/.html '.

Teraz utwórz plik „Sukces publiczny.html 'z następującą zawartością.

Upoważniony

Po utworzeniu stron internetowych, teraz napiszemy kod, aby upoważnić użytkowników do korzystania z Google OAuth. Utwórz indeks pliku.JS '.

// importowanie wymaganych pakietów
const express = wymaga („express”);
const paszport = wymaga („paszport”);
const ścieżka = wymaga („ścieżka”);
const GoogleStrategy = wymaga („paszport-google-oauth20”).Strategia;
const app = express ();
// Definiowanie parametrów
// Identyfikator klienta to parametr, który otrzymamy z konsoli programistów Google
Client_id = ”xxxxxxx”;
// Sekret klienta zostanie również zabrany z konsoli programistów Google
Client_secret = ”xxxxx”;
// Użytkownik zostanie przekierowany do Callback_URL po autoryzacji
Callback_url = ”http: // localhost: 8000/autoryzowany”;
// Numer portu musi być taki sam, jak zdefiniowany w konsoli dewelopera
Port = 8000;
// Konfigurowanie oprogramowania pośredniego paszportu
App.Użyj (paszport.inicjalize ());
App.Użyj (paszport.sesja());
paszport.serializeUser (funkcja (id, gotowe)
gotowe (null, id);
);
paszport.deserializeUser (funkcja (id, gotowe)
gotowe (null, id);
);
// następujące oprogramowanie pośrednie będzie działać w dowolnym momencie. Metoda uwierzytelniona jest wywoływana i zwraca różne parametry zdefiniowane w zakresie.
paszport.Użyj (nowa GoogleStrategy (
ClientId: client_id,
ClientSecret: Client_Secret,
Callbackurl: Callback_Url
,
Funkcja async (AccessToken, odświeżenie, profil, e -mail, CB)
zwróć CB (null, e -mail.ID);

));
// obsługa strony głównej dla aplikacji
App.get ('/', (req, res) =>

res.Sendfile (ścieżka.dołącz (__ dirname + '/public/index.html '));
);
// Strona obsługi sukcesu dla aplikacji
App.get ('/Success', (req, res) =>

res.Sendfile (ścieżka.Dołącz (__ dirname + '/public/sukces.html '));
);
// Użytkownik zostanie przekierowany na stronę Google Auth.
App.Get („/Google/Auth”,
paszport.Authentiate („Google”, Scope: [„Profilu”, „e -mail”])
);
// Przekierowanie niepowodzenia uwierzytelnienia jest zdefiniowane na następującej trasie
App.Get („/autoryzowany”,
paszport.Authentiate („Google”, FaireureDirect: '/'),
(req, res) =>

res.Przekierowanie („/Success”);

);
// Uruchamianie serwera
App.Słuchaj (port, () =>

konsola.dziennik („serwer działa na porcie” + port)
)

Testowanie Google OAuth

Teraz nasza aplikacja jest gotowa i możemy sprawdzić, czy upoważnia użytkowników korzystających z Google OAuth. Przejdź do katalogu głównego i uruchom aplikację.

Ubuntu@ubuntu: ~ $ indeks węzłów.JS

Teraz wprowadź adres URL aplikacji do przeglądarki.

http: // localhost: 8000

Pokazuje stronę główną z tagiem kotwicy.

Po kliknięciu „autoryzuj tutaj”, przekieruje się na stronę Google OAuth.

Twoja nazwa aplikacji „Test” jest wyświetlana na stronie uwierzytelniania Google. Kiedy autoryzujesz swoje konto, zabierze Cię na autoryzowaną stronę.

Wniosek

Zarządzanie nazwami i hasłem dla różnych aplikacji internetowych nie jest szczęśliwym zadaniem dla użytkowników. Wielu użytkowników opuszcza twoją aplikację internetową bez rejestracji konta tylko dlatego, że nie chcą zarządzać poświadczeniami. Proces autoryzacji w aplikacji internetowej lub stronie internetowej można uprościć, korzystając z usług innych firm, takich jak Google, Facebook itp. Usługi te upoważniają użytkowników w ich imieniu, a użytkownik nie musi osobno zarządzać poświadczeniami. W tym artykule zaimplementowaliśmy protokół Google OAuth do upoważnienia użytkowników do korzystania z węzła.JS.