태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


* 최근 SNS와 웹사이트를 연동하는 일들이 많아지면서, 많은 사이트들이 페이스북 로그인과 연동을 하고 있다. 페이스북에서 어떻게 로그인 연동을 해야 하는지 한번 알아보자.



* 자바스크립트 SDK를 이용한 페이스북 로그인

: 페이스북 앱들은 동작하는 장비나 프로젝트에 따라서 몇 가지의 로그인 단계를 거치게 된다. 이번에는 웹앱에서 로그인하는 단계를 한단계씩 알아볼 것이다. 여기서는 웹사이트인 경우 페이스북에서 추천하는 로그인 방식인 페이스북에서 제공하는 자바스크립트 SDK를 사용해서 페이스북 로그인을 할 것이다. 만약 자바스크립트 SDK를 사용하지 못하는 상황이라면 페이스북에서 제공하는 별도의 로그인 절차를 수동적으로 생성해야 할 것이다.



* 빠른 시작

: 일단 먼저 어떻게 구현해야 하는지 빠르게 훑어본 다음 하나씩 천천히 세부적으로 살펴볼 것이다. 이는 페이스북 로그인을 기존의 시스템에 있는 로그인과 연동하여 구현하고자 할 때 도움이 될 것이다. 그 전에 페이스북 로그인에서는 아주 적은 양의 코드로 로그인 구현이 가능하다는 것을 보여주고자 한다.


: 먼저 SDK를 사용하기 전에 페이스북 앱ID가 필요하다. 이것은 페이스북의 앱 대쉬보드에서 신청이 가능하다. 


https://developers.facebook.com/apps/


: 만약 앱이 없다면 위의 사이트에서 신규로 가입하고, 전화를 인증 받은 다음 앱을 생성하면 된다.







: 아래의 소스 코드는 자바스크립트 SDK를 HTML 페이지에서 초기화하는 방법이다.이 때에 위에서 신청하여 나온 앱의 ID를 쓰면 된다.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // response 객체는 현재 로그인 상태를 나타내는 정보를 보여준다. 
    // 앱에서 현재의 로그인 상태에 따라 동작하면 된다.
    // FB.getLoginStatus().의 레퍼런스에서 더 자세한 내용이 참조 가능하다.
    if (response.status === 'connected') {
      // 페이스북을 통해서 로그인이 되어있다.
      testAPI();
    } else if (response.status === 'not_authorized') {
      // 페이스북에는 로그인 했으나, 앱에는 로그인이 되어있지 않다.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      // 페이스북에 로그인이 되어있지 않다. 따라서, 앱에 로그인이 되어있는지 여부가 불확실하다.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }

  // 이 함수는 누군가가 로그인 버튼에 대한 처리가 끝났을 때 호출된다.
  // onlogin 핸들러를 아래와 같이 첨부하면 된다.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {
  FB.init({
    appId      : '{앱 ID}',
    cookie     : true,  // 쿠키가 세션을 참조할 수 있도록 허용
    xfbml      : true,  // 소셜 플러그인이 있으면 처리
    version    : 'v2.1' // 버전 2.1 사용
  });

  // 자바스크립트 SDK를 초기화 했으니, FB.getLoginStatus()를 호출한다.
  //.이 함수는 이 페이지의 사용자가 현재 로그인 되어있는 상태 3가지 중 하나를 콜백에 리턴한다.
  // 그 3가지 상태는 아래와 같다.
  // 1. 앱과 페이스북에 로그인 되어있다. ('connected')
  // 2. 페이스북에 로그인되어있으나, 앱에는 로그인이 되어있지 않다. ('not_authorized')
  // 3. 페이스북에 로그인이 되어있지 않아서 앱에 로그인이 되었는지 불확실하다.
  //
  // 위에서 구현한 콜백 함수는 이 3가지를 다루도록 되어있다.

    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });

  };

  // SDK를 비동기적으로 호출
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // 로그인이 성공한 다음에는 간단한 그래프API를 호출한다.
  // 이 호출은 statusChangeCallback()에서 이루어진다.
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }
</script>

<!--
  아래는 소셜 플러그인으로 로그인 버튼을 넣는다.
  이 버튼은 자바스크립트 SDK에 그래픽 기반의 로그인 버튼을 넣어서 클릭시 FB.login() 함수를 실행하게 된다.
-->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>


