Microsoft MVP성태의 닷넷 이야기
닷넷: 2260. C# - Google 로그인 연동 (ASP.NET 예제) [링크 복사], [링크+제목 복사],
조회: 9191
글쓴 사람
정성태 (seongtaejeong at gmail.com)
홈페이지
첨부 파일
(연관된 글이 1개 있습니다.)

C# - Google 로그인 연동 (ASP.NET 예제)

이에 대해서는 구글 측에서 자세한 문서를 제공하고 있습니다.

API Client Libraries - .NET
; https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth?hl=ko

다른 OAuth 연동과 마찬가지로 사이트를 위한 인증 키를 발급받아야 하는데요, 아래의 Google Cloud 콘솔 페이지에서,

Google API 콘솔
; https://console.cloud.google.com/?hl=ko

"API 및 서비스" / "사용자 인증 정보"와 "OAuth 동의 화면"을 거쳐 진행할 수 있습니다. 관련해서 다음의 글에서 자세하게 소개하고 있으니 따라 하시면 됩니다.

구글로그인 쉽게 구현하기 1편 - Google Developers 설정
; https://notspoon.tistory.com/45

이후 코드는 아래의 글에서 예제까지 제공하고 있는데요,

OAuth 2.0
; https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth?hl=ko

2개의 예제 코드는 각각 Console Application과 ASP.NET Core를 기준으로 작성돼 있습니다. 만약 그 2가지 유형이라면 해당 예제를 적용해 쉽게 구현할 수 있는데요, 만약 기존의 ASP.NET (.NET Framework) 환경이라면 조금 손을 봐야 합니다.

이대로 끝내면 아쉬우니 ^^ ASP.NET용으로 직접 작성해 볼까요?

우선, ASP.NET (.NET Framework) WebForms 프로젝트를 만들어 nuget 참조를 추가하고,

Install-Package Google.Apis.Auth 

임의의 페이지에 다음과 같이 (독립 실행형 응용 프로그램을 위한 용도의) GoogleWebAuthorizationBroker.AuthorizeAsync 호출을 하면,

/* client_secrets.json 파일의 내용
{
    "web": {
        "client_id": "...[여러분이 받은 ID]...",
        "client_secret": "...[여러분이 받은 Client Secret]...",
    }
}
*/

namespace WebApplication1
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string path = Server.MapPath("~");
            string jsonPath = Path.Combine(path, "bin", "client_secrets.json");
            string[] scopes = new string[] { "https://www.googleapis.com/auth/userinfo.email" };

            using (var stream = new FileStream(jsonPath, FileMode.Open, FileAccess.Read))
            {
                var secrets = GoogleClientSecrets.FromStream(stream).Secrets;

                // async 메서드 내에서는 await 호출을 하겠지만, 이 예제에서는 Result 호출로 동기 처리
                var results = GoogleWebAuthorizationBroker.AuthorizeAsync(
                                secrets, scopes, "user", CancellationToken.None, null).Result;
            }
        }
    }
}

이런 오류 화면으로 redirect 됩니다.

Access blocked: This app's request is invalid

testuser@gmail.com

You can't sign in because this app sent an invalid request. You can try again later, or contact the developer about this issue. Learn more about this error
If you are a developer of this app, see error details.
Error 400: redirect_uri_mismatch

위의 메시지 중 "error details" 링크를 누르면 좀 더 자세한 내용이 나오지만,

Error 400: redirect_uri_mismatch

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.
Request details: redirect_uri=http://localhost:58434/authorize/
Related developer documentation

딱히 도움이 되지는 않습니다. redirect_uri_mismatch 오류 상황은 사용자가 (Google Cloud 콘솔 페이지에서) 설정한 redirect 링크와 맞지 않아서 발생할 수 있습니다. 하지만, 그 링크를 설정했는데도 불구하고 (ASP.NET의 경우라면) 저 오류는 여전히 해결이 안 될 텐데요, 왜냐하면 GoogleWebAuthorizationBroker.AuthorizeAsync API 자체가 인증을 위한 요청 URL에 redirect_uri 파트를 json 파일의 내용으로부터 가져오지 않기 때문입니다. (위의 오류 메시지에 "http://localhost:58434/authorize/"로 설정했다고 나옵니다.)

