OAuth 2.0 to standard, który umożliwia aplikacjom innych firm bezpieczny dostęp do danych z aplikacji internetowych. Możesz go używać do pobierania danych, w tym informacji o profilu, harmonogramów itp. który jest hostowany w innych aplikacjach internetowych, takich jak Facebook, Google i GitHub. Usługa może to zrobić w imieniu użytkownika bez ujawniania jego poświadczeń aplikacji innej firmy.

Dowiedz się, jak zaimplementować OAuth w aplikacji Express przy użyciu usługi GitHub jako dostawcy OAuth w kilku krokach.

Przepływ OAuth

W typowym przepływie OAuth witryna udostępnia użytkownikom opcję logowania się przy użyciu konta innej firmy od dostawcy, takiego jak GitHub lub Facebook. Użytkownik może rozpocząć ten proces, klikając odpowiedni przycisk logowania OAuth.

Spowoduje to przekierowanie ich z Twojej aplikacji do witryny dostawcy OAuth i przedstawienie im formularza zgody. Formularz zgody zawiera wszystkie informacje, do których chcesz uzyskać dostęp od użytkownika, które mogą być jego e-mailami, zdjęciami, harmonogramami itp.

instagram viewer

Jeśli użytkownik autoryzuje Twoją aplikację, strona trzecia przekieruje go z powrotem do Twojej aplikacji za pomocą kodu. Twoja aplikacja może następnie wymienić otrzymany kod na token dostępu, za pomocą którego będzie mogła uzyskać dostęp do dostępnych danych użytkownika.

Implementacja tego przepływu w aplikacji Express obejmuje kilka kroków.

Krok 1: Konfiguracja środowiska programistycznego

Najpierw utwórz pusty katalog projektu i płyta CD do utworzonego katalogu.

Na przykład:

mkdir aplikacja-github
płyta CD aplikacja-github

Następnie zainicjuj npm w swoim projekcie, uruchamiając:

npm początek -y

To polecenie tworzy pakiet.json plik zawierający szczegółowe informacje o Twoim projekcie, takie jak nazwa, wersja itp.

W tym samouczku omówimy korzystanie z systemu modułów ES6. Ustaw to, otwierając swój pakiet.json plik i określenie "typ": "moduł" w obiekcie JSON.

Krok 2: Instalowanie zależności

Aby serwer działał poprawnie, musisz zainstalować kilka zależności:

  • ExpressJS: ExpressJS to framework NodeJS, który zapewnia solidny zestaw funkcji dla aplikacji internetowych i mobilnych. Korzystanie z Express uprości proces tworzenia serwera.
  • Axios: Axios to oparty na obietnicach klient HTTP. Będziesz potrzebować tego pakietu, aby wykonać żądanie POST o token dostępu do GitHub.
  • dotenv: dotenv to pakiet, który ładuje zmienne środowiskowe z pliku .env do obiektu process.env. Będziesz go potrzebować, aby ukryć ważne informacje o swojej aplikacji.

Zainstaluj je, uruchamiając:

npm zainstalować ekspresowe axios dotenv

Krok 3: Tworzenie aplikacji ekspresowej

Musisz stworzyć podstawowy serwer Express do obsługi i wysyłania żądań do dostawcy OAuth.

Najpierw utwórz index.js plik w katalogu głównym projektu zawierający następujące elementy:

// index.js
import wyrazić z "wyrazić";
import aksjos z „aksjos”;
import * jak dotenv z "dotenv";
dotenv.config();
stały aplikacja = ekspres();
stały port = proces.env. PORT || 3000
app.listen (port, () => {
konsola.dziennik(`Aplikacja działa na porcie ${port}`);
});

Ten kod importuje bibliotekę ekspresową, tworzy instancję ekspresową i zaczyna nasłuchiwać ruchu na porcie 3000.

Krok 4: Tworzenie programów obsługi tras

Aby obsłużyć przepływ OAuth, musisz utworzyć dwie procedury obsługi tras. Pierwszy przekierowuje użytkownika do GitHub i żąda autoryzacji. Drugi obsługuje przekierowanie z powrotem do aplikacji i wysyła żądanie tokenu dostępu, gdy użytkownik autoryzuje aplikację.

Pierwszy program obsługi trasy powinien przekierować użytkownika do https://github.com/login/oauth/authorize? parametry.