: 사용하는 웹페이지에 위의 HTML을 올려서 테스트를 해보면 된다. 브라우져의 자바스크립트 개발자 도구를 열어서 확인해보면 testAPI()에서 이름을 콘솔에 뿌려주고 있는 것을 확인할 수 있다. 이렇게 구현한 것이 바로 자바스크립트의 기본적인 로그인 페이지를 마친 것이다. 이것을 기반으로 페이스북 로그인과 연동하는 웹 페이지를 개발하여도 좋지만, 기본 동작을 이해한 다음 활용하는 것이 좋을 것이다.



* 자바스크립트 SDK를 활용한 페이스 로그인 단계

: 웹사이트/웹앱에서 페이스북 로그인을 사용하고 통합하기 위해서는 몇개의 단계를 거쳐야 할 것이다. 위의 예에서 거의 다 확인할 수 있지만, 간략하게 이야기한다면 아래와 같다.


1. 로그인 상태 체크하기: 이미 앱에 로그인이 되어있는지 확인하고, 이 사람이 이전에도 앱에 로그인했었는지 체크한다. 

2. 로그인이 되어있지 않다면, 로그인 다이얼로그를 띄우고 데이터 권한을 요청한다.

3. 사용자 인증하기

4. 결과의 access token을 저장하기

5. API 호출하여 사용하기

6. 로그아웃



* 로그인 상태 체크하기

: 첫번째 단계는 웹페이지를 로드할 때 이미 페이스북과 개발한 앱에 로그인했는지 확인해야 한다. 먼저 FB.getLoginStatus 함수를 호출하여 확인할 수 있다. 이 때에 인자로 콜백함수를 받으며, 콜백함수로 현재 접속 상태를 리턴하여 준다. 위의 소스에서 아래의 부분은 바로 페이지의 로드 중에 로그인 여부를 확인하는 부분이다.

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

: response 객체는 아래와 같은 내용을 담고 있다.

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

: 위의 status는 현재 사용자의 로그인 상태를 나타내고 있고, 해당 상태는 아래 중 하나가 될 것이다.


- connected: 현재 사용자가 페이스북과 앱에 함께 로그인 되어있다.

- not_authorized: 사용자가 페이스북에는 로그인 되어있으나, 앱에는 로그인되어 있지 않다.

- unknown: 사용자가 페이스북에 로그인되어있지 않다.


: authResponse는 상태가 connected인 경우 추가로 로그인 정보들을 보여준다. 각 속성은 다음의 내용을 담고 있다.


- accessToken: 사용자가 앱에 접근하는 access token

- expiresIn: UNIX 시간으로 토큰이 만기 되어 재생성이 필요한 시기

- signedRequest: 앱을 사용하는 사용자에 대한 서명된 파라미터 정보

- userID: 앱을 사용하는 사용자의 ID


: 앱에서 일단 사용자의 로그인 상태를 알게 된다면 아래의 동작들을 취할 수 있다.


- 만약 사용자가 페이스북에 로그인되어있다면, 로그인 UX/UI로 사용자를 redirect

- 만약 사용자가 앱이나 페이스북에 로그인되어있지 않다면, FB.login()으로 로그인 다이얼로그를 보여주거나 로그인 버튼을 보여주면 된다.



* 로그인 하기

: 만약 사용자가 앱에 로그인 안 했거나, 페이스북에 로그인을 안 했다면, 로그인 다이얼로그를 띄워서 양쪽에 로그인할 수 있도록 해줄 수 있다. 만약 페이스북에 로그인이 안 되어있다면, 먼저 페이스북에 로그인을 시도한 다음 앱에 로그인을 시도할 것이다. 자바스크립트 SDK에서는 이러한 단계를 자동으로 체크하여 진행을 하니, 개발자가 추가적으로 해야 할 일은 없다.


: 누군가를 로그인 시킬 수 있는 방법은 크게 2가지가 있다.


- 로그인 버튼을 사용하기

- 자바스크립트 SDK를 사용하여 FB.login() 사용하기



* 로그인 버튼 사용하기

: 로그인 버튼을 사용하는 방법은 아주 간단하다. 페이스북 로그인 버튼을 사용하는 것에 대한 문서 아래의 사이트에서 찾을 수 있다. 


https://developers.facebook.com/docs/plugins/login-button


