SNS 로그인 API 연동 2018.04.04. 조휘제

목적 SNS 로그인이란 어플리케이션에서 복잡한 회원가입 절차를 거치지 않고 간단하게 로그인, 회원가입을 진행하는 방식입니다. 본 PPT에서는 Kakao, Naver, Facebook 로그인 과정을 다루고 있으며 회원가입 및 로그인을 진행하는 파일은 register_SNS.php로 정의하였습니다. register_SNS.php는 ID와 Name, SNS_type 값을 받아오면 로그인과 회원가입을 진행할 수 있는 로직이 짜여 있습니다.

SNS 로그인의 공통적 요소 Request Token Access Token Response

사전 작업 클릭!! 클릭!! KakaoDevelopers에 앱 생성

사전 작업 카카오 로그인으로 받아올 정보 선택

사전 작업 카카오톡 로그인을 사용할 페이지의 도메인과 리턴받을 페이지의 도메인 입력

1) <script src="//developers.kakao.com/sdk/js/kakao.min.js“/> 먼저 JS파일을 불러옵니다. Init(), login() 등의 함수가 들어 있습니다. 함수에 대한 자세한 설명은 상황에 따라 첨가하겠습니다. 2) Kakao.init({Kakao Developer에서 제공하는 어플의 ID값}); Kakao Developer에 웹 페이지(Application)을 등록할 때 부여받는 Key값을 매개 변수로 JavaScript SDK에서 API를 호출합니다. 또한 3) Kakao.Auth.login( Setting ); 카카오 로그인의 코어라 할 수 있는 부분입니다. 로그인과 관련된 설정을 전달하는 Object type의 매개변수 Setting을 받아 처리합 니다.

Setting?? container:String|DOMElement(required) DOM Element 또는 Element의 ID Selector를 넘기면, 해당 Element 내부에 로그인 버튼이 생성됩니다. lang : String ‘kr', 'en' (default: 'kr’) 로그인 버튼에 표시할 언어를 지정합니다 size : String 'small', 'medium', 'large' (default: 'medium’) 로그인 버튼의 사이즈를 지정합니다 위 3개 옵션은 Custom button을 사용할 경우 제외해도 상관없습니다. 4) success : Function(authObj) authObj : { access_token:"...", refresh_token:"..." token_type:"bearer", expires_in:43199, scope:"Basic_Profile"} 로그인이 성공할 경우 사용자 토큰을 받을 콜백 함수입니다. 토큰의 종류 사용자의 정보에 접근하기 위한 ‘Access_Token’ 일정 시간이 지났을 때 자동으로 Clear하기 위한 ‘refresh_token’ 5) fail : Function(errorObj) errorObj: { error: "access_denied", error_description: "..."} 로그인이 실패할 경우 에러를 받을 콜백 함수입니다. 끝. 6) always : Function(authObj | errorObj) 로그인이 성공한 경우 및 실패한 경우 모두 호출할 콜백 함수입니다. 7) persistAccessToken : Boolean (default: true) 세션이 종료된 뒤에도 Access Token을 사용할 수 있도록 로컬 스토리지에 저장합니다. 8) persistRefreshToken : Boolean (default: false) 세션이 종료된 뒤에도 Refresh Token을 사용할 수 있도록 로컬 스토리지에 저장합니다 Setting??

4) Setting 값 중 Access_Token을 가져오는 success : function(response) 가 실행될 때 Response값을 JSON으로 받습니다. success: function(res) { var auth_data = JSON.stringify(res); 5) Response값에서 필요한 사용자 정보를 가져옵니다 var nickname=res.properties.nickname; var email=res.kaccount_email; 6) nickname과 email을 Resister_SNS페이지로 넘깁니다. 이 때 다른 SNS로그인과 구분하기 위해 SNS_type이라는 변수도 함께 넘겨줍니다. location.href="https://0zip.co.kr:453/mall/register_SNS.php?k_nickname="+ nickname+"&k_email="+email+"&SNS_type=KAKAO"; ※ http환경에서는 ajax를 사용해도 되지만 https환경에서는 ajax를 사용할 수 없습니다 이로서 카카오 로그인 API로 사용자의 nicknam과 email값을 register_SNS.php페이지로 전달하였습니다.

사전 작업 NaverDevelopers에 앱 생성

사전 작업 네이버 로그인을 사용할 페이지의 도메인과 리턴받을 페이지의 도메인 입력

사전 작업 중요 네이버 아이디 로그인을 위해서는 네이버 쪽에 검수를 요청하고, 승인을 받아야합니다. 결과 나오기까지 3~4일정도 소요되며 불통될 수도 있기 때문에 버튼만 달고 최우선적으로 처리하는 편이 시간절약에 좋습니다 요겁니다

Request 보내기 로그인 페이지 $apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type= code&client_id=".$client_id."&redirect_uri=".$redirectURI."&state=".$state; --> Request값을 전달하고 네이버 로그인 창을 띄우는 링크입니다. 로그인 버튼은 클릭시 이 링크로 이동하도록 지정하면 됩니다. 이 때 client_id, redirectURI, state 값을 가져갑니다. --> $client_id ={네이버에서 제공하는 ID값}; --> $redirectURI = urlencode({리턴받을 페이지의 경로}); --> $state = 임의로 발생시킨 랜덤 세션값 ※state에 대한 부연설명 랜덤으로 발생시킨 값을 ‘stored_state’ 라는 키 값으로 세션에 담아 놓습니다. 로그인 처리 후 정보를 리턴할 때 세션 값을 비교하고, 값이 일치할 때만 사용자 정보를 가져오는 과정을 진행하도록 합니다. $state 값을 생성하는 코드 $state = "RAMDOM_STATE"; function generate_state() { $mt = microtime(); $rand = mt_rand(); return md5($mt . $rand); } $state = generate_state(); $_SESSION['stored_state']=$state;

