ASP.NET Core로 Twitter 외부 로그인 설정

  • 아티클

작성자: Valeriy Novytskyy 및 Rick Anderson

이 샘플에서는 사용자들이 이전 페이지에서 생성한 샘플 ASP.NET Core 프로젝트를 사용하여 Twitter 계정을 통해 로그인할 수 있도록 하는 방법을 보여줍니다.

참고 항목

아래에 설명된 Microsoft.AspNetCore.Authentication.Twitter 패키지는 Twitter에서 제공하는 OAuth 1a API를 사용합니다. Twitter는 이후 다른 기능성을 가지는 OAuth 2 API를 추가한 바 있습니다. AspNet.Security.OAuth.Twitter는 새로운 OAuth 2 API를 사용하는 커뮤니티 구현 패키지입니다.

Twitter에서 앱 만들기

  • Microsoft.AspNetCore.Authentication.Twitter NuGet 패키지를 프로젝트에 추가합니다.

  • Twitter 개발자 포털 대시보드로 이동하여 로그인합니다. Twitter 계정이 아직 없는 경우 지금 가입 링크를 사용하여 계정을 만듭니다.

  • 프로젝트가 없는 경우 새로 생성합니다.

  • +앱 추가를 선택합니다. 앱 이름을 입력한 다음 생성된 API 키, API 키 비밀번호 및 전달자 토큰을 기록합니다. 나중에 필요합니다.

  • 앱 설정 페이지의 인증 설정 섹션에서 편집을 선택한 다음, 다음을 수행합니다.

    • 3레그 OAuth 활성화
    • 사용자의 전자 메일 주소 요청
    • 필수 필드를 입력하고 사용을 선택합니다.

    참고 항목

    기본적으로 Microsoft.AspNetCore.Identity에서는 사용자에게 전자 메일 주소가 있어야 합니다. 개발 중 콜백 URL의 경우에는 {PORT} 자리 표시자가 앱 포트에 해당하게 되는 https://localhost:{PORT}/signin-twitter를 사용합니다.

    참고 항목

    URI 세그먼트 /signin-twitter는 Twitter 인증 공급자의 기본 콜백으로 설정됩니다. 클래스의 상속된 속성을 통해 Twitter 인증 미들웨어를 구성하는 동안 기본 콜백 URI를 RemoteAuthenticationOptions.CallbackPathTwitterOptions 변경할 수 있습니다.

Twitter 소비자 API 키 및 비밀 저장

비밀 관리자를 사용하여 Twitter 소비자 API 키 및 비밀과 같은 중요한 설정을 저장합니다. 이 샘플의 경우 다음 단계를 사용합니다.

  1. 비밀 스토리지 사용의 지침에 따라 비밀 스토리지에 대한 프로젝트를 초기화합니다.

  2. 비밀 키 Authentication:Twitter:ConsumerKey 및 Authentication:Twitter:ConsumerSecret이 포함된 로컬 비밀 저장소에 중요한 설정을 저장합니다.

    dotnet user-secrets set "Authentication:Twitter:ConsumerAPIKey" "<consumer-api-key>"
dotnet user-secrets set "Authentication:Twitter:ConsumerSecret" "<consumer-secret>"

: 구분 기호는 모든 플랫폼의 환경 변수 계층적 키에서 작동하지 않습니다. 이중 밑줄 __은 다음과 같습니다.

  • 모든 플랫폼에서 지원됩니다. 예를 들어 : 구분 기호는 Bash에서 지원되지 않지만 __은 지원됩니다.
  • 자동으로 :으로 대체

이러한 토큰은 새 Twitter 애플리케이션을 만든 후에 키 및 액세스 토큰 탭에서 찾을 수 있습니다.

Twitter 인증 구성

인증 서비스를 Startup.ConfigureServices에 추가합니다.

{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>(options =>
        options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddRazorPages();

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

}

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

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

오버로드는 AddAuthentication(IServiceCollection, String) 속성을 설정합니다 DefaultScheme . AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) 오버로드를 통해 인증 옵션을 설정할 수 있으며, 이로서 다양한 용도를 위해 기본 인증 체계를 설정할 수 있습니다. 이전에 구성된 AuthenticationOptions 속성을 재정의하기 위한 AddAuthentication 후속 호출입니다.

AuthenticationBuilder 인증 처리기를 등록하는 확장 메서드는 인증 체계당 한 번만 호출할 수 있습니다. 구성표 속성, 구성표 이름 및 표시 이름을 구성할 수 있는 오버로드가 있습니다.

여러 인증 공급자

앱에서 여러 공급자가 필요한 경우, AddAuthentication 아래에서 공급자 확장 메서드를 연결합니다.

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

Google 인증에서 지원하는 구성 옵션에 대한 자세한 내용은 TwitterOptions API 참조를 확인하세요. 사용자에 대한 다른 정보를 요청하는 데 사용할 수 있습니다.

Twitter로 로그인

앱을 실행하고 로그인을 선택합니다. Twitter로 로그인할 수 있는 옵션이 나타납니다.

Twitter를 클릭하면 인증을 위해 Twitter로 리디렉션됩니다.

Twitter 자격 증명을 입력하면 이메일을 설정할 수 있는 웹 사이트로 다시 리디렉션됩니다.

이제 Twitter 자격 증명을 사용하여 로그인합니다.

프록시 또는 부하 분산 장치를 사용하여 요청 정보 전달

앱이 프록시 서버 또는 부하 분산 장치 뒤에 배포되는 경우 원래 요청 정보의 일부가 요청 헤더로 앱에 전달될 수 있습니다. 이 정보에는 일반적으로 보안 요청 체계(https), 호스트 및 클라이언트 IP 주소가 포함됩니다. 앱은 원래 요청 정보를 검색 및 사용하기 위해 이 요청 헤더를 자동으로 읽지 않습니다.

이 체계는 외부 공급자의 인증 흐름에 영향을 주는 링크 생성에 사용됩니다. 보안 체계(https)가 손실되면 앱이 잘못되고 안전하지 않은 리디렉션 URL을 생성합니다.

전달된 헤더 미들웨어를 사용하여 요청 처리를 위한 원본 요청 정보를 앱에 제공합니다.

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

문제 해결

  • ASP.NET Core 2.x만 해당:ConfigureServices에서 services.AddIdentity를 호출하여 Identity를 구성하지 않은 경우 인증을 시도하면 ArgumentException: ‘SignInScheme’ 옵션을 제공해야 함이라고 표시됩니다. 이 샘플에서 사용되는 프로젝트 템플릿은 Identity가 설정되도록 보장합니다.
  • 초기 마이그레이션을 적용하여 사이트 데이터베이스를 만들지 않은 경우 요청을 처리하는 동안 데이터베이스 작업이 실패했습니다 오류가 표시됩니다. 마이그레이션 적용을 탭하여 데이터베이스를 만들고 새로 고쳐 오류를 무시하고 계속합니다.

다음 단계

  • 이 문서에서는 Twitter로 인증할 수 있는 방법을 살펴보았습니다. 비슷한 방식을 따라 이전 페이지에 나열된 다른 공급자로 인증할 수 있습니다.

  • Azure 웹앱에 웹 사이트를 게시한 후에는 Twitter 개발자 포털에서 ConsumerSecret을 다시 설정해야 합니다.

  • Azure Portal에서 Authentication:Twitter:ConsumerKey 및 Authentication:Twitter:ConsumerSecret을 애플리케이션 설정으로 설정합니다. 구성 시스템은 환경 변수에서 키를 읽도록 설정됩니다.