: 위의 사이트에서 나타내고 싶은 버튼의 종류를 설정한 다음 Get Code를 누르면 소스코드를 직접 가져올 수 있다. 위의 예에서는 로그인 버튼을 사용할 때 성공적으로 로그인했는지 확인하기 위한 콜백함수를 onlogin 속성으로 사용하는 것을 확인할 수 있다.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

: 위에서 사용한 예제에서 콜백함수 안에서는 FB.getLoginStatus() 함수를 호출하여 로그인 상태를 확인하게 된다.

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}


* 자바스크립트 SDK로 로그인 다이얼로그 띄우기

: 웹에서 자기의 버튼을 하고 싶은 경우에는 자바스크립트 SDK의 FB.login()을 사용하여 간단하게 페이스북 로그인 다이얼로그를 띄울 수 있다.

FB.login(function(response){
  // response 객체를 처리하면 된다.
});

: 이 함수는 로그인을 하는 팝업 다이얼로그는 띄우게 되므로 사용자가 html button을 눌렀을 때에만 호출되어야 한다. 이렇게 해야 팝업 차단이 안되고 팝업을 띄울 수 있게 되는 것이다.


: FB.login() 함수는 콜백 함수 이외에 추가적인 scope 파라미터를 페이스북에 전달할 수 있는데, 앱에서 사용할 권한의 목록을 콤마(,)로 구분하여 전송하게 된다. 아래는 FB.login()의 이메일 주소와 친구의 목록에 접근하는 권한 함께 요청하게 된다.

 FB.login(function(response) {
   // response 처리
 }, {scope: 'public_profile,email'});



* 로그인 다이얼로그의 결과 다루기

: 이 때에 사용자가 로그인 처리 또는 취소를 하거나, 자기의 정보에 접근하는 것을 허용 또는 취소를 할 수 있을 것이다. 어떠한 선택을 하게 되면, 브라우져에서는 취소 했든지, 로그인에 성공 했든지 일단 웹으로 돌아가게 된다. 이 때에 FB.login()의 함수의 인자로 넘겨준 콜백 함수에 repsonse 객체를 넘겨주게 된다. response는 아래와 같이 처리가 가능하다.

FB.login(function(response) {
  if (response.status === 'connected') {
    // 페이스북과 앱에 같이 로그인되어 있다.
  } else if (response.status === 'not_authorized') {
    // 페이스북에는 로그인 되어있으나, 앱에는 로그인 되어있지 않다.
  } else {
    // 페이스북에 로그인이 되어있지 않아서, 앱에 로그인 되어있는지 불명확하다.
  }
});



* 권한 요청하기

: 로그인 다이얼로그를 띄울 때에 중요한 것은 앱에서 어느 데이터를 사용하고자 하느냐이다. 위의 예에서는 scope 파라미터를 사용하는데, 이렇게 요청하는 내용들을 접근 권한이라고 한다. 접근 권한은 별도의 문서에서 더 상세하게 확인이 가능한데, 몇 가지 중요하게 요약을 한다면 아래와 같다.


- 다이얼로그를 생성할 때 권한을 요청한다. 이렇게 해야 리턴되는 access token에 해당 권한을 부여하게 되는 것이다.

- 서로 다른 플랫폼들은 서로 다른 권한이 부여 가능하다. 예를 들면, iOS에서는 사용자가 태그된 위치들이 요청 가능하다면, 웹버전에서는 그렇게 확인이 하지 않아도 될 것이다.

- 더 추가적인 기능이 필요하다면 추가 권한 요청이 가능하다. 새로 추가적인 권한이 필요하다면, 간단하게 권한의 목록 뒤에 하나 추가로 더한 다음에 로그인 다이얼로그를 다시 띄우면 된다.

- 로그인 다이얼로그에서는 사용자에게 어떠한 권한을 요청하고 있는지 명시하게 되어있으며, 이를 거절할수도 있게 되어있다.

- 기본적인 권한 중에서 public_profile, email, 그리고 user_friends 이외에 추가적인 권한은 반드시 페이스북에 의해 먼저 검토 되어야 사용할 수 있다. 따라서 앞의 3가지 권한 이외에 추가로 요청하려면 아래의 사이트에서 로그인 리뷰를 신청해야 한다.


https://developers.facebook.com/docs/apps/review/login



* Access token 저장하기

