안녕하세요.

 

스마트에디터를 모바일에서 사용할 경우 지정한 높이를 벗어나게 되면 상단 도구와 하단이 사라지게 되는 문제가 발생하는 경우가 있습니다.

 

해당 문제의 해결 방법은

 

smarteditor2/js/smarteditor2.js에 옵션 변경을 통해 해결 할 수 있습니다.

1. nBodyHeight = this._getResizeHeight(); >> 주석처리

2. smarteditor2/smart_editor2_inputarea.html 에서 <body class="se2_inputarea" style="display:table 추가"... >

 

 

여기저기 문제였다는 게시글은 있지만 해결책이 없는것 같아 이렇게 내용을 올리게 되었습니다.

 

또 이미지 크기의 해당 모바일 크기보다 커지는 경우 px로 잡히는 문제가 있는데요. 

해당 해결은 smarteditor2/css/smart_editor2_in.css안에다가 .se2_inputarea img { max-width:100%; }  해당 옵션을 넣어주면 됩니다.

 

스마트에디터의 모바일 크기가 px로 잡히게되어 모바일 크기를 넘어갈 경우의 해결방법은

smarteditor2/js/smarteditor2.js에서 $init : function(sDefaultEditing...{}함수안에

 

this.elEditingAreaContainer.style.width = oWdith.nSize + oWidth.sUnit;  >> 주석 처리

 

if(oWidth.sUnit === "px"){

     elAppContainer.style.width = (oWidth.nSize + 2) + "px";  >> 주석처리 

}

 

해당 두개의 width를 자동으로 잡는 부분만 주석 처리하시면 모바일 기기의 크기에 맞게 에디터가 나오게됩니다.

 

저처럼 하나하나 옵션을 살펴가며 고생하시지 마시고, 제가 올린글을 보면서 빠른 개발하시기를..

궁금하신거는 댓글 남겨주세요.

안녕하세요.

 

이번에는 네이버 SNS 로그인 구현 방법을 알려드립니다.

카카오톡이나 네이버나 똑같이 login.php, callback.php가 필요합니다.

만약 제 블로그에있는 카카오톡 로그인으로 구현하였다면 네이버도 금방 되실거에요.

 

* 스크립트 이름을 명시하겠습니다.

1. http://test_lee.co.kr/login.php

2. http://test_lee.co.kr/callback.php 

 

 

1. 네이버 개발자 센터 등록 및 key 받기

  1.1. https://developers.naver.com/main/ 접속.

  1.2. 상단에 어플리케이션 > 어플리케이션 등록 클릭.

  1.3. 어플리케이션 이름과 사용 API를 네이로 클릭.

  1.4. 제공 정보 선택에 체크 (필요한 정보를 체크 하시면 됩니다.)

  1.5. 환경에는 PC웹을 선택.

  1.6. 서비스 URL http://test_lee.co.kr/

  1.7. 로그인 Callback URL  http://test_lee.co.kr/callback.php 추가

 

2. login.php

 


define('NAVER_CLIENT_ID', '내어플리케이션 > 어플리케이션 정보 > Client ID');
define('NAVER_CLIENT_SECRET', '내어플리케이션 > 어플리케이션 정보 > Client Secret');
define('NAVER_CALLBACK_URL', 'http://test_lee.co.kr/callback.php);

 

$naverUrl = "https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=".NAVER_CLIENT_ID."&redirect_uri=".urlencode(NAVER_CALLBACK_URL);

 

<html>

<body>

   <a href="<?=$naverUrl ?>"> <img src="네이버 로그인 이미지" title="네이버 로그인" alt="" style="width:30px"/></a>

</body>

</html>


3. callback.php


define('NAVER_CLIENT_ID', '내어플리케이션 > 어플리케이션 정보 > Client ID'');
define('NAVER_CLIENT_SECRET', '내어플리케이션 > 어플리케이션 정보 > Client Secret'); 
define('NAVER_CALLBACK_URL', 'http://test_lee.co.kr/callback.php');

 

$naver_curl = "https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=".NAVER_CLIENT_ID."&client_secret=".NAVER_CLIENT_SECRET."&redirect_uri=".urlencode(NAVER_CALLBACK_URL)."&code=".$_GET['code'];
// 토큰값 가져오기 
$is_post = false; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $naver_curl); 
curl_setopt($ch, CURLOPT_POST, $is_post); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
$response = curl_exec ($ch); 
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
curl_close ($ch); 
if($status_code == 200){ 
$responseArr = json_decode($response, true); 
  // 토큰값으로 네이버 회원정보 가져오기 
  $headers = array( 'Content-Type: application/json', sprintf('Authorization: Bearer %s', $responseArr['access_token']) ); 
  $is_post = false; 
  $me_ch = curl_init(); 
  curl_setopt($me_ch, CURLOPT_URL, "https://openapi.naver.com/v1/nid/me"); 
  curl_setopt($me_ch, CURLOPT_POST, $is_post ); 
  curl_setopt($me_ch, CURLOPT_HTTPHEADER, $headers); 
  curl_setopt($me_ch, CURLOPT_RETURNTRANSFER, true); 
  $res = curl_exec ($me_ch); 
  curl_close ($me_ch); 
  $res_data = json_decode($res , true); 
   
  if ($res_data ['response']['id']) { 
  //해당 아이디값을 정상적으로 가져온다면 디비에 해당 아이디로 회원가입 여부 확인 하여 회원 가입을 하였으면 자동 로그인 구현.

 
   if(이미 가입된 회원이면){
      //자동 로그인
      exit;
    }

 }

 

## 개인정보를 더 받는다면 회원가입 페이지로 location하고 아니면 프로필 정보 가져온곳에서 회원가입을 시켜주면 됩니다.

 


감사합니다.

궁금하신거는 댓글 달아주세요^^.

안녕하세요.

 

sns 로그인 기능을 구현하는 경우가 많은데요.

간단하게 카카오톡 로그인 기능을 구현하는 방법을 포스팅 하겠습니다.

 

일단 login 페이지와 callback 페이지가 필요합니다.

"http://test_lee.co.kr 테스트로 넣어드린 도메인입니다. 참고하세요."

1. http://test_lee.co.kr/login.php

2. http://test_lee.co.kr/callback.php

 

로 스크립트 이름을 명시하겠습니다.

1. kakao 개발자 센터 등록 및 key 받기

  1.1. https://developers.kakao.com/apps  접속.

  1.2. 앱 만들기 클릭.

  1.3. 내 어플리케이션 > 카카오 로그인 > 사용자 관리 > ON

  1.4. 수집 목록 체크 (필요한 정보를 체크 하시면 됩니다.)

  1.5. 로그인 Redirect URI에  http://test_lee.co.kr/callback.php 추가

 

2. login.php

 


$restapikey = "내어플리케이션 > 설정 > 일반 > REST API 키 복사"; //rest api key 입력

$callbackUrl = "http://test_lee.co.kr/callback.php"; //call back URL 입력

$kakaoUrl = "https://kauth.kakao.com/oauth/authorizeclient_id=".$restAPIKey."&redirect_uri=".$callbacURI."&response_type=code";

 

<html>

<body>

   <a href="<?=$kakaoUrl?>"> <img src="카카오 로그인 이미지" title="카카오톡 로그인" alt="" style="width:30px"/></a>

</body>

</html>


3. callback.php

 


$returnCode = $_GET["code"]; 
$restAPIKey = "내어플리케이션 > 설정 > 일반 > REST API 키 복사"; 
$callbacURI = urlencode("http://test_lee.co.kr/callback.php"); // 본인의 Call Back URL을 입력해주세요
// API 요청 URL
$returnUrl = "https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=".$restAPIKey."&redirect_uri=".$callbacURI."&code=".$returnCode;

$isPost = false;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $returnUrl);
curl_setopt($ch, CURLOPT_POST, $isPost);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$headers = array();
$loginResponse = curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close ($ch);

$accessToken= json_decode($loginResponse)->access_token; // access token 가져옴

 

//방식은 PHP에서 호출하는 curl_init()도 있고 밑에 방식으로도 가능하다는점 알려드리려고 두 개를 같이 썻습니다.
$curl = 'curl -v -X GET https://kapi.kakao.com/v2/user/me -H "Authorization: Bearer '.$accessToken.'"';
$info = shell_exec($curl);
$info_arr = json_decode($info, true);

//카카오 프로필 정보를 가져옵니다


if ($info_arr['id'] > 0) {   

//해당 아이디값을 정상적으로 가져온다면 디비에 해당 아이디로 회원가입 여부 확인 하여 회원 가입을 하였으면 자동 로그인 구현.

 
   if(이미 가입된 회원이면){
      //자동 로그인
      exit;
    }
$mb_nickname = $info_arr["properties"]['nickname']; 

 

## 개인정보를 더 받는다면 회원가입 페이지로 location하고 아니면 프로필 정보 가져온곳에서 회원가입을 시켜주면 됩니다.

 


감사합니다.

궁금하신거는 댓글 달아주세요^^.

+ Recent posts