login register Sysop! about ME  
qrcode
    최초 작성일 :    2017년 03월 30일
  최종 수정일 :    2017년 03월 30일
  작성자 :    soggun
  편집자 :    soggun (송원석)
  읽음수 :    3,731

강좌 목록으로 돌아가기

필자의 잡담~

이번 컬럼은 ASP.NET Core 인증 관련 강좌 중에서 Google 계정으로 인증하는 방법에 대한 글입니다.

모든 컬럼은 http://docs.asp.net의 내용을 참고하여 번역한 것입니다. Windows 뿐만 아니라 Linxu, OS X에서도 동작하는 완전한 크로스 플랫폼 서버기술인 ASP.NET Core! 기대해 주세요.

본 번역문서는 개인적인 취지로 번역되어 제공되는 문서로, 원문을 비롯한 모든 저작권은 마이크로소프트사에 있습니다. 마이크로소프트사의 요청이 있을 경우, 언제라도 게시가 중단될 수 있습니다. 본 번역문서에는 오역이 포함되어 있을 수 있으며 주석도 번역자 개인의 견해일뿐입니다. 마이크로소프트사는 본 문서의 번역된 내용에 대해 일체의 보장을 하지 않습니다. 번역이 완료된 뒤에도 제품이 업그레이드 되거나 기능이 변경됨에 따라 원문도 변경되거나 보완되었을 수 있으므로 참고하시기 바랍니다.

원문: https://docs.microsoft.com/ko-kr/aspnet/core/security/authentication/social/google-logins

Google 인증 구성하기

본문에서는 사용자가 자신의 Google+ 계정으로 이전 문서에서 생성한 예제 ASP.NET Core 프로젝트에 로그인 할 수 있도록 구성하는 방법을 살펴봅니다. 먼저 공식 과정에 따라 Google API Console에서 새로운 앱을 생성합니다.

Google API Console에서 앱 생성하기

  • 그러면 API 관리자(API Manager)라이브러리(Library) 페이지로 재지정됩니다:

  • 프로젝트 만들기(Create a project) 버튼을 누르고 응용 프로그램 이름을 입력합니다:

  • 대화 상자를 완료하면, 새로운 응용 프로그램의 기능을 선택하기 위해서 다시 라이브러리(Library) 페이지로 이동하게 됩니다. 목록에서 Google+ API 항목을 찾은 다음, 그 링크를 클릭해서 API 기능을 추가합니다:

  • 그러면 다시 새로 추가된 API에 대한 페이지가 나타납니다. 사용 설정(Enable) 버튼을 눌러서 응용 프로그램의 기능에 Google+ 표시를 추가합니다:

  • API를 활성화시킨 다음, 사용자 인증 정보 만들기(Go to Credentials) 버튼을 눌러서 시크릿을 구성합니다:

  • 각각 다음과 같은 항목을 선택합니다:
    • Google+ API
    • 웹 서버 (예: node.js, Tomcat)(Web server (e.g. node.js, Tomcat))
    • 사용자 데이터(User data):

  • 어떤 사용자 인증 정보가 필요한가요?(What credentials do I need?) 버튼을 눌러서 응용 프로그램 구성의 두 번째 단계로 이동합니다:

  • 한 가지 기능(로그인)만 사용하는 Google+ 프로젝트를 생성하는 중이므로, OAuth 2.0 client ID를 위한 이름(Name) 항목에는 간단히 프로젝트 이름과 동일한 이름을 입력합니다.

  • 기본 URI에 signin-google 세그먼트가 추가된 URI를 승인된 리디렉션 URI(Authorized redirect URIs) 항목에 입력합니다. 가령 https://localhost:44320/signin-google과 같이 말입니다:

    노트 : 테스트를 마치고 실제로 사이트를 배포할 때는 이 항목에 새로운 공개 URL을 등록해야합니다.

    역주 : 2017년 2월 현재, Google은 승인된 리디렉션 URI(Authorized redirect URIs) 항목에 여러 개의 URL을 동시에 등록할 수 있는 기능을 지원합니다.

    노트 : 직접 응용 프로그램에 경로로 signin-google을 구성할 필요는 없습니다. Google 미들웨어가 이 경로에 대한 요청을 자동으로 가로채서 OAuth 흐름을 구현하도록 처리해줍니다.

  • 클라이언트 ID 만들기(Create client ID) 버튼을 누르면 다시 세 번째 단계로 이동합니다:

  • 이메일 주소(Email address) 항목과 사용자에게 표시되는 제품 이름(Product name) 항목에 사용자가 응용 프로그램에 로그인 할 때 Google+ 프롬프트에 출력될 공개 이메일 주소와 제품 이름을 입력합니다.

  • 계속(Continue) 버튼을 눌러서 마지막 단계로 이동합니다:

  • 다운로드(Download) 버튼을 눌러서 응용 프로그램 시크릿이 담긴 JSON 파일을 저장한 다음, 완료(Done) 버튼을 눌러서 새로운 응용 프로그램의 생성을 마칩니다.