: 로그인 과정이 끝나고나면, access token이 생성되는데, 이 access token은 검증된 API를 특정 사용자가 특정 앱에서 호출할 때 함께 전달해야 한다. 페이스북 자바스크립트 SDK는 자동으로 access token을 저장하고 브라우져의 로그인 상태를 관리하므로 access token을 브라우져 자체에 저장하기 위해서 별도의 처리를 할 필요는 없다.


: 하지만, 일반적인 사용 패턴은 access token을 서버로 전송하여 서버에서 대신하여 여러 가지 호출을 하는 것이다. 브라우져에서 access token을 가져오기 위해서는 FB.getLoginStatus()를 통해서 콜백되는 함수의 인자로 들어오는 response 객체로 확인하면 된다.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    console.log(response.authResponse.accessToken);
  }
});

: token은 다양한 길이를 가지는 암호화된 문자열을 가진다. 또한 기억해야 할 것은 브라우져를 통해서 생성된 access token은 몇 시간 동안만 사용 가능하고, 자바스크립트 SDK를 통해서 자동적으로 갱신 된다. 만약 서버에서 access token을 가지고 지속적으로 APi를 호출하고 싶다면 장기간의 token을 신청해야 한다.



* 사용자 인증하기

: 앱에서는 일반적으로 로그인 다이얼로그의 처리 결과를 받는 사람과 처음 시작한 사람이 같은 사람이라는 것을 검증해야 한다. 만약 브라우져에서만 자바스크립트 SDK를 사용하고 있다면, 이러한 검증은 자동적으로 수행하게 되는 것으로 생각하면 된다.


: 만약 서버에 access token을 받아서 보내고자 한다면, 서버에 도착하고나서 access token을 재인증 해야 한다. 이 때에는 app_id와 user_id가 해당하는 access token과 일치하는지 확인해야 한다.



* API 호출하기

: 이 단계가 되면 사용자가 로그인을 하여 인증이 끝난 상태가 된다. 이제부터는 API를 호출하여 연동을 하면 된다. 브라우져에서 API를 호출하는 가장 쉬운 방법은 바로 FB.api()를 호출하는 것이다. 브라우져에서 FB.api()를 호출하게 되면 access token은 자동적으로 전송하게 된다. 아래는 API 하나의 예이다.

FB.api('/me', function(response) {
    console.log(JSON.stringify(response));
});

: 위의 API 호출은 아래의 배열을 리턴할 것이다.

{
  "id":"101540562372987329832845483",
  "email":"example@example.com",
  "first_name":"Bob",
  [ ... ]
}

: 만약 서버쪽에서 access token을 사용하여 API를 호출하고 있다면, 서버에 SDK와 유사하게 호출을 하면 된다. 많은 사람들은 PHP로 구성된 웹앱을 사용하고, 아래의 사이트에서 서버 측 API 호출에 대한 문서를 찾아볼 수 있다.


https://developers.facebook.com/docs/php/gettingstarted/4.0.0



* 로그아웃 하기

: 자바스크립트 SDK를 이용하여 FB.logout을 사용한다면 버튼이라 링크를 통하여 사용자를 로그아웃 시킬 수 있다.

    FB.logout(function(response) {
        // 사용자 로그 아웃 이후 콜백처리
    });

: 이 함수는 사용자를 페이스북에서도 로그아웃을 시키게 된다는 것을 참고하기 바란다. 이것을 참고하는 이유는 어떠한 사람들은 앱에 로그인해 있는 동안 페이스북에도 접속했을 수도 있다. 이 때에 사용자들은 페이스북과 앱에서 동시에 로그아웃하는 것을 예상하고 있지 못할수도 있지만, 사용자의 혼동을 줄이고 보안을 지키기 위하여 이러한 로그아웃 방식을 채택하고 있다.


: 추가적으로 로그아웃은 로그인 권한을 재요청하는 것과는 다르기 때문에, 앱을 개발할 때, 로그아웃한 사용자에게 다시 로그인 다이얼로그를 띄우면서 로그인 요청을 하는 것은 지양해야 한다.



* 권한 추가하기

: 페이스북 로그인의 가장 적합한 구현 예는 바로 읽기 권한과 배포 권한을 동시에 요청하지 않는 것이다. 이를 위해서 페이스북에서는 앱에서 나중에 다른 권한을 추가로 요청할 수 있도록 지원해주고 있다. 이를 위해서는 로그인 다이어리에 새로운 권한을 요청하도록 띄우면 된다. 예를 들면, 아래와 같은 로그인 버튼을 사용했다면, 다이얼로그는 아래와 같을 것이다.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>