Musisz przekazać zestaw wymaganych parametrów do adresu URL OAuth na GitHub, które obejmują:

  • Identyfikator klienta: odnosi się do identyfikatora, który otrzymuje Twoja aplikacja OAuth po zarejestrowaniu na GitHub.
  • Zakres: odnosi się do ciągu, który określa stopień dostępu aplikacji OAuth do informacji użytkownika. Listę dostępnych zakresów znajdziesz w Dokumentacja GitHub OAuth. Tutaj będziesz używać „przeczytaj: użytkownik” zakres, który daje dostęp do odczytu danych profilu użytkownika.

Dodaj następujący kod do swojego index.js plik:

// index.js
aplikacja.pobierz("/auth", (wymagane, odp.) => {
// Przechowuj parametry w obiekcie
stały parametry = {
 zakres: "przeczytaj: użytkownik",
Identyfikator klienta: proces.env.IDENTYFIKATOR KLIENTA,
 };
// Konwertuj parametry na ciąg zakodowany w adresie URL
stały urlEncodedParams = Nowy URLSearchParams (params).toString();
 przekierowanie.` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Ten kod implementuje pierwszą procedurę obsługi trasy. Przechowuje wymagane parametry w obiekcie, konwertując je do formatu zakodowanego w adresie URL za pomocą interfejsu API URLSearchParams. Następnie dodaje te parametry do adresu URL OAuth GitHub i przekierowuje użytkownika na stronę zgody GitHub.

Dodaj następujący kod do swojego index.js plik dla drugiego programu obsługi trasy:

// index.js
aplikacja.pobierz("/github-callback", (wymagane, odp.) => {
stały { kod } = wym.zapytanie;
stały ciało = {
Identyfikator klienta: proces.env.IDENTYFIKATOR KLIENTA,
klient_sekret: proces.env.CLIENT_SECRET,
 kod,
 };


wynajmować accessToken;
 const options = { headers: { akceptuj: "aplikacja/json" } };
aksjos
 .Poczta("https://github.com/login/oauth/access_token", ciało, opcje)
 .to((odpowiedź) => response.data.access_token)
 .to((token) => {
 accessToken = token;
 przekierowanie.`/?token=${token}`);
 })
 .złapać((błąd) => stan res.(500).json({ err: err.komunikat }));
});

Drugi program obsługi trasy wyodrębni kod zwrócony z GitHub w wym.zapytanie obiekt. Następnie wykonuje POST prośba za pomocą Aksjos do " https://github.com/login/oauth/access_token" z kodem, Identyfikator klienta, oraz klient_sekret.

The klient_sekret to prywatny ciąg, który wygenerujesz podczas tworzenia aplikacji GitHub OAuth. Kiedy access_token zostanie pomyślnie pobrany, zostanie zapisany w zmiennej do późniejszego wykorzystania. Użytkownik zostaje ostatecznie przekierowany do Twojej aplikacji za pomocą access_token.

Krok 5: Tworzenie aplikacji GitHub

Następnie musisz utworzyć aplikację OAuth w serwisie GitHub.

Najpierw zaloguj się na swoje konto GitHub, a następnie przejdź do Ustawienia, przewiń w dół do Ustawienia programistyi wybierz Aplikacje OAuth. Na koniec kliknij „Zarejestruj nową aplikację.”

GitHub dostarczy Ci nowy formularz wniosku OAuth, taki jak ten:

Wypełnij wymagane pola żądanymi danymi. „Adres strony domowej" Powinien być " http://localhost: 3000”. Twój "URL wywołania zwrotnego autoryzacji" Powinien być " http://localhost: 3000/github-callback”. Możesz także opcjonalnie włączyć przepływ urządzeń, co pozwala autoryzować użytkowników aplikacji bezgłowej, takiej jak narzędzie CLI lub menedżera poświadczeń Git.

Przepływ urządzeń jest w publicznej wersji beta i może ulec zmianie.

Na koniec naciśnij Zarejestruj aplikację przycisk.

GitHub przekieruje Cię na stronę z Twoim Identyfikator klienta i możliwość wygenerowania swojego klient_sekret. Skopiuj swój Identyfikator klienta, wygeneruj swój klient_sekreti skopiuj go też.

Utwórz plik .env i przechowuj Identyfikator klienta oraz klient_sekret w środku tego. Nazwij te zmienne odpowiednio CLIENT_ID i CLIENT_SECRET.

Twój przepływ OAuth jest teraz zakończony i możesz teraz wysyłać żądania za pomocą tokena dostępu w celu odczytania danych użytkownika ( zakres określone wcześniej).

Znaczenie OAuth 2.0

Korzystanie z protokołu OAuth 2.0 w aplikacji znacznie upraszcza zadanie implementacji przepływu uwierzytelniania. Zabezpiecza dane użytkowników Twoich klientów za pomocą standardu Secure Sockets Layer (SSL), zapewniając ich prywatność.