ASP.NET Core를 사용 하 여 외부 로그인 설치 twitterTwitter external sign-in setup with ASP.NET Core

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

이 샘플에서는 사용자가 사용 하도록 설정 하는 방법을 보여 줍니다 Twitter 계정으로 로그인 에서 만든 샘플 ASP.NET Core 2.2 프로젝트를 사용 하 여 이전 페이지합니다.This sample shows how to enable users to sign in with their Twitter account using a sample ASP.NET Core 2.2 project created on the previous page.

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

  • 이동할 https://apps.twitter.com/ 에 로그인 합니다.Navigate to https://apps.twitter.com/ and sign in. Twitter 계정에 아직 없는 경우 사용 합니다 지금 등록 만들려면 링크 합니다.If you don't already have a Twitter account, use the Sign up now link to create one.

  • Create New App 응용 프로그램을 작성 하 고 이름설명을 및 공용 웹 사이트 (두 일 수 있는 때까지 URI 등록 된 도메인 이름):Tap Create New App and fill out the application Name, Description and public Website URI (this can be temporary until you register the domain name):

  • 개발 URI를 입력으로 /signin-twitter 에 추가 합니다 유효한 OAuth 리디렉션 Uri 필드 (예를 들어: https://webapp128.azurewebsites.net/signin-twitter).Enter your development URI with /signin-twitter appended into the Valid OAuth Redirect URIs field (for example: https://webapp128.azurewebsites.net/signin-twitter). 이 샘플의 뒷부분에 나오는 구성 된 Twitter 인증 체계에서 요청을 자동으로 처리 됩니다 /signin-twitter OAuth 흐름을 구현 하는 경로입니다.The Twitter authentication scheme configured later in this sample will automatically handle requests at /signin-twitter route to implement the OAuth flow.

    참고

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

  • 폼의 나머지 부분을 입력 하 고 탭 Twitter 응용 프로그램을 만드는합니다.Fill out the rest of the form and tap Create your Twitter application. 새 응용 프로그램 세부 정보가 표시 됩니다.New application details are displayed:

Twitter 소비자 API 키 및 암호를 저장합니다.Storing Twitter Consumer API key and secret

안전 하 게 저장 하려면 다음 명령을 실행 ClientId 하 고 ClientSecret 사용 하 여 암호 관리자:Run the following commands to securely store ClientId and ClientSecret using Secret Manager:

dotnet user-secrets set Authentication:Twitter:ConsumerAPIKey <Key>
dotnet user-secrets set Authentication:Twitter:ConsumerAPISecret <Secret>

Twitter와 같은 중요 한 설정이 연결 Consumer Key 하 고 Consumer Secret 사용 하 여 응용 프로그램 구성에는 암호 관리자합니다.Link sensitive settings like Twitter Consumer Key and Consumer Secret to your application configuration using the Secret Manager. 이 샘플에서는 토큰 이름을 Authentication:Twitter:ConsumerKeyAuthentication:Twitter:ConsumerSecret입니다.For the purposes of this sample, name the tokens Authentication:Twitter:ConsumerKey and Authentication:Twitter:ConsumerSecret.

이러한 토큰을 찾을 수 있습니다 합니다 Keys and Access Tokens 새 Twitter 응용 프로그램을 만든 후 탭:These tokens can be found on the Keys and Access Tokens tab after creating a new Twitter application:

Twitter 인증 구성Configure Twitter Authentication

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

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>();

    services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
    });

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

에 대 한 호출 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 => { ... });

참조 된 TwitterOptions Twitter 인증에서 지 원하는 구성 옵션에 대 한 자세한 내용은 API 참조.See the TwitterOptions API reference for more information on configuration options supported by Twitter authentication. 이 사용 하 여 사용자에 대 한 다른 정보를 요청할 수 수 있습니다.This can be used to request different information about the user.

Sign in with TwitterSign in with Twitter

앱을 실행 하 고 선택 로그인합니다.Run the app and select Log in. Twitter 로그인 하는 옵션이 표시 됩니다.An option to sign in with Twitter appears:

클릭할 Twitter 인증에 대 한 Twitter에 리디렉션합니다.Clicking on Twitter redirects to Twitter for authentication:

Twitter 자격 증명을 입력 한 후 전자 메일을 설정할 수 있는 웹 사이트로 다시 리디렉션됩니다.After entering your Twitter credentials, you are redirected back to the web site where you can set your email.

이제 Twitter 자격 증명을 사용 하 여 로그인 됩니다.You are now logged in using your Twitter 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 sample ensures that this is done.
  • 사이트 데이터베이스를 초기 마이그레이션을 적용 하 여 만들어지지 않은, 경우 받습니다 요청을 처리 하는 동안 데이터베이스 작업이 실패 했습니다. 오류입니다.If the site database has not been created by applying the initial migration, you will 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

  • 이 문서에서는 Twitter를 사용 하 여 인증 하는 방법에 대해 설명 했습니다.This article showed how you can authenticate with Twitter. 에 나열 된 다른 공급자를 사용 하 여 인증 하는 유사한 방법을 따를 수 있습니다 합니다 이전 페이지합니다.You can follow a similar approach to authenticate with other providers listed on the previous page.

  • 다시 설정 해야 Azure 웹 앱에 웹 사이트를 게시 하면는 ConsumerSecret Twitter 개발자 포털에서 합니다.Once you publish your web site to Azure web app, you should reset the ConsumerSecret in the Twitter developer portal.

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