: 그리고 권한이 부여된 뒤에 /me/permissions API를 호출하게 되면 아래와 같이 권한이 부여된 것을 확인할 수 있다.

{"data":
  [
    {
      "permission":"public_profile",
      "status":"granted"
    },
    {
       "permission":"email",
       "status":"granted"
    }
  ]
}

: 만약 여기서 나중에 user_friends 권한을 추가로 요청하고 싶다면, FB.login() 함수를 아래와 같이 다시 호출하면 된다.

FB.login(function(response) {
   console.log(response);
 }, {scope: 'user_friends'});

: 이렇게 호출하는 것 또한 버튼이나 사용자의 클릭 핸들러를 통해서 열어야 브라우져의 팝업 차단기를 피할 수 있다. 이 때에 팝업은 아래와 같이 나타나게 된다.





: 이 때에 새로 추가된 권한에 대해서만 추가적으로 요청하는 것을 확인할 수 있다. 새로운 권한 요청을 사용자가 승낙하고 난 뒤에 다시 /me/permissions API를 요청하게 되면 아래와 같이 결과가 나타난다.

{"data":
  [
    {
      "permission":"public_profile",
      "status":"granted"
    },
    {
      "permission":"email",
      "status":"granted"
    },
    {
      "permission":"user_friends",
      "status":"granted"
    }
  ]
}



* 거절 당한 권한 재 요청하기

: 페이스북에서는 사용자들이 권한을 거절할 수 있도록 설정하고 있다. 로그인 다이얼로그는 아래와 같은 화면으로 설정할 수 있도록 되어있다.





: public_profile은 항상 기본적으로 요청되기 때문에 설정을 바꿀 수 없도록 되어있고, 바꿀 수 있는 항목들은 설정이 가능하다. 이렇게 설정이 가능한 설정을 바꾸게 되면, /me/permissions API를 호출하게 되면, 거절한 권한에 대하여 아래와 같이 결과가 나타난다.

{
  "data":
    [
      {
        "permission":"public_profile",
        "status":"granted"
      },
      {
        "permission":"user_likes",
        "status":"declined"
      }
    ]
}

: 위에서 보면 user_likes는 declined 된 상태로 확인할 수 있다. 거절된 권한에 대해서 한번은 처리하는 것은 괜찮으나, 추가적으로 거절된 권한을 요청할 때에는 왜 그러한 권한이 필요한지 제대로된 교육 자료를 만들어서 제시하는 것이 좋을 것이다. 하지만, FB.login()을 그냥 다시 요청하게 되는 경우에는 요청이 이루어지지 않을 것이다. 이것은 사용자가 한번 권한을 거절하게 되면 다음 로그인 다이얼로그를 띄우게 되면 명시적으로 다시 요청해달라고 하기 전까지는 사용자에게 다시 묻지 않도록 되어있기 때문이다. 이 때에는 auth_type: rerequest 플래그를 활성화 시켜야 한다.

FB.login(
  function(response) {
    console.log(response);
  },
  {
    scope: 'user_likes',
    auth_type: 'rerequest'
  }
);

: 이렇게 요청을 다시 하게 되면 로그인 다이얼로그에서는 거절되었던 권한에 대하여 다시 요청하게 된다. 



* 사람들이 앱을 언인스톨 할 때 감지하기

: 사람들이 앱 자체를 통해서 언인스톨을 하는 것이 아니라 페이스북을 통해서 앱을 언인스톨하는 것이 가능하다. 앱에서 이러한 일이 일어나게 되는 것을 감지하려면, 이러한 이벤트가 일어나게 되면 콜백 URL을 통해서 앱에서도 알 수 있다.


: 언인스톨 콜백은 앱의 대쉬보드를 통해서 설정할 수 있다. 페이스북 앱 페이지로 가서 Settings 메뉴를 선택한 다음, Advanced 탭을 선택하면 텍스트 필드 중에서 Deauthorize Callback URL 에 콜백을 받을 URL을 입력하면 된다.


: 앱에 있는 사용자가 de-authorize하는 경우에 이 URL에 HTTP_POST를 통해서 요청을 보내게 된다. 이 때에 콜백함수에 signed request를 추가로 보내게 되는데, 이를 파싱하는 것은 페이스북의 레퍼런스를 참고하면 된다.




