페이스북 계정 연동에 대해서 지난번에 설명드렸는데요.

페이스북(Facebook) 계정으로 로그인하는 C# 웹 사이트 제작
; https://www.sysnet.pe.kr/2/0/953

테스트하다 보니 재미있는 현상이 하나 나왔습니다.

1. A 컴퓨터에서 "로그인 상태 유지"로 로그인
2. B 컴퓨터에서 같은 계정으로 "로그인 상태 유지"로 로그인
3. A, B 컴퓨터 모두 웹 브라우저 종료
4. A 컴퓨터에서 "로그 아웃"
5. B 컴퓨터에서 웹 브라우저를 띄우고 페이스북 계정 연동 사이트 방문

위와 같이 하면, A 컴퓨터에서는 다시 로그인 과정을 밟아서 계정 연동이 되는 반면, B 컴퓨터에서는 기존에 남아 있던 "fbs_[AppId]" 쿠키 값으로 인해 '자동 로그인'이 시도되고 이미 A 컴퓨터에서 로그아웃을 해버려서 액세스 토큰이 유효하지 않게 되어 무조건 다음과 같은 오류 창으로 넘어가게 됩니다. (실제로 B 컴퓨터에는 "alert(document.cookie)"로 확인을 하면 이전의 쿠키값이 살아 있는 것을 볼 수 있습니다.)





아마도 같은 계정에 대해서 여러 대의 PC에서 로그인을 하는 것에 대해 페이스북 서버 측에서 "Acces Token"에 대한 정상적인 관리가 안되는 듯 싶습니다.

어떡할까? 고민하다가,,, 이런 문제를 방지하기 위해 로그인 시도를 할 때 기존에 설정된 "fbs_[App Id]" 쿠키 값을 지우고 로그인 창을 띄우는 식으로 방향을 잡았습니다. 이렇게 하려면 "<fb:login-button />"을 그냥 사용하는 것은 무리가 있었습니다.

그래서, 다음과 같이 페이스북 로그인 이미지를 대신하고,

<img style="cursor: pointer" onclick="fb_Login()" src="login-button.png" />

로그인 과정을 하는 자바스크립트를 직접 작성했습니다.

<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="javascript" type="text/javascript">
    FB.init({ appId: [Your App ID], status: false, cookie: true, xfbml: true });

    function fb_Login() {
        document.cookie = "fbs_[Your App ID]=;"; // 쿠키를 제거해 주고,
        FB.login(function (response) {  // 페이스북 로그인 창을 띄웁니다.
            if (response.session) {
                // 로그인 상태로 판정될 때 실행되는 코드
            } else {
                // 로그아웃 상태로 판정될 때 실행되는 코드
            }
        }, { perms: 'email,user_website' });  // fb:login-button의 perms 속성으로 지정된 값 나열
    }
</script>

아쉬운 점은, 쿠키값이 클라이언트에서 자바 스크립트로 해제되긴 하지만, 웬일인지 FB.login 버튼으로 실행되는 창에 곧바로 반영되지 않았습니다. 그래서 이렇게 클라이언트 측에서 처리를 하게 되면 반드시 한번의 redirection을 거쳐야만 한 번 더 로그인 시도를 했을 때 정상적으로 동작하게 되는 단점이 있습니다.

이런 상황을 좀 더 매끄럽게 해결하려면 서버 측에서 판단하는 코드를 넣어주어야 하는데요.
가만히 보니까, 위와 같이 "Invalid OAuth 2.0 Access Token" 상태의 fbs_ 쿠키값을 가지고 Facebook.FacebookAPI.Get 메서드를 호출하게 되면 다음과 같은 예외가 발생하였습니다.

Server Error: Facebook.FacebookAPIException: The remote server returned an error: (400) Bad Request. 
    at Facebook.FacebookAPI.MakeRequest(Uri url, HttpVerb httpVerb, Dictionary`2 args) in D:\...\FacebookAPI.cs:line 194 
    at Facebook.FacebookAPI.Call(String relativePath, HttpVerb httpVerb, Dictionary`2 args) in D:\...\FacebookAPI.cs:line 132 
    at Facebook.FacebookAPI.Get(String relativePath) in D:\...\FacebookAPI.cs:line 69 
    at TestAPI.test.CheckFacebookLogin() in D:\...\test.ascx.cs:line 219 

그래서, 아예 서버 측에서 다음과 같이 쿠키를 제거하는 코드를 넣어주니 모든 것이 잘 해결되었습니다.

try
{
    me = api.Get("/me");
}
catch (Facebook.FacebookAPIException fbEx)
{
    if (Request.Cookies["fbs_" + ApplicationId] != null)
    {
        HttpCookie fbsCookie = new HttpCookie("fbs_" + ApplicationId);
        fbsCookie.Expires = DateTime.Now.AddDays(-1);
        Response.Cookies.Add(fbsCookie);
    }
}

위와 같이 처리를 하게 되면, 실제로 페이스북 서버 문제로 "400 bad request"가 발생했을 때 조차도 로그 아웃이 되어버리는 (흔치 않는) 문제가 있겠지만, 그래도 클라이언트 측 스크립트에서의 두 번 재시도 로그인 처리보다는 나은 것 같습니다.

암튼, 페이스북 서버 측 코드를 알 수 없어 정확한 분석을 하기는 힘들지만, 일단은 위와 같이 처리를 해주니 현재는 문제없이 페이스북 로그인 계정 연동이 되고 있습니다. (어쨌든, 실제 적용하면서 느낀 건데, 페이스북의 SSO 기능이 그다지 매끄럽지는 않은 것 같습니다.)

---

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

[최초 등록일: 12/8/2010]
[최종 수정일: 6/19/2021]


이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

by SeongTae Jeong, mailto:techsharer at outlook.com