aaaa.github.com/1.html at master · minb234/aaaa.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>