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

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

코드 예제를 사용 하 여이 자습서에서 만든 샘플 ASP.NET Core 2.0 프로젝트를 사용 하 여 Facebook 계정으로 로그인 사용자가 사용 하도록 설정 하는 방법을 보여 줍니다 합니다 이전 페이지합니다.This tutorial with code examples shows 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 앱 ID를 만드는 것으로 시작 합니다 공식 단계합니다.We start by creating a Facebook App ID by following the official steps.

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

  • 로 이동 합니다 Facebook 개발자 앱 페이지 하 고 로그인 합니다.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 양식 만들기

  • 제품을 선택 페이지에서 클릭 설정Facebook 로그인 카드.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.

참고

URI /signin-facebook Facebook 인증 공급자의 기본 콜백으로 설정 됩니다.The URI /signin-facebook is set as the default callback of the Facebook authentication provider. 상속 된 통해 Facebook 인증 미들웨어를 구성 하는 동안 기본 콜백 URI를 변경할 수 있습니다 RemoteAuthenticationOptions.CallbackPath 의 속성을 FacebookOptions 클래스입니다.You can change the default callback URI while configuring the Facebook authentication middleware via the inherited RemoteAuthenticationOptions.CallbackPath property of the FacebookOptions class.

  • 클릭 변경 내용을 저장합니다.Click Save Changes.

  • 클릭 설정을 > 기본 왼쪽된 탐색 창에서 링크 합니다.Click Settings > Basic link in the left navigation.

    이 페이지에서는 기록해 하 App IDApp 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 로그인 페이지를 설정 하 고 새 공용 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 ID 하 고 App 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.

환경 변수에서 계층적 키를 사용할 경우 일부 플랫폼에서 콜론 구분 기호(:)가 작동하지 않을 수 있습니다(예: Bash).When working with hierarchical keys in environment variables, a colon separator (:) may not work on all platforms (for example, Bash). 두 개의 밑줄(__)은 모든 플랫폼에서 지원되며 콜론으로 바뀝니다.A double underscore (__) is supported by all platforms and is replaced by a colon.

안전 하 게 저장 하려면 다음 명령을 실행 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.AddDefaultIdentity<IdentityUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>();

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

에 대 한 호출 AddDefaultIdentity 기본 체계 설정을 구성 합니다.The call to AddDefaultIdentity 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.

여러 인증 공급자Multiple authentication providers

앱에 여러 공급자가 필요한 경우 AddAuthentication 뒤에 공급자 확장 메서드를 연결합니다.When the app requires multiple providers, chain the provider extension methods behind AddAuthentication:

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

설치 합니다 Microsoft.AspNetCore.Authentication.Facebook 패키지 있습니다.Install the Microsoft.AspNetCore.Authentication.Facebook package.

  • Visual Studio 2017을 사용 하 여이 패키지를 설치 하려면 마우스 오른쪽 단추로 클릭 프로젝트를 마우스 NuGet 패키지 관리합니다.To install this package with Visual Studio 2017, right-click on the project and select Manage NuGet Packages.

  • .NET Core CLI를 설치 하려면 프로젝트 디렉터리에서 다음을 실행 합니다.To install with .NET Core CLI, execute the following in your project directory:

    dotnet add package Microsoft.AspNetCore.Authentication.Facebook

Facebook 미들웨어를 추가 합니다 Configure 의 메서드 Startup.cs 파일:Add the Facebook middleware in the Configure method in Startup.cs file:

app.UseFacebookAuthentication(new FacebookOptions()
{
    AppId = Configuration["Authentication:Facebook:AppId"],
    AppSecret = Configuration["Authentication:Facebook:AppSecret"]
});

참조 된 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:

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

프록시 또는 부하 분산 장치를 사용하여 요청 정보 전달Forward request information with a proxy or load balancer

앱이 프록시 서버 또는 부하 분산 장치 뒤에 배포되는 경우 원래 요청 정보의 일부가 요청 헤더로 앱에 전달될 수 있습니다.If the app is deployed behind a proxy server or load balancer, some of the original request information might be forwarded to the app in request headers. 이 정보에는 일반적으로 보안 요청 체계(https), 호스트 및 클라이언트 IP 주소가 포함됩니다.This information usually includes the secure request scheme (https), host, and client IP address. 앱은 원래 요청 정보를 검색 및 사용하기 위해 이 요청 헤더를 자동으로 읽지 않습니다.Apps don't automatically read these request headers to discover and use the original request information.

이 체계는 외부 공급자의 인증 흐름에 영향을 주는 링크 생성에 사용됩니다.The scheme is used in link generation that affects the authentication flow with external providers. 보안 체계(https)가 손실되면 앱이 잘못되고 안전하지 않은 리디렉션 URL을 생성합니다.Losing the secure scheme (https) results in the app generating incorrect insecure redirect URLs.

전달된 헤더 미들웨어를 사용하여 요청 처리를 위한 원본 요청 정보를 앱에 제공합니다.Use Forwarded Headers Middleware to make the original request information available to the app for request processing.

자세한 내용은 프록시 서버 및 부하 분산 장치를 사용하도록 ASP.NET Core 구성을 참조하세요.For more information, see 프록시 서버 및 부하 분산 장치를 사용하도록 ASP.NET Core 구성.

문제 해결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

  • 추가 된 Microsoft.AspNetCore.Authentication.Facebook 고급 Facebook 인증 시나리오에 대 한 프로젝트에 NuGet 패키지.Add the Microsoft.AspNetCore.Authentication.Facebook NuGet package to your project for advanced Facebook authentication scenarios. 이 패키지에 앱을 사용 하 여 Facebook 외부 로그인 기능을 통합 필요는 없습니다.This package isn't required to integrate Facebook external login functionality with your app.

  • 이 문서에서는 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 portal에서 응용 프로그램 설정 합니다.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.