원문 참고: https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.1









저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 초보개발자 2014.12.12 14:53 신고  댓글주소  수정/삭제  댓글쓰기

    혹시, 로그아웃 부분만 조금만더 자세하게 써주실 수 있을까요?ㅠㅠ

    안되서요 ㅠㅠ

    • Unikys 2015.01.02 13:11 신고  댓글주소  수정/삭제

      FB.logout();만 실행하게 되면 페이스북을 로그아웃 하게 되고요, FB.logout(function() {
      ...
      });을 하게 되면 페이스북 로그아웃을 한 다음에 뒷처리(CSS 변경, 페이지 새로고침 등)를 다시 하면 됩니다. Fb.api를 쓰는 것과 동일하게 FB.logout을 하시면 됩니다.

  • 미니사랑 2015.03.24 11:18 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 내용 감사합니다. ^^

  • juliet486 2015.05.04 17:40 신고  댓글주소  수정/삭제  댓글쓰기

    이 글을 읽고 나니, 페이스북에 대한 이해도가 높아졌어요.
    정말 감사합니다!!!

  • k-POP Musci X 2016.02.20 20:38 신고  댓글주소  수정/삭제  댓글쓰기

    app 근냥 생성 하려니깐 오류떠서 그런데
    신규 가입 페이지 알수있을까여?
    https://developers.facebook.com/
    아무리 찾아도 없어서..ㅠㅠ

  • 이산하 2016.02.22 14:14 신고  댓글주소  수정/삭제  댓글쓰기

    해당 앱을 사용할 때, 개인 페이스북 계정을 통해 생성해야 하나요?

  • 이규진 2016.02.28 12:53 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 문외한이라 이렇게 질문 드려도 될지 모르겟네요; 양해 부탁 드립니다.
    앱 개발 준비중에 있는데 아직 기획 단계라서요..
    회원가입 단계에서 소셜 로그인 연동을 하려고 하는데,
    해당 소셜(페이스북, 카카오 등)에 정보를 가져오기 위해 추가적인 계약이나 제휴가 이루어져아 하나요? 아니면 페이스북과 카카오는 오픈이 되어 있는 것인지;;
    모르는 부분이 많아서,, 이렇게 문의 드립니다.. 도움 부탁 드릴게요

    • 강철 2016.03.08 18:04 신고  댓글주소  수정/삭제

      저도 자세하게는 모르지만 설명해 드리자면 소셜에 정보를 가지고 온다는 것은 아마 친구리스트나 이메일등의 정보를 가지고 있을 수 있냐는 질문이겠지요? 페이스북의 경우 앱 대쉬보드를 들어가서 권한을 보시면 어떠한 권한을 가질수 있는지에 대해 나와있습니다. 그걸 적당히 체크하시면 게시물을 쓸수 있는 권한이나 친구리스트의 정보를 가지고 오는 권한등을 받을 수 있습니다. 만약 소셜로그인을 통해 로그인을 한다면 access_token 이라는 것을 클라이언트가 받습니다. 그러면 그 access_token을 서버로 전송시켜서 서버가 가지고 있다가 필요할때마다 access_token과 하고싶은 요청을 FB에 보내면 FB에서 처리하게 됩니다. 즉 가능합니다. 소셜로그인 자체가 대부분 access_token을 이용하고 있고 (OAuth 라고 검색하시면 자세하게 나올 것 입니다.) 다 이런용도로도 쓰라고 만들었기 때문에 될 것 입니다.

  • 고현찬 2016.03.28 17:33 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 콕스코의 고현찬이라고 합니다.

    현재 보스를 죽여라라는 게임을 출시하여 라이브하는 중입니다.
    저희게임에 좀더 활력을 불어넣을 수 있는 페이스북 로그인, 설치되어있는 친구정보 불러오기, 설치되어 있는 친구에게 알림보내기, 설치되어 있는 친구가 알림을 보내면 알림받기, 설치되어있지 않은 친구불러오기, 설치되어있지 않은 친구에게 알림보내기를 삽입하려고 하고 있습니다. 그런데 몇일째 한쪽 부분에서 막혔습니다. 저희가 서버쪽에 관해서는 문외하기 때문에 많은 정보들이 이해가 안되서 그렇습니다. 현재 구현한 것은 로그인, 친구불러오기 입니다. 이외에는 무슨 권한을 필요로 하는 것 같은데 검색해본 결과 캔버스앱으로 등록해야 하는것 같습니다. 여기서 또 문제가 생기는데 ssl을 요청합니다. ssl을 받을려니 도메인이 필요합니다. 저희게임은 웹앱이 아니기 때문에 도메인이 없습니다. 도메인을 받더라도 앱과 연관이 없어 캔버스로 등록하는 것이 맞는지 의문이 듭니다.

    결과는 페이스북 로그인, 설치되어있는 친구정보 불러오기, 설치되어 있는 친구에게 알림보내기, 설치되어 있는 친구가 알림을 보내면 알림받기, 설치되어있지 않은 친구불러오기, 설치되어있지 않은 친구에게 알림보내기을 넣으려고 하는데 그 과정에서 API 리퀘스트를 보내면 리턴값이 오는데 그 친구에게는 알림이 가지 않습니다.

    • Unikys 2016.05.02 10:28 신고  댓글주소  수정/삭제

      제가 로그인하는 부분까지만 활용을 했기 때문에 알림을 보내는 부분은 잘 모르겠네요. 나중에 시간이 나면 한번 살펴볼 수는 있을 것 같기는 한데 언제 시간이 날지 모르겠네요.

  • itmoos 2016.06.14 10:14 신고  댓글주소  수정/삭제  댓글쓰기

    와...너무잘나와 있네요ㅠㅠ!! 초면이지만 사랑합니다...좋은글 감사드려요!

  • jdiwl 2016.11.07 11:12 신고  댓글주소  수정/삭제  댓글쓰기

    페이스북 친구의친구를 가져오는 방법은 없을까요?

    • Unikys 2016.11.08 03:02 신고  댓글주소  수정/삭제

      당연히 친구의 데이터 공개 범위에 의존적하기 때문에 로그인한 사람의 입장에서 가시적인 친구 목록은 me/friends?fields=friends 등과 같이 조회 가능합니다.

  • bjb 2017.01.04 10:17 신고  댓글주소  수정/삭제  댓글쓰기

    로그인을 하는대 따로 dbtable 이 필요하나요 ??

    • Unikys 2017.01.09 09:46 신고  댓글주소  수정/삭제

      로그인만 한다면 필요 없습니다. 그런데 페이스 로그인 정보와 연계해서 무언가 데이터를 별도로 저장하고 개인화 등을 해서 서비스를 제공하고 싶다면 본인의 사이트에서 저장할 정보와 페이스북 로그인 정보를 매핑할 테이블은 따로 있어야겠죠.

  • 안녕하세요 2017.03.06 17:19 신고  댓글주소  수정/삭제  댓글쓰기

    질문 하려고합니다 로그인 버튼 클릭하면은
    Warning
    URL을 불러올 수 없습니다: 앱 도메인에 포함되어 있지 않은 URL입니다. 이 URL을 읽어들이려면 앱 설정에서 앱 도메인 필드에 앱의 모든 도메인과 서브 도메인을 추가하세요.
    나오는대요 그래서 설정하는곳 가서 앱도메인에 주소같은거 추가하려고 했더니 자꾸 등록이 안된다면서
    앱 도메인은 보안 캔버스 URL, 모바일 사이트 URL, Unity 이진 URL, 사이트 URL 또는 보안 페이지 탭 URL의 도메인과 일치해야 합니다. 하면서 자꾸 뜨는대
    어떤 주소를 입력 시켜줘야하나요/
    저같은 경우는 이클립스로 아파치 톰캣 쓰고있는대요 주소를 어떻게 써줘야하는지 잘모르겠습니다
    답변 부탁드리겠습니다.

    • Unikys 2017.03.18 06:01 신고  댓글주소  수정/삭제

      로컬에서 테스트 하신건가요? 로컬에서 하려고 했다면 샌드박스 등과 같은 것이 있을텐데 그러한 테스트 API로 해야될겁니다. 로컬에서는 직접 페이스북과 연동을 할수 있는지는 모르겠네요. 주소는 서비스를 제공할 웹페이지의 도메인(예: http://unikys.tistory.com 등)을 입력하시면 됩니다.

  • 진짜 초보 개발자를 꿈꾸는 초보 2017.06.10 00:31 신고  댓글주소  수정/삭제  댓글쓰기

    너무너무 감사합니다 설명이 세세하게 잘 되어있어서 놀랐어요!

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바