실제로 AuthorizeAsync의 첫 번째 인자에 들어가는 secrets는 ClientSecrets 타입으로,

namespace Google.Apis.Auth.OAuth2
{
    public sealed class ClientSecrets
    {
        [Newtonsoft.Json.JsonProperty("client_id")]
        public string ClientId { get; set; }

        [Newtonsoft.Json.JsonProperty("client_secret")]
        public string ClientSecret { get; set; }
    }
}

redirect uri 정보가 없는 client_id, client_secret만 조합해서 인증 요청을 시도할 뿐입니다.

따라서, .NET Framework 환경의 ASP.NET 환경에서는 인증 요청에 대한 URL을 직접 작성해야 하는데요, 다행히 이미 Google.Apis.Auth
패키지에는 GoogleAuthorizationCodeFlow 타입이 이런 과정을 자동화합니다. 아래의 코드를 보면, redirect URI 정보까지 모두 포함시켜 GoogleAuthorizationCodeFlow.CreateAuthorizationCodeRequest 메서드를 호출해 인증 요청을 위한 URL을 구하는 것을 보여줍니다.

protected void Page_Load(object sender, EventArgs e)
{
    string path = Server.MapPath("~");
    string jsonPath = Path.Combine(path, "bin", "client_secrets.json");
    string[] scopes = new string[] { "https://www.googleapis.com/auth/userinfo.email" };

    using (var stream = new FileStream(jsonPath, FileMode.Open, FileAccess.Read))
    {
        var clientSecrets = GoogleClientSecrets.FromStream(stream).Secrets;
        var initializer = new GoogleAuthorizationCodeFlow.Initializer
        {
            ClientSecrets = clientSecrets,
            Scopes = scopes
        };
        var googleAuthorizationCodeFlow = new GoogleAuthorizationCodeFlow(initializer);
        var request = googleAuthorizationCodeFlow.CreateAuthorizationCodeRequest(
            "http://localhost:53745/loginProcess.aspx"); // redirect uri 설정
        Uri uri = request.Build();

        string authRequestUrl = uri.ToString();
        Response.Redirect(authRequestUrl);
    }
}

authRequestUrl에 들어가는 값은 대충 이런 구조입니다.

https://accounts.google.com/o/oauth2/v2/auth?
    access_type=offline&
    response_type=code&
    client_id=...[oauth client id]...&
    redirect_uri=http%3A%2F%2F127.0.0.1%3A53745%2FloginProcess.aspx&
    scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile

원하는 값들이 잘 들어가 있습니다. 마지막의 Response.Redirect는 그렇게 작성한 URL로 사용자 웹 브라우저 화면을 전환시켜 Google 인증 페이지로 넘어갈 수 있게 합니다.

이후, 사용자가 구글 인증을 마치면 CreateAuthorizationCodeRequest 메서드로 넘겨준 redirect URL, 위의 경우 "http://127.0.0.1:53745/loginProcess.aspx"로 다시 rediect가 발생합니다.

그럼 loginProcess.aspx에는 대충 다음과 같은 식으로 요청이 들어오고, 이 정보로부터 Token을 가져오는 작업을 진행하면 되는데요,

/loginProcess?
    code=...[access token을 구하기 위한 값]...&
    scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&
    authuser=0&
    prompt=consent

여기서 쓸모 있는 것은 code 하나입니다. 이 값을 이용해 GoogleAuthorizationCodeFlow.ExchangeCodeForTokenAsync API를 다시 호출하면 TokenResponse를 구할 수 있습니다.

public partial class loginProcess : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string code = Request.QueryString["code"];
        string path = Server.MapPath("~");
        string jsonPath = Path.Combine(path, "bin", "client_secrets.json");

        using (var stream = new FileStream(jsonPath, FileMode.Open, FileAccess.Read))
        {
            var clientSecrets = GoogleClientSecrets.FromStream(stream).Secrets;
            var initializer = new GoogleAuthorizationCodeFlow.Initializer
            {
                ClientSecrets = clientSecrets,
            };

            var flow = new GoogleAuthorizationCodeFlow(initializer);
            
            string rediect_uri = "http://localhost:53745/loginProcess.aspx";
            var tokenResponse = flow.ExchangeCodeForTokenAsync(null, code,
                rediect_uri, CancellationToken.None).Result;

            string accessToken = tokenResponse.AccessToken;
        }
    }
}

