Konfiguracja logowania zewnętrznego serwisu Facebook w programie ASP.NET Core

Autorzy: Valeriy Novytskyy i Rick Anderson

W tym samouczku z przykładami kodu pokazano, jak umożliwić użytkownikom logowanie się przy użyciu konta w serwisie Facebook przy użyciu przykładowego projektu ASP.NET Core utworzonego na poprzedniej stronie. Zaczynamy od utworzenia identyfikatora aplikacji facebook, wykonując oficjalne kroki.

Tworzenie aplikacji w serwisie Facebook

  • Dodaj pakiet NuGet Microsoft.AspNetCore.Authentication.Facebook do projektu.

  • Przejdź do strony aplikacji Facebook Developers i zaloguj się. Jeśli nie masz jeszcze konta na Facebooku, użyj linku Zarejestruj się na Facebooku na stronie logowania, aby je utworzyć. Po utworzeniu konta w serwisie Facebook postępuj zgodnie z instrukcjami, aby zarejestrować się jako deweloper serwisu Facebook.

  • W menu Moje aplikacje wybierz pozycję Utwórz aplikację. Zostanie wyświetlony formularz Tworzenie aplikacji . Facebook for developers portal open in Microsoft Edge

  • Wybierz typ aplikacji, który najlepiej pasuje do projektu. W tym projekcie wybierz pozycję Konsument, a następnie przycisk Dalej. Zostanie utworzony nowy identyfikator aplikacji.

  • Wypełnij formularz i naciśnij przycisk Utwórz aplikację.

    Create a New App ID form

  • Na stronie Dodawanie produktów do aplikacji wybierz pozycję Skonfiguruj na karcie Logowanie na Facebooku.

    Product Setup page

  • Kreator Szybkiego startu zostanie uruchomiony z pozycją Wybierz platformę jako pierwszą stronę. Pomiń kreatora na razie, klikając link Login elementu FaceBook Ustawienia w menu w lewym dolnym rogu:

    Skip Quick Start

  • Zostanie wyświetlona strona Ustawienia OAuth klienta:

    Client OAuth Settings page

  • Wprowadź identyfikator URI programowania z ciągiem /signin-facebook dołączonym do pola Prawidłowe identyfikatory URI przekierowania protokołu OAuth (na przykład: https://localhost:44320/signin-facebook). Uwierzytelnianie w serwisie Facebook skonfigurowane w dalszej części tego samouczka będzie automatycznie obsługiwać żądania na trasie /signin-facebook w celu zaimplementowania przepływu OAuth.

Uwaga

Identyfikator URI /signin-facebook jest ustawiony jako domyślne wywołanie zwrotne dostawcy uwierzytelniania w serwisie Facebook. Domyślny identyfikator URI wywołania zwrotnego można zmienić podczas konfigurowania oprogramowania pośredniczącego uwierzytelniania serwisu Facebook za pośrednictwem dziedziczonej RemoteAuthenticationOptions.CallbackPathFacebookOptions właściwości klasy.

  • Wybierz Zapisz zmiany.

  • Wybierz link Ustawienia> Basic w obszarze nawigacji po lewej stronie.

  • Zanotuj element App ID i twój App Secret. Oba te elementy zostaną dodane do aplikacji ASP.NET Core w następnej sekcji:

  • Podczas wdrażania witryny należy ponownie przejrzeć stronę konfiguracji logowania do serwisu Facebook i zarejestrować nowy publiczny identyfikator URI.

Przechowywanie identyfikatora aplikacji i wpisu tajnego serwisu Facebook

Przechowuj poufne ustawienia, takie jak identyfikator aplikacji Facebook i wartości wpisów tajnych za pomocą usługi Secret Manager. W tym przykładzie wykonaj następujące czynności:

  1. Zainicjuj projekt magazynu wpisów tajnych zgodnie z instrukcjami w artykule Włączanie magazynu wpisów tajnych.

  2. Zapisz ustawienia poufne w lokalnym magazynie wpisów tajnych przy użyciu kluczy Authentication:Facebook:AppId tajnych i Authentication:Facebook:AppSecret:

    dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
    dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-secret>"
    

Separator : nie współdziała z kluczami hierarchicznymi zmiennych środowiskowych na wszystkich platformach. Symbol __ (podwójne podkreślenie):

  • Jest obsługiwany przez wszystkie platformy. Na przykład separator : nie jest obsługiwany przez powłokę Bash, a separator __ jest.
  • Jest automatycznie zastępowany przez :

Konfigurowanie uwierzytelniania w usłudze Facebook

Dodaj usługę uwierzytelniania do elementu Startup.ConfigureServices:

services.AddAuthentication().AddFacebook(facebookOptions =>
{
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

Dodaj usługę uwierzytelniania do elementu Program:

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddFacebook(facebookOptions =>
    {
        facebookOptions.AppId = configuration["Authentication:Facebook:AppId"];
        facebookOptions.AppSecret = configuration["Authentication:Facebook:AppSecret"];
    });

Przeciążenie AddAuthentication(IServiceCollection, String) ustawia DefaultScheme właściwość . Przeciążenie AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) umożliwia konfigurowanie opcji uwierzytelniania, które mogą służyć do konfigurowania domyślnych schematów uwierzytelniania w różnych celach. Kolejne wywołania AddAuthentication przesłonięcia wcześniej skonfigurowanych AuthenticationOptions właściwości.

AuthenticationBuilder metody rozszerzeń rejestrujące procedurę obsługi uwierzytelniania mogą być wywoływane tylko raz dla schematu uwierzytelniania. Istnieją przeciążenia, które umożliwiają konfigurowanie właściwości schematu, nazwy schematu i nazwy wyświetlanej.

Logowanie się przy użyciu serwisu Facebook

  • Uruchom aplikację i wybierz pozycję Zaloguj się.
  • W obszarze Użyj innej usługi do logowania wybierz pozycję Facebook.
  • Nastąpi przekierowanie do serwisu Facebook w celu uwierzytelnienia.
  • Wprowadź poświadczenia serwisu Facebook.
  • Nastąpi przekierowanie z powrotem do witryny, w której można ustawić adres e-mail.

Teraz logujesz się przy użyciu poświadczeń serwisu Facebook:

Reagowanie na anulowanie autoryzowania logowania zewnętrznego

AccessDeniedPath program może podać ścieżkę przekierowania do agenta użytkownika, gdy użytkownik nie zatwierdzi żądanego żądania autoryzacji.

Poniższy kod ustawia wartość na wartość AccessDeniedPath"/AccessDeniedPathInfo":

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

Zalecamy, aby AccessDeniedPath strona zawierała następujące informacje:

  • Uwierzytelnianie zdalne zostało anulowane.
  • Ta aplikacja wymaga uwierzytelniania.
  • Aby ponownie spróbować zalogować się, wybierz link Zaloguj się.

Test AccessDeniedPath

  • Przejdź do facebook.com
  • Jeśli się zalogowałeś, musisz się wylogować.
  • Uruchom aplikację i wybierz pozycję Logowanie w serwisie Facebook.
  • Wybierz pozycję Nie teraz. Nastąpi przekierowanie do określonej AccessDeniedPath strony.

Przekazywanie dalej informacji o żądaniu za pomocą serwera proxy lub modułu równoważenia obciążenia

Jeśli aplikacja jest wdrażana za serwerem proxy lub modułem równoważenia obciążenia, niektóre z pierwotnych informacji o żądaniu mogą zostać przekazane dalej do aplikacji w nagłówkach żądania. Te informacje zazwyczaj obejmują bezpieczny schemat żądań (https), hosta i adres IP klienta. Aplikacje nie odczytują automatycznie tych nagłówków żądań, aby odnaleźć pierwotne informacje o żądaniu i z nich korzystać.

Schemat jest używany do generowania linków, które mają wpływ na przepływ uwierzytelniania przy użyciu zewnętrznych dostawców. W wyniku utraty bezpiecznego schematu (https) aplikacja generuje nieprawidłowe niezabezpieczone adresy URL przekierowania.

Użyj oprogramowania pośredniczącego przekazanych nagłówków, aby udostępnić pierwotne informacje o żądaniu do aplikacji w celu przetworzenia żądania.

Aby uzyskać więcej informacji, zobacz Konfigurowanie platformy ASP.NET Core pod kątem pracy z serwerami proxy i modułami równoważenia obciążenia.

Wielu dostawców uwierzytelniania

Gdy aplikacja wymaga wielu dostawców, należy połączyć metody rozszerzenia dostawcy za :AddAuthentication

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Aby uzyskać więcej informacji na temat opcji konfiguracji obsługiwanych przez uwierzytelnianie w serwisie Facebook, zobacz dokumentację interfejsu FacebookOptions API. Opcje konfiguracji mogą służyć do:

  • Zażądaj różnych informacji o użytkowniku.
  • Dodaj argumenty ciągu zapytania, aby dostosować środowisko logowania.

Rozwiązywanie problemów

  • tylko ASP.NET Core 2.x: jeśli Identity nie skonfigurowano przez wywołanie services.AddIdentity metody w ConfigureServicesprogramie , próba uwierzytelnienia spowoduje wyświetlenie argumentuException: należy podać opcję "SignInScheme". Szablon projektu używany w tym samouczku gwarantuje, że zostało to zrobione.
  • Jeśli baza danych lokacji nie została utworzona przez zastosowanie migracji początkowej, operacja bazy danych nie powiodła się podczas przetwarzania błędu żądania . Naciśnij pozycję Zastosuj migracje , aby utworzyć bazę danych i odświeżyć, aby kontynuować wklejenie błędu.

Następne kroki

  • W tym artykule pokazano, jak można uwierzytelnić się w usłudze Facebook. Możesz stosować podobne podejście do uwierzytelniania z innymi dostawcami wymienionymi na poprzedniej stronie.

  • Po opublikowaniu witryny internetowej w aplikacji internetowej platformy Azure należy zresetować ją AppSecret w portalu deweloperów serwisu Facebook.

  • Authentication:Facebook:AppId Ustaw wartości i Authentication:Facebook:AppSecret jako ustawienia aplikacji w witrynie Azure Portal. System konfiguracji jest skonfigurowany do odczytu kluczy ze zmiennych środowiskowych.