Access_Token 얻기 로그인 proc페이지 Return해주는 페이지에서 Access_Token을 가지러 갑니다 $client_id = {네이버에서 제공받은 ID값}; $client_secret = {네이버에서 제공받은 Secret값}; $code = $_GET["code"]; $state = $_GET["state"]; $redirectURI = urlencode({리턴받을 페이지 경로}); $url= "https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id= ".$client_id."&client_secret=".$client_secret."&redirect_uri=".$redirectURI. "&code=".$code."&state=".$state; $is_post = false; 5개 값을 가지고 Access_Token을 가지러 갑니다 이동 처리는 cURL로 진행하였고 $status_code를 리턴합니다. 요청할 때의 값과 일치한다면 $status_code=200 과 $response를 리턴합니다. If($status_code == 200) { $response=json_decode($response); $token_string=$response->access_token; <- Access_Token 얻음! $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, $is_post); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $headers = array(); $response = curl_exec ($ch); $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close ($ch);

Access_Token으로 Response얻어내기 (이전 if구문에 이어집니다) $url_info="https://openapi.naver.com/v1/nid/me"; $ch_info=curl_init(); $header=array('User-Agent: curl/7.12.1 (i686-redhat-linux-gnu) libcurl/7.12.1 OpenSSL/0.9.7a zlib/1.2.1.2 libidn/0.5.6’, 'Host: openapi.naver.com', 'Pragma: no-cache’, 'Accept: */*’, 'Authorization: Bearer '.$token_string ); Access_Token으로 사용자정보를 찾으러 갑니다 (이동처리는 cURL로 처리하였습니다) $info_string=ob_get_contents(); 받아온 Response값을 JSON형식으로 저장 $user_info_arr=json_decode($info_string); ob_end_clean(); $user_name=$user_info_arr->response->name;  로그인한 User의 프로필 정보를 $user_id=$user_info_arr->response->email; 받아와서 저장 } register_SNS.php로 전송하면 완료 } curl_setopt($ch_info, CURLOPT_URL,$url_info); curl_setopt($ch_info, CURLOPT_TIMEOUT,60); curl_setopt($ch_info, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); ob_start(); $user_info=curl_exec($ch_info); curl_close($ch_info);

FacebookDeveloper에 앱 생성 사전 작업 FacebookDeveloper에 앱 생성

사전 작업 Facebook 로그인을 사용할 도메인을 입력해줍니다

생성된 앱 설정을 맞춰줘야 합니다. Redirection URI를 사전 작업 생성된 앱 설정을 맞춰줘야 합니다. Redirection URI를 입력하고 오른쪽 위의 해제 토글 버튼을 눌러 상태가 라이브가 되도록 합니다. (라이브가 아니면 본인 계정 이외의 로그인이 불가합니다)

Facebook 로그인에서 중요한 역할을 하는 4개의 함수가 있습니다. 그리고 각각의 함수는 앞에 소개한 4개의 공통적 요소를 처리하는 역할을 명확하게 수행하고 있습니다. 이번에도 Request, Access_Token을 이용한 접근, Response를 받아오는 과정까지를 구분하여 설명하겠습니다

Request FB.init() window.fbAsyncInit = function() { FB.init({ appId : ‘{부여받은 ID값}＇, cookie : true, xfbml : true, version : ＇v2.8＇ }); FB.getLoginStatus(function(response) { statusChangeCallback(response); }; API 를 사용하는 어플을 정의합니다. 순서대로 ID값과 cookie사용 여부, 소셜api 사용여부, api 버전 value를 입력해줍니다. 그 뒤 FB.getLoginStatus함수는 만약 로그인 세션이 남아 있을 경우 바로 로그인할 수 있도록 처리해주기 위해 호출되었습니다.

FB.login(), FB.getLoginStatus() Access_Token FB.login(), FB.getLoginStatus() 로그인 버튼에 연결되며 페이스북 로그인 창을 띄우고 Access_Token을 비롯한 사용자 정보를 정의하는 Response값을 리턴 받는 함수입니다. 처음 페이지가 열릴 때 실행된 FB.getLoginStatus의 리턴값 response에서 Status값을 가져와 사용합니다. 만약 response.status가 connect. 즉 로그인이 되어 있는 상태라면 별도의 처리 없이 로그인을 진행합니다. 리턴된 response값은 FB.getLoginStatus(response)에 매개변수로 들어갑니다. FB.getLoginStatus의 리턴값 respons은 status, authResponse로 구성되어 있으며 Status는 로그인 여부, authResponse에는 Access_Token, Refresh_Token, signRequset, userID로 구성되어 있습니다. signRequest, userID는 앱 사용자에 대한 정보이며 이 Access_Token을 이용하여 사용자의 정보에 접근할 수 있습니다.

Response FB.api() FB.api는 매개변수를 path, method, params, callback. 총 4개까지 받을 수 있습니다. Path는 API를 읽어올 페이지이며 필수 매개변수입니다. Method는 API에서 값을 요청할 때 get 또는 post방식으로 요청하도록 정의합니다. 기본값은 get입니다. Param은 access_token을 사용하여 api를 호출하는 데 사용되는 매개변수입니다. Callback은 응답을 리턴할 때마다 실행시킬 함수입니다. ※ Example FB.api('/me', function(response) { var user_name=response.name; var user_id=response.id; }); 로그인이 성공적으로 완료되어 Access_Token값과 status값이 response에 담겨 있을 때 위 함수를 실행하면 사용자의 정보를 요청, 받아올 수 있습니다. 받아온 사용자의 정보를 register_SNS.php로 전송해주면 facebook 로그인 완료