본문 바로가기
Front-end/JSP

[게시판 만들기] 페이스북 아이디로 로그인(feat.API)

by JiGyeong 2016. 3. 18.

API  

API [application programming interface]

API 오픈소스 라이브러리 많이 들어봤을 것이다.

https://docs.oracle.com/javase/7/docs/api/

JAVA DOC를 상세하게 확인할 수 있는 좋은 사이트이다.



개발 측면의 API는 다른 의미를 가진다.


JAVA -> 문장을 자르고 싶다면 String substring를 써라

WEB -> 문장을 자르고 싶다면 이 URL로 접속해라




facebook 에 연결된 app을 만드는 사람들

어떻게 만들까? 해킹할까?

아니다. 바로 open API를 활용하는 것이다.

FACE BOOK을 하나의 DB 또는 플랫폼으로 사용하는것이다.

그러나 완전공개하면 누가 FACEBOOK을 사용하는지

요청수를 컨트롤하고, 개인정보 보호를 하기 어려워

FACEBOOK이 인증한 APP만 OPEN API를 쓸 수 있도록 만들어놓았다.

그것이 바로 API key이다.


https://developers.facebook.com/apps에 접속한다.

그리고 개발자 등록을 한다.

자신이 만들 앱을 선택한다.

난 웹사이트를 만들 것 이므로 website를 선택했다.


다 만들고나면 맨아래에 자신이 만들 사이트 url을 적는 란이 있다.

여기를 채워 넣는다.





app id /  app secret key / access token는 기억해두어야 한다. 따로 적어놓도록 하자




앱들이 페이스북에서 뭘할 건지 적는 것이 엑세스 토큰이다.

자신의 앱 아이디를 선택한후

겟 유저 엑세스 토큰을 선택한다.



그러면 자신이 원하는 페이스북의 정보를 가져올 수 있다.






==============STS========================


아래 스크립트를 추가하고
<script src="http://connect.facebook.net/en_US/all.js"></script>  

body에 아래 코드를 추가한다.

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

자바스크립트에 아래코드를 추가한다.

FB.init({

    appId : '437795256418001', // App ID

    cookie : true,

    status : true,

    xfbml : true

});

function checkLoginState() {

    FB.getLoginStatus(function(response) {

        statusChangeCallback(response);

    });

}

function statusChangeCallback(response) {

    console.log('statusChangeCallback');

    console.log(response);

    

    if (response.status === 'connected') {

        // Logged into your app and Facebook.

        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.';

    }

}

function testAPI() {

    console.log('Welcome!  Fetching your information.... ');

    FB.api(

        '/me',

        function(response) {

            console.log('Successful login for: ' + response.name);

        }

    );

}

facebook 사용자 정보 api를 호출하는 코드



'Front-end > JSP' 카테고리의 다른 글

[AJAX] 좋아요 만들기 (상세 코드)  (0) 2017.05.23
[JSP] jsp에서 img src 변경  (0) 2016.03.27
[AJAX] json  (0) 2016.03.18
[AJAX] 좋아요 만들기  (2) 2016.03.18
[게시판 만들기] 협업도구 SVN 사용하기  (0) 2016.03.15