TokenResponse에는 access_token, token_type,... 등의 값이 있지만 이전에 CreateAuthorizationCodeRequest를 요청했을 시 지정했던 "Scope"에 해당하는 정보까지 포함한 IdToken 값을 JWT(Json Web Token) 인코딩된 유형으로 가지고 있습니다.

따라서, IdToken을 JWT 디코딩하면 되는데요, 이런 목적으로 GoogleJsonWebSignature.ValidateAsync 메서드를 호출할 수 있습니다.

var idToken = GoogleJsonWebSignature.ValidateAsync(tokenResponse.IdToken).Result;

string email = idToken.Email;
string name = idToken.Name;
string first_name = idToken.FamilyName;
string last_name = idToken.GivenName;
string id = idToken.Subject;

제가 운영하는 sysnet 개인 블로그처럼 단순히 로그인 처리만 하는 경우라면 accessToken을 보관할 필요는 없습니다. 필요한 것은, 사용자를 구분하기 위한 idToken.Subject 값 정도인데요, 따라서 이것을 FormsAuthentication.SetAuthCookie로 지정해 로그인했다는 기록만을 남기면 됩니다.

FormsAuthentication.SetAuthCookie(id, true);




부가적으로, 인증을 위한 redirect 중에 유지할 필요가 있는 정보가 있다면 (Facebook 인증에서도 동일했던) state를 설정할 수 있습니다.

RFC 6749 - The OAuth 2.0 Authorization Framework
 - 4.1.1.  Authorization Request
; https://www.rfc-editor.org/rfc/rfc6749#section-4.1.1

예를 들어, 위의 예제에서 loginProcess.aspx 내부의 코드를 거친 후, (로그인을 시도하기 전에) 사용자가 방문했던 그 페이지를 보여주는 것이 더 자연스러울 것입니다.

따라서 이런 경우에는 그 페이지 주소, 또는 그 페이지로 갈 수 있는 정보를 state 쿼리 인자로 넘겨주면 되는데요,

var googleAuthorizationCodeFlow = new GoogleAuthorizationCodeFlow(initializer);
var request = googleAuthorizationCodeFlow.CreateAuthorizationCodeRequest(
    "http://localhost:53745/loginProcess.aspx" // redirect_uri에는 부가적인 매개 변수를 넘길 수 없으므로,
    );
Uri uri = request.Build();

string authRequestUrl = uri.ToString();
Response.Redirect(authRequestUrl + "&state=test1 test2"); // 별도의 state 매개 변수로 넘겨줍니다.

또는, Google.Apis.Auth를 사용하는 위의 예제에서는 GoogleAuthorizationCodeFlow.Initializer에서 UserDefinedQueryParams를 통해 전달하는 것도 가능합니다.

var clientSecrets = GoogleClientSecrets.FromStream(stream).Secrets;
var initializer = new GoogleAuthorizationCodeFlow.Initializer
{
    ClientSecrets = clientSecrets,
    Scopes = scopes,
    UserDefinedQueryParams = new Dictionary<string, string>
    {
        ["state"] = "test1 test2",
    }
};

var googleAuthorizationCodeFlow = new GoogleAuthorizationCodeFlow(initializer);
var request = googleAuthorizationCodeFlow.CreateAuthorizationCodeRequest(
    "http://localhost:53745/loginProcess.aspx"
    );
Uri uri = request.Build(); // 이 시점에 "state=test1 test2"가 함께 URL에 포함됨

(첨부 파일은 이 글의 예제 코드를 포함합니다.)




그런데 이상하군요, 위의 예제를 다른 컴퓨터에서, 동일하게 Windows 11 + Edge + Visual Studio로 실행했는데, 한 컴퓨터에서만 구글 로그인 이후 다음과 같은 오류가 발생합니다.

Couldn't sign you in

This browser or app may not be secure. Learn more
Try using a different browser. If you're already using a supported browser, you can try again to sign in.

반면 Chrome 브라우저를 띄워 "localhost:53745"로 접속해 테스트를 했더니 정상적으로 로그인이 됩니다. 이유는, "Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)" 설정이 켜져 있었던 탓에,

Visual Studio가 node.exe를 경유해 Edge.exe를 띄우는 경우
; https://www.sysnet.pe.kr/2/0/13620