Google ClientID 및 ClientSecret 저장하기

이미 소셜 로그인에 대한 소개 페이지에서 설명했던 것처럼, Google의 ClientIDClientSecret 같은 민감한 설정은 응용 프로그램의 구성 파일에 직접 저장하는 것보다는 Secret Manager 도구를 활용해서 응용 프로그램 구성과 연결하는 것이 좋습니다.

  • 위의 마지막 단계에서 다운로드 받은 JSON 파일을 엽니다. JSON 구조에서 client_id 값과 client_secret 값을 찾아서 기억해둡니다.

  • 프로젝트의 작업 디렉터리에서 다음 명령어를 실행하여 Google 시크릿을 저장합니다:

    dotnet user-secrets set Authentication:Google:ClientID <client_id> dotnet user-secrets set Authentication:Google:ClientSecret <client-secret>

다음은 Secret Manager를 통해서 저장된 구성값을 읽는 코드입니다:

public Startup(IHostingEnvironment env)
{
    var builder = new ConfigurationBuilder()
        .SetBasePath(env.ContentRootPath)
        .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
        .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);

    if (env.IsDevelopment())
    {
        // For more details on using the user secret store see http://go.microsoft.com/fwlink/?LinkID=532709
        builder.AddUserSecrets();
    }

    builder.AddEnvironmentVariables();
    Configuration = builder.Build();
}

Google 미들웨어 활성화하기

노트 : 만약 Microsoft.AspNetCore.Authentication.Google 패키지가 설치되어 있지 않다면 NuGet을 이용해서 패키지를 설치하십시오. 또는 프로젝트 디렉터리에서 다음 명령어를 실행하셔도 됩니다:

dotnet install Microsoft.AspNetCore.Authentication.Google

Startup.cs 파일의 Configure 메서드에서 Google 미들웨어를 추가합니다:

app.UseGoogleAuthentication(new GoogleOptions()
{
    ClientId = Configuration["Authentication:Google:ClientId"],
    ClientSecret = Configuration["Authentication:Google:ClientSecret"]
});

노트 : UseGoogleAuthentication 메서드를 호출하기 전에 먼저 UseIdentity 메서드를 호출하시기 바랍니다. 소셜 로그인 소개 페이지를 참고하시기 바랍니다.

Google로 로그인하기

응용 프로그램을 실행하고 Log in을 클릭합니다. 그러면 페이지에서 Google을 통한 로그인 버튼이 제공되는 것을 확인할 수 있습니다:

Google 버튼을 클릭하면 인증을 위해 Google로 재지정됩니다:

Google 자격 증명을 입력하고 나면 이메일을 설정할 수 있는 웹 사이트의 페이지로 다시 재지정됩니다.

이제 Google 자격 증명을 이용해서 로그인을 할 수 있습니다:

노트 : 개발 모드에서 실행 중인 응용 프로그램에서 403 (Forbidden) 오류 페이지가 발생한다면 (혹은 동일한 오류로 인해서 디버거가 중단된다면), 본문의 앞 부분에서 설명한 과정에 따라 API 관리자 라이브러리(API Manager Library) 페이지에서 정상적으로 Google+ API가 활성화되어 있는지 확인하시기 바랍니다. 로그인이 정상적으로 동작하지 않으면서 아무런 오류도 발생하지 않는다면, 개발 모드로 전환하여 문제점을 손쉽게 디버그할 수 있습니다.

후속 과정

  • 본문에서는 Google을 통한 인증 방법을 살펴봤습니다. 비슷한 방법으로 이전 페이지에서 소개한 다른 공급자들을 이용한 인증을 구성할 수 있습니다.

  • 웹 사이트를 Azure 웹 앱에 게시하면 Google API Console에서 Client Secret을 재설정해야 합니다.

  • Authentication:Google:ClientIdAuthentication:Google:ClientSecret은 Azure 포털의 앱 설정에서 구성할 수 있습니다. 환경 변수에서 키를 읽도록 구성 시스템이 설정됩니다.

    노트 : 이 설정을 누락할 경우, Azure 웹 앱에 접근할 때 500 오류가 발생합니다. 다음 그림은 본문의 내용을 테스트하기 위해서 만든 elpTest라는 Azure 웹 앱의 설정 모습을 보다 구체적으로 보여줍니다.


authored by


 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})