ASP.NET Core에서 Facebook 외부 로그인 설정Facebook external login setup in ASP.NET Core

작성자: Valeriy NovytskyyRick AndersonBy Valeriy Novytskyy and Rick Anderson

이 자습서에서 만든 샘플 ASP.NET 코어 2.0 프로젝트를 사용 하 여 들이 Facebook 계정으로 로그인 할 사용자를 활성화 하는 방법을 보여 줍니다.는 이전 페이지합니다.This tutorial shows you how to enable your users to sign in with their Facebook account using a sample ASP.NET Core 2.0 project created on the previous page. Facebook 인증에 필요한는 Microsoft.AspNetCore.Authentication.Facebook NuGet 패키지 합니다.Facebook authentication requires the Microsoft.AspNetCore.Authentication.Facebook NuGet package. Facebook 응용 프로그램 ID에 따라 만들어서 시작는 공식 단계합니다.We start by creating a Facebook App ID by following the official steps.

Facebook에서 앱을 만들Create the app in Facebook

  • 로 이동는 Facebook Developers 앱 페이지 하 고 로그인 합니다.Navigate to the Facebook Developers app page and sign in. Facebook 계정 없는 경우 사용 하 여는 Facebook에 등록 새로 만들려면 로그인 페이지에 링크 합니다.If you don't already have a Facebook account, use the Sign up for Facebook link on the login page to create one.

  • 탭의 새 앱 추가 는 새 응용 프로그램 ID를 만들려면 오른쪽 위 모퉁이의 단추Tap the Add a New App button in the upper right corner to create a new App ID.

    Facebook 개발자 포털에 대 한 Microsoft Edge에서 열기

  • 양식을 작성 하 고 탭는 응용 프로그램 ID 만들기 단추입니다.Fill out the form and tap the Create App ID button.

    새 앱 ID 양식 만들기

  • 제품 선택 페이지에서 클릭 Set UpFacebook 로그인 카드입니다.On the Select a product page, click Set Up on the Facebook Login card.

    제품 설치 페이지

  • 퀵 스타트 마법사가 시작 됩니다 플랫폼 선택 의 첫 번째 페이지입니다.The Quickstart wizard will launch with Choose a Platform as the first page. 마법사를 클릭 하 여 지금은 무시는 설정을 왼쪽 메뉴에서 링크:Bypass the wizard for now by clicking the Settings link in the menu on the left:

    Skip 빠른 시작

  • 표시 되는 클라이언트 OAuth 설정 페이지:You are presented with the Client OAuth Settings page:

클라이언트 OAuth 설정 페이지

  • 개발 URI를 입력으로 /signin-facebook 에 추가 유효한 OAuth 리디렉션 Uri 필드 (예: https://localhost:44320/signin-facebook).Enter your development URI with /signin-facebook appended into the Valid OAuth Redirect URIs field (for example: https://localhost:44320/signin-facebook). 이 자습서의 뒷부분에 나오는 구성 된 Facebook 인증에는 요청을 자동으로 처리할 /signin-facebook OAuth 흐름을 구현 하는 경로입니다.The Facebook authentication configured later in this tutorial will automatically handle requests at /signin-facebook route to implement the OAuth flow.

  • 클릭 ब ा ळ합니다.Click Save Changes.

  • 클릭는 대시보드 왼쪽된 탐색 창에서 링크 합니다.Click the Dashboard link in the left navigation.

    이 페이지에서 적어 프로그램 App ID 하였고 App Secret합니다.On this page, make a note of your App ID and your App Secret. 다음 섹션에서 ASP.NET Core 응용 프로그램에 둘 다를 추가 합니다.You will add both into your ASP.NET Core application in the next section:

    Facebook 개발자 대시보드

  • 다시 방문 해야 하는 사이트를 배포 하는 경우는 Facebook 로그인 페이지를 설치 하 고 새 공용 URI를 등록 합니다.When deploying the site you need to revisit the Facebook Login setup page and register a new public URI.

Facebook 응용 프로그램 ID 및 응용 프로그램 암호 저장Store Facebook App ID and App Secret

Facebook와 같은 중요 한 설정이 연결 App IDApp Secret 사용 하 여 응용 프로그램 구성에는 암호 관리자합니다.Link sensitive settings like Facebook App ID and App Secret to your application configuration using the Secret Manager. 이 자습서에서는 이름을 토큰 Authentication:Facebook:AppIdAuthentication:Facebook:AppSecret합니다.For the purposes of this tutorial, name the tokens Authentication:Facebook:AppId and Authentication:Facebook:AppSecret.

안전 하 게 저장 하려면 다음 명령을 실행 App IDApp Secret 암호 관리자를 사용 하 여:Execute the following commands to securely store App ID and App Secret using Secret Manager:

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

Facebook 인증 구성Configure Facebook Authentication

Facebook 서비스에 추가 된 ConfigureServices 에서 메서드는 Startup.cs 파일:Add the Facebook service in the ConfigureServices method in the Startup.cs file:

services.AddIdentity<ApplicationUser, IdentityRole>()
        .AddEntityFrameworkStores<ApplicationDbContext>()
        .AddDefaultTokenProviders();

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

에 대 한 호출 AddIdentity 기본 체계 설정을 구성 합니다.The call to AddIdentity configures the default scheme settings. AddAuthentication(String) 집합 오버 로드는 DefaultScheme 속성입니다.The AddAuthentication(String) overload sets the DefaultScheme property. AddAuthentication (동작<AuthenticationOptions>) 오버 로드는 다양 한 용도 대 한 기본 인증 체계를 설정 하는 데 사용할 수 있는 인증 옵션을 구성할 수 있습니다.The AddAuthentication(Action<AuthenticationOptions>) overload allows configuring authentication options, which can be used to set up default authentication schemes for different purposes. 에 대 한 후속 호출 AddAuthentication 이전에 구성 된 재정의 AuthenticationOptions 속성입니다.Subsequent calls to AddAuthentication override previously configured AuthenticationOptions properties.

AuthenticationBuilder 인증 처리기를 등록 하는 확장 메서드를 호출할 수 있습니다 한 번 인증 체계 별로 합니다.AuthenticationBuilder extension methods that register an authentication handler may only be called once per authentication scheme. 오버 로드가 있는 구성표 속성, 스키마 이름, 구성을 허용 하 고 표시 이름입니다.Overloads exist that allow configuring the scheme properties, scheme name, and display name.

참조는 FacebookOptions Facebook 인증에서 지 원하는 구성 옵션에 대 한 자세한 내용은 API 참조 합니다.See the FacebookOptions API reference for more information on configuration options supported by Facebook authentication. 구성 옵션을 사용할 수 있습니다.Configuration options can be used to:

  • 사용자에 대 한 다른 정보를 요청 합니다.Request different information about the user.
  • 로그인 환경을 사용자 지정 하는 쿼리 문자열 인수를 추가 합니다.Add query string arguments to customize the login experience.

Facebook으로 로그인Sign in with Facebook

응용 프로그램을 실행 하 고 클릭 로그인합니다.Run your application and click Log in. Facebook으로 로그인 하는 옵션이 표시 됩니다.You see an option to sign in with Facebook.

웹 응용 프로그램: 인증 되지 않은 사용자

클릭 Facebook, 인증에 대 한 Facebook으로 리디렉션됩니다.When you click on Facebook, you are redirected to Facebook for authentication:

Facebook 인증 페이지

기본적으로 공개 프로필 및 전자 메일 주소를 요청 하는 Facebook 인증:Facebook authentication requests public profile and email address by default:

Facebook 인증 페이지

Facebook 사용자의 자격 증명을 입력 하면 사용자의 전자 메일을 설정할 수 있는 사이트로 다시 리디렉션됩니다.Once you enter your Facebook credentials you are redirected back to your site where you can set your email.

이제 Facebook 자격 증명을 사용 하 여 로그인:You are now logged in using your Facebook credentials:

웹 응용 프로그램: 인증 된 사용자

문제 해결Troubleshooting

  • ASP.NET Core 2.x만: 경우 Identity를 호출 하 여 구성 되지 않았습니다 services.AddIdentityConfigureServices, 인증을 시도 하면 ArgumentException: 'SignInScheme' 옵션을 제공 해야합니다.ASP.NET Core 2.x only: If Identity isn't configured by calling services.AddIdentity in ConfigureServices, attempting to authenticate will result in ArgumentException: The 'SignInScheme' option must be provided. 이 자습서에 사용 된 프로젝트 템플릿을 확인이 수행 되도록 합니다.The project template used in this tutorial ensures that this is done.
  • 사이트 데이터베이스 초기 마이그레이션을 적용 하 여 생성 되지 않은 경우 메시지가 요청을 처리 하는 동안 데이터베이스 작업이 실패 했습니다 오류입니다.If the site database has not been created by applying the initial migration, you get A database operation failed while processing the request error. 적용 마이그레이션 는 데이터베이스를 만들고 오류 지 나 새로 고침 합니다.Tap Apply Migrations to create the database and refresh to continue past the error.

다음 단계Next steps

  • 이 문서를 Facebook 인증 방법에 대해 살펴보았습니다.This article showed how you can authenticate with Facebook. 이와 비슷한 방식에 제시 된 다른 공급자를 사용 하 여 인증을 따를 수 있습니다는 이전 페이지합니다.You can follow a similar approach to authenticate with other providers listed on the previous page.

  • 다시 설정 해야 Azure 웹 앱에 웹 사이트를 게시 한 후의 AppSecret Facebook 개발자 포털에 있습니다.Once you publish your web site to Azure web app, you should reset the AppSecret in the Facebook developer portal.

  • 설정의 Authentication:Facebook:AppIdAuthentication:Facebook:AppSecret Azure 포털에서 응용 프로그램 설정으로 합니다.Set the Authentication:Facebook:AppId and Authentication:Facebook:AppSecret as application settings in the Azure portal. 구성 시스템 환경 변수에서 키를 읽을 수 설정 됩니다.The configuration system is set up to read keys from environment variables.