Udostępnij za pośrednictwem

Logowanie przy użyciu witryn zewnętrznych w witrynie ASP.NET Web Pages (Razor)

  • Artykuł

– autor Tom FitzMacken

W tym artykule wyjaśniono, jak zalogować się do witryny ASP.NET Web Pages (Razor) przy użyciu serwisu Facebook, Google, Twitter, Yahoo i innych witryn — czyli jak obsługiwać uwierzytelnianie OAuth i OpenID w witrynie.

Zawartość:

  • Jak włączyć logowanie z innych witryn podczas korzystania z szablonu witryny początkowej programu WebMatrix.

Jest to funkcja ASP.NET wprowadzona w artykule:

  • Pomocnik OAuthWebSecurity .

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 3

ASP.NET strony sieci Web obejmują obsługę dostawców OAuth i OpenID . Korzystając z tych dostawców, możesz zezwolić użytkownikom na logowanie się do witryny przy użyciu istniejących poświadczeń z serwisu Facebook, Twitter, Microsoft i Google. Aby na przykład zalogować się przy użyciu konta w serwisie Facebook, użytkownicy mogą po prostu wybrać ikonę Serwisu Facebook, która przekierowuje je na stronę logowania do serwisu Facebook, na której wprowadza informacje o użytkowniku. Następnie mogą skojarzyć identyfikator logowania na Facebooku z kontem w Twojej witrynie. Powiązane ulepszenia funkcji członkostwa stron sieci Web polega na tym, że użytkownicy mogą skojarzyć wiele logowań (w tym logowania z witryn sieci społecznościowych) przy użyciu jednego konta w witrynie internetowej.

Na tej ilustracji przedstawiono stronę Logowania z szablonu witryny początkowej , na której użytkownik może wybrać ikonę Facebook, Twitter, Google lub Microsoft, aby włączyć logowanie się przy użyciu konta zewnętrznego:

zewnętrzni dostawcy

Członkostwo OAuth i OpenID można włączyć, usuwając komentarz z kilku wierszy kodu w szablonie witryny początkowej . Metody i właściwości używane do pracy z dostawcami OAuth i OpenID są w WebMatrix.Security.OAuthWebSecurity klasie. Szablon witryny początkowej zawiera pełną infrastrukturę członkostwa, wraz ze stroną logowania, bazą danych członkostwa i całym kodem, który należy zezwolić użytkownikom na logowanie się do witryny przy użyciu poświadczeń lokalnych lub tych z innej witryny.

W tej sekcji przedstawiono przykład sposobu logowania użytkowników z witryn zewnętrznych do witryny opartej na szablonie witryny początkowej . Po utworzeniu witryny początkowej należy to zrobić (postępuj zgodnie z poniższymi szczegółami):

  • W przypadku witryn korzystających z dostawcy OAuth (Facebook, Twitter i Microsoft) tworzysz aplikację w witrynie zewnętrznej. Dzięki temu klucze aplikacji będą potrzebne do wywołania funkcji logowania dla tych witryn.

  • W przypadku witryn korzystających z dostawcy OpenID (Google) nie trzeba tworzyć aplikacji. W przypadku wszystkich tych witryn musisz mieć konto, aby zalogować się i utworzyć aplikacje dla deweloperów.

    Uwaga

    Aplikacje firmy Microsoft akceptują tylko adres URL na żywo dla działającej witryny internetowej, więc nie można użyć lokalnego adresu URL witryny internetowej do testowania identyfikatorów logowania.

  • Edytuj kilka plików w witrynie internetowej, aby określić odpowiedniego dostawcę uwierzytelniania i przesłać identyfikator logowania do witryny, której chcesz użyć.

Ten artykuł zawiera oddzielne instrukcje dotyczące następujących zadań:

Włączanie identyfikatorów logowania Google

  1. Utwórz lub otwórz witrynę stron sieci Web ASP.NET opartą na szablonie witryny początkowej programu WebMatrix.

  2. Otwórz stronę _AppStart.cshtml i usuń komentarz w następującym wierszu kodu.

    OAuthWebSecurity.RegisterGoogleClient();

