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

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

이 자습서의 코드 예제에서는 이전 페이지에서 만든 샘플 ASP.NET Core 3.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 3.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

  • AspNetCore NuGet 패키지를 프로젝트에 추가 합니다.Add the Microsoft.AspNetCore.Authentication.Facebook NuGet package to the project.

  • 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. Facebook 계정이 있으면 지침에 따라 Facebook 개발자로 등록 합니다.Once you have a Facebook account, follow the instructions to register as a Facebook Developer.

  • 내 앱 메뉴에서 앱 만들기 를 선택 하 여 새 앱 ID를 만듭니다.From the My Apps menu select Create App to create a new App ID.

    Microsoft Edge에서 오픈 개발자 용 Facebook 포털

  • 양식을 작성 하 고 앱 ID 만들기 단추를 탭 합니다.Fill out the form and tap the Create App ID button.

    새 앱 ID 양식 만들기

  • 새 앱 카드에서 제품 추가 를 선택 합니다.On the new App card, select Add a Product . Facebook 로그인 카드에서 설정 을 클릭 합니다.On the Facebook Login card, click Set Up

    제품 설정 페이지

  • 첫 번째 페이지로 플랫폼을 선택 하 여 빠른 시작 마법사가 시작 됩니다.The Quickstart wizard launches with Choose a Platform as the first page. 왼쪽 아래에 있는 메뉴에서 FaceBook 로그인 설정 링크를 클릭 하 여 이제 마법사를 무시 합니다.Bypass the wizard for now by clicking the FaceBook Login Settings link in the menu on the lower left:

    빠른 시작 건너뛰기

  • 클라이언트 OAuth 설정 페이지가 표시 됩니다.You are presented with the Client OAuth Settings page:

    클라이언트 OAuth 설정 페이지

  • 유효한 OAuth 리디렉션 uri 필드에 /signin-facebook 를 추가 하 여 개발 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. FacebookOptions 클래스의 상속 된 Remoteauthenticationoptions. callbackpath 속성을 통해 Facebook 인증 미들웨어를 구성 하는 동안 기본 콜백 URI를 변경할 수 있습니다.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 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 로그인 설정 페이지를 다시 방문 하 여 새 공용 URI를 등록 해야 합니다.When deploying the site you need to revisit the Facebook Login setup page and register a new public URI.

Facebook 앱 ID 및 암호 저장Store the Facebook app ID and secret

비밀 관리자를 사용 하 여 FACEBOOK 앱 ID 및 비밀 값과 같은 중요 한 설정을 저장 합니다.Store sensitive settings such as the Facebook app ID and secret values with Secret Manager. 이 샘플에서는 다음 단계를 사용 합니다.For this sample, use the following steps:

  1. 비밀 저장소 사용의 지침에 따라 비밀 저장소에 대 한 프로젝트를 초기화 합니다.Initialize the project for secret storage per the instructions at Enable secret storage.

  2. 비밀 키 및를 사용 하 여 로컬 비밀 저장소에 중요 한 설정을 저장 합니다 Authentication:Facebook:AppId Authentication:Facebook:AppSecret .Store the sensitive settings in the local secret store with the secret keys Authentication:Facebook:AppId and Authentication:Facebook:AppSecret:

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

: 구분 기호는 모든 플랫폼의 환경 변수 계층적 키에서 작동하지 않습니다.The : separator doesn't work with environment variable hierarchical keys on all platforms. 이중 밑줄 __은 다음과 같습니다.__, the double underscore, is:

  • 모든 플랫폼에서 지원됩니다.Supported by all platforms. 예를 들어 : 구분 기호는 Bash에서 지원되지 않지만 __은 지원됩니다.For example, the : separator is not supported by Bash, but __ is.
  • 자동으로 :으로 대체Automatically replaced by a :

Facebook 인증 구성Configure Facebook Authentication

ConfigureServices Startup.cs 파일의 메서드에 Facebook 서비스를 추가 합니다.Add the Facebook service in the ConfigureServices method in the Startup.cs file:

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

Addauthentication (String) 오버 로드는 defaultscheme 속성을 설정 합니다.The AddAuthentication(String) overload sets the DefaultScheme property. Addauthentication (Action<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.

Facebook으로 로그인Sign in with Facebook

  • 앱을 실행 하 고 로그인 을 선택 합니다.Run the app and select Log in .
  • 다른 서비스를 사용 하 여 로그인 에서 Facebook을 선택 합니다.Under Use another service to log in. , select Facebook.
  • 인증을 위해 Facebook 으로 리디렉션됩니다.You are redirected to Facebook for authentication.
  • Facebook 자격 증명을 입력 합니다.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:

외부 로그인 권한 부여 취소에 대응React to cancel authorize external sign-in

AccessDeniedPath 사용자가 요청 된 권한 부여 요청을 승인 하지 않은 경우에서 사용자 에이전트에 대 한 리디렉션 경로를 제공할 수 있습니다.AccessDeniedPath can provide a redirect path to the user agent when the user doesn't approve the requested authorization demand.

다음 코드에서는 AccessDeniedPath 를로 설정 합니다 "/AccessDeniedPathInfo" .The following code sets the AccessDeniedPath to "/AccessDeniedPathInfo":

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

AccessDeniedPath페이지에 다음 정보를 포함 하는 것이 좋습니다.We recommend the AccessDeniedPath page contain the following information:

  • 원격 인증을 취소 했습니다.Remote authentication was canceled.
  • 이 앱에는 인증이 필요 합니다.This app requires authentication.
  • 다시 로그인을 시도 하려면 로그인 링크를 선택 합니다.To try sign-in again, select the Login link.

테스트 AccessDeniedPathTest AccessDeniedPath

  • Facebook.com 로 이동 합니다.Navigate to facebook.com
  • 로그인 한 경우 로그 아웃 해야 합니다.If you are signed in, you must sign out.
  • 앱을 실행 하 고 Facebook 로그인을 선택 합니다.Run the app and select Facebook sign-in.
  • 지금 안 함 을 선택 합니다.Select Not now . 지정 된 AccessDeniedPath 페이지로 리디렉션됩니다.You are redirected to the specified AccessDeniedPath page.

프록시 또는 부하 분산 장치를 사용하여 요청 정보 전달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 구성.

여러 인증 공급자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 => { ... });

Facebook 인증에서 지 원하는 구성 옵션에 대 한 자세한 내용은 FacebookOptions 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.

문제 해결Troubleshooting

  • ASP.NET Core 2.x에만 해당: Identity 에서를 호출 하 여가 구성 되지 않은 경우 services.AddIdentity ConfigureServices 인증을 시도 하면 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:AppId Authentication: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.