[Laravel+JS] 카카오톡 메시지 나에게 보내기 API

 

선행작업 및 프로세스

기능 설명

1. 목록을 작성   
     - 카카오톡으로 보낼 메시지의 본문이 될 내용

2. 저장버튼 클릭
     - JavaScript SDK를 이용하여 카카오 로그인을 실행
      - 인가코드 리턴 받은 후 엑세스토큰을 받아오는 API 호출

3. 작성한 내용을 카카오톡 나에게 보내기 실행
      - 리턴받은 토큰으로 메시지 API 호출
      - 메시지 보낸 후 목록으로 리다이렉션

선행작업

1. 내 애플리케이션>제품 설정>카카오 로그인
     - 활성화 설정 [ON]
     - OpenID Connect 활성화 설정 [ON]
     - Redirect URI 등록

2. 문서>SDK 다운로드>JavaScript 
    - 최신 버전 다운로드 스크립트 태그 복사 

구현 프로세스

1. 저장버튼 클릭시, 카카오 로그인 실행
 - 문서>카카오 로그인>JavaScript
    i. JavaScript SDK 초기화
    ii. 카카오 로그인 함수 호출 : Kakao.Auth.authorize()
    iii. 로그인 성공시, redirectUri로 인가 코드를 담은 쿼리 스트링 전달 

2. 설정한 Redirect URI의 쿼리스트링으로 인가코드 리턴
    i. 쿼리스트링에 있는 code값을 GET요청으로 받아온다.

3. 인가코드로 토큰받아오기
 - 문서>카카오 로그인>REST API
    i. 필수 파라미터를 포함해 POST로 API호출
 
4. 카카오톡 메시지 나에게 보내기
- 문서>메시지>카카오톡 메시지: REST API
    i. 액세스 토큰을 헤더에 담아 POST로 API 호출
    ii. JSON 형식으로 구성한 기본 메시지 템플릿을 template_object 파라미터로 전달

 

 

주요 코드

list.blade

 

"내 애플리케이션>앱 설정>요약 정보" 에서 필요한 키를 사용해야한다.

...
<button type="button" id="btn-save"> 저장 </button>
...

// JavaScript SDK 스크립태그 삽입
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.3.0/kakao.min.js" integrity="sha384-70k0rrouSYPWJt7q9rSTKpiTfX6USlMYjZUtr1Du+9o4cGvhPAWxngdtVZDdErlh" crossorigin="anonymous"></script>

<script type="text/javascript">
    // 저장버튼 클릭
    $("#btn-save").click(function(){
    	// 본문 내용 쿠키에 삽입
        setCookie('send_message',encodeURIComponent(str),1);
        // 카카오 sdk 초기화
        Kakao.init("{{env('KAKAO_JS_KEY')}}");
        // 카카오로그인 호출
        Kakao.Auth.authorize({
            redirectUri: encodeURI("{{ route('getKaKaoCode') }}"),
        });
    });
</script>

 

web.php

선행작업 1번에서 설정한 Redirect URI을 라우터에 설정한다.

 

Route::get('/get/kakao/code', 'MemberController@getkaKaoCode')->name('getKaKaoCode');

 

MemberController.php

// Redirect URI에 설정한 라우터와 연결된 함수
public function getKaKaoCode(Request $request) {
    // Get으로 인가코드 받기
    $code = $request->get('code') ?? '';
    
    // 엑세스 토큰 받기
    $client = new Client();
    $client_id = env('KAKAO_REST_API_KEY');
    $api_url = "https://kauth.kakao.com/oauth/token";
    $redirect_uri = route('getKaKaoCode');

    $response = $client->post($api_url, [
        'headers' => ['Content-type','application/x-www-form-urlencoded;charset=utf-8'],
        'form_params' => [
            'grant_type' => 'authorization_code',
            'client_id' =>$client_id,
            'code' => $code,
            'redirect_uri' => $redirect_uri
        ]
    ]);
    
    // 카카오 메시지 보내기 함수 호출
    $responseBody = $response->getBody()->getContents();
    $result = json_decode($responseBody,true);
    self::SendKaKaoMsg($result['access_token']); 
     
     // 목록으로 리다이렉션
     return redirect(route('list'));
}


// 카카오톡 나에게 메시지 보내기
public static function sendKakaoMsg($_token) {
	// 쿠키에 있는 본문 내용 가져오기
    $message = $_COOKIE['send_message'];
    
    // 메시지 전송
    $api_url = env('KAKAO_MESSAGE_API');
    $route = route('OrderList');
    if($_token == '') {
        return false;
    }
    $headers = [
        'Authorization' => 'Bearer ' . $_token,
    ];
    $client = new Client();

    $response = $client->post($api_url, [
        'headers' => $headers,
        'form_params' => [
            'template_object' => json_encode([
                'object_type' => 'text',
                'text' => urldecode($message),
                "link"=> [
                    "web_url"=> $route,
                    "mobile_web_url"=> $route
                ],
                "button_title"=>"바로 확인"
            ])
        ]
    ]);
    
    // 쿠키에 있는 본문 내용 삭제
    unset($_COOKIE['send_message']);
   
}