제약이 많은 edge 브라우저가 실행돼 "This browser or app may not be secure"라는 오류가 발생한 것입니다.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]






[최초 등록일: ]
[최종 수정일: 5/11/2024]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




1  [2]  3  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13893정성태2/27/20252197Linux: 115. eBPF (bpf2go) - ARRAY / HASH map 기본 사용법
13892정성태2/24/20252946닷넷: 2325. C# - PowerShell과 연동하는 방법파일 다운로드1
13891정성태2/23/20252489닷넷: 2324. C# - 프로세스의 성능 카운터용 인스턴스 이름을 구하는 방법파일 다운로드1
13890정성태2/21/20252304닷넷: 2323. C# - 프로세스 메모리 중 Private Working Set 크기를 구하는 방법(Win32 API)파일 다운로드1
13889정성태2/20/20253024닷넷: 2322. C# - 프로세스 메모리 중 Private Working Set 크기를 구하는 방법(성능 카운터, WMI) [1]파일 다운로드1
13888정성태2/17/20252469닷넷: 2321. Blazor에서 발생할 수 있는 async void 메서드의 부작용
13887정성태2/17/20253056닷넷: 2320. Blazor의 razor 페이지에서 code-behind 파일로 코드를 분리 및 DI 사용법
13886정성태2/15/20252565VS.NET IDE: 196. Visual Studio - Code-behind처럼 cs 파일을 그룹핑하는 방법
13885정성태2/14/20253219닷넷: 2319. ASP.NET Core Web API / Razor 페이지에서 발생할 수 있는 async void 메서드의 부작용
13884정성태2/13/20253489닷넷: 2318. C# - (async Task가 아닌) async void 사용 시의 부작용파일 다운로드1
13883정성태2/12/20253241닷넷: 2317. C# - Memory Mapped I/O를 이용한 PCI Configuration Space 정보 열람파일 다운로드1
13882정성태2/10/20252564스크립트: 70. 파이썬 - oracledb 패키지 연동 시 Thin / Thick 모드
13881정성태2/7/20252815닷넷: 2316. C# - Port I/O를 이용한 PCI Configuration Space 정보 열람파일 다운로드1
13880정성태2/5/20253155오류 유형: 947. sshd - Failed to start OpenSSH server daemon.
13879정성태2/5/20253374오류 유형: 946. Ubuntu - N: Updating from such a repository can't be done securely, and is therefore disabled by default.
13878정성태2/3/20253169오류 유형: 945. Windows - 최대 절전 모드 시 DRIVER_POWER_STATE_FAILURE 발생 (pacer.sys)
13877정성태1/25/20253222닷넷: 2315. C# - PCI 장치 열거 (레지스트리, SetupAPI)파일 다운로드1
13876정성태1/25/20253678닷넷: 2314. C# - ProcessStartInfo 타입의 Arguments와 ArgumentList파일 다운로드1
13875정성태1/24/20253123스크립트: 69. 파이썬 - multiprocessing 패키지의 spawn 모드로 동작하는 uvicorn의 workers
13874정성태1/24/20253528스크립트: 68. 파이썬 - multiprocessing Pool의 기본 프로세스 시작 모드(spawn, fork)
13873정성태1/23/20252954디버깅 기술: 217. WinDbg - PCI 장치 열거파일 다운로드1
13872정성태1/23/20252867오류 유형: 944. WinDbg - 원격 커널 디버깅이 연결은 되지만 Break (Ctrl + Break) 키를 눌러도 멈추지 않는 현상
13871정성태1/22/20253280Windows: 278. Windows - 윈도우를 다른 모니터 화면으로 이동시키는 단축키 (Window + Shift + 화살표)
13870정성태1/18/20253718개발 환경 구성: 741. WinDbg - 네트워크 커널 디버깅이 가능한 NIC 카드 지원 확대
13869정성태1/18/20253444개발 환경 구성: 740. WinDbg - _NT_SYMBOL_PATH 환경 변수에 설정한 경로로 심벌 파일을 다운로드하지 않는 경우
13868정성태1/17/20253096Windows: 277. Hyper-V - Windows 11 VM의 Enhanced Session 모드로 로그인을 할 수 없는 문제
1  [2]  3  4  5  6  7  8  9  10  11  12  13  14  15  ...