Testowanie logowania google

  1. Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .

  2. Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz przycisk Prześlij Google lub Yahoo . W tym przykładzie użyto identyfikatora logowania Google.

    Strona internetowa przekierowuje żądanie do strony logowania Google.

    Logowanie Google

  3. Wprowadź poświadczenia dla istniejącego konta Google.

  4. Jeśli google pyta, czy chcesz zezwolić localhost na korzystanie z informacji z konta, kliknij przycisk Zezwalaj.

    Kod używa tokenu Google do uwierzytelniania użytkownika, a następnie wraca do tej strony w witrynie internetowej. Ta strona umożliwia użytkownikom skojarzenie logowania Google z istniejącym kontem w witrynie internetowej lub zarejestrowanie nowego konta w witrynie w celu skojarzenia logowania zewnętrznego.

    Zrzut ekranu przedstawia stronę rejestracji.

  5. Wybierz przycisk Skojarz . Przeglądarka powraca do strony głównej aplikacji.

Włączanie logowania do serwisu Facebook

  1. Przejdź do witryny deweloperów serwisu Facebook (zaloguj się, jeśli jeszcze się nie zalogowano).

  2. Wybierz przycisk Utwórz nową aplikację , a następnie postępuj zgodnie z monitami, aby nazwać i utworzyć nową aplikację.

  3. W sekcji Wybierz sposób integracji aplikacji z Facebookiem wybierz sekcję Witryna internetowa .

  4. Wypełnij pole Adres URL witryny przy użyciu adresu URL witryny (na przykład http://www.example.com). Pole Domena jest opcjonalne; Można go użyć do zapewnienia uwierzytelniania dla całej domeny (na przykład example.com).

    Uwaga

    Jeśli uruchamiasz witrynę na komputerze lokalnym z adresem URL, takim jak http://localhost:12345 (gdzie numer jest numerem portu lokalnego), możesz dodać tę wartość do pola Adres URL witryny na potrzeby testowania witryny. Jednak w dowolnym momencie zmiany numeru portu witryny lokalnej należy zaktualizować pole Adres URL witryny aplikacji.

  5. Wybierz przycisk Zapisz zmiany .

  6. Wybierz ponownie kartę Aplikacje , a następnie wyświetl stronę początkową aplikacji.

  7. Skopiuj wartości Identyfikator aplikacji i Wpis tajny aplikacji i wklej je do tymczasowego pliku tekstowego. Te wartości zostaną przekazane do dostawcy serwisu Facebook w kodzie witryny internetowej.

  8. Zamknij witrynę dla deweloperów serwisu Facebook.

Teraz wprowadzisz zmiany na dwóch stronach w witrynie internetowej, aby użytkownicy mogli logować się do witryny przy użyciu ich kont na Facebooku.

  1. Utwórz lub otwórz witrynę stron sieci Web ASP.NET opartą na szablonie witryny początkowej programu WebMatrix.

  2. Otwórz stronę _AppStart.cshtml i usuń komentarz dla dostawcy protokołu OAuth usługi Facebook. Blok kodu bez komentarza wygląda następująco:

    OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");

  3. Skopiuj wartość Identyfikator aplikacji z aplikacji Facebook jako wartość appId parametru (wewnątrz cudzysłowu).

  4. Skopiuj wartość wpisu tajnego aplikacji z aplikacji Facebook jako wartość parametru appSecret .

  5. Zapisz i zamknij plik.

Testowanie logowania do serwisu Facebook

  1. Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .

  2. Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz ikonę Serwisu Facebook .

    Strona internetowa przekierowuje żądanie do strony logowania do serwisu Facebook.

    oauth-2

  3. Zaloguj się do konta na Facebooku.

    Kod używa tokenu serwisu Facebook do uwierzytelnienia Użytkownika, a następnie wraca do strony, na której możesz skojarzyć swoje logowanie do serwisu Facebook przy użyciu logowania do witryny. Nazwa użytkownika lub adres e-mail są wypełnione w polu Email w formularzu.

    Zrzut ekranu przedstawiający stronę Rejestrowanie konta.

  4. Wybierz przycisk Skojarz .

    Przeglądarka powraca do strony głównej i jest zalogowana.

Włączanie identyfikatorów logowania w usłudze Twitter

  1. Przejdź do witryny deweloperów usługi Twitter.

  2. Wybierz link Utwórz aplikację , a następnie zaloguj się do witryny.

  3. W formularzu Tworzenie aplikacji wypełnij pola Nazwa i Opis .

  4. W polu Witryna sieci Web wprowadź adres URL witryny (na przykład http://www.example.com).

    Uwaga

    Jeśli testujesz witrynę lokalnie (przy użyciu adresu URL takiego jak http://localhost:12345), usługa Twitter może nie zaakceptować adresu URL. Można jednak użyć lokalnego adresu IP sprzężenia zwrotnego (na przykład http://127.0.0.1:12345). Upraszcza to proces testowania aplikacji lokalnie. Jednak za każdym razem, gdy numer portu witryny lokalnej ulegnie zmianie, należy zaktualizować pole Witryny sieci Web aplikacji.

  5. W polu Adres URL wywołania zwrotnego wprowadź adres URL strony w witrynie internetowej, do której użytkownicy mają powrócić po zalogowaniu się do usługi Twitter. Aby na przykład wysłać użytkowników do strony głównej witryny początkowej (która rozpozna ich stan logowania), wprowadź ten sam adres URL wprowadzony w polu WebSite .

  6. Zaakceptuj warunki i wybierz przycisk Utwórz aplikację usługi Twitter .

  7. Na stronie docelowej Moje aplikacje wybierz utworzoną aplikację.

  8. Na karcie Szczegóły przewiń do dołu i wybierz przycisk Utwórz mój token dostępu .

  9. Na karcie Szczegóły skopiuj wartości Klucz konsumenta i Klucz tajny konsumenta dla aplikacji i wklej je do tymczasowego pliku tekstowego. Te wartości zostaną przekazane do dostawcy usługi Twitter w kodzie witryny internetowej.

  10. Zamknij witrynę twitterową.

Teraz wprowadzisz zmiany na dwóch stronach w witrynie internetowej, aby użytkownicy mogli logować się do witryny przy użyciu kont w serwisie Twitter.

  1. Utwórz lub otwórz witrynę ASP.NET Web Pages opartą na szablonie witryny startowej programu WebMatrix.

  2. Otwórz stronę _AppStart.cshtml i usuń komentarz z kodu dostawcy protokołu OAuth w usłudze Twitter. Blok kodu bez komentarza wygląda następująco:

    OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");

  3. Skopiuj wartość Klucz klienta z aplikacji Twitter jako wartość parametru consumerKey (wewnątrz cudzysłowu).

  4. Skopiuj wartość Consumer Secret z aplikacji Twitter jako wartość parametru consumerSecret .

  5. Zapisz i zamknij plik.

Testowanie logowania w usłudze Twitter

  1. Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .

  2. Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz ikonę Twitter .

    Strona internetowa przekierowuje żądanie do strony logowania usługi Twitter dla utworzonej aplikacji.

    oauth-4

  3. Zaloguj się do konta w serwisie Twitter.

  4. Kod używa tokenu Twitter do uwierzytelniania użytkownika, a następnie zwraca Cię do strony, na której można skojarzyć identyfikator logowania z kontem witryny internetowej. Twoje imię i nazwisko lub adres e-mail są wypełniane w polu Email w formularzu.

    Zrzut ekranu przedstawiający stronę rejestracji konta.

  5. Wybierz przycisk Skojarz .

    Przeglądarka powróci do strony głównej i użytkownik jest zalogowany.

Dodatkowe zasoby