Ionic에서 Kakaotalk 간편로그인하기

Ionic에서 Kakaotalk 간편로그인하기

Cordova Plugin 저장소

https://github.com/GwonHyeok/cordova-plugin-kakaotalk

Cordova Plugin 설치

cordova plugin add cordova-plugin-ghyeok-kakaotalk --variable KAKAO_APP_KEY=YOUR_KAKAO_APP_KEY

안드로이드 - 카카오 개발자 센터에서 키 해시를 등록

Keystore 신규 생성

[Android Studio] - [Build] - [Generate Signed APK] - [Create new...]

[Keystore]

Key store path : keystore(.jks)를 생성해서 저장할 디렉토리

Password : keystore 비밀번호

Confirm : keystore 비밀번호 확인

[Key]

Alias : 키를 식별할 수 있는 이름

Password : 키에 사용할 암호

Confirm : 키에 사용할 암호 확인

Validity(years) : 키 유효기간(년) 최소 25년

Certificate : 인증서에 사용할 개발자정보 입력(APK의 일부로 인증서에 포함됨)

First and Last Name : 내이름

Organizational Unit : 회사 업종

Organization : 회사 이름

City or Locality : 회사 위치 1

State or Province : 회사 위치 2

Country Code (XX) : KR

[OK] 클릭 후 이전화면으로 돌아가서

Key store path : 새로 만든 Keystore 위치 확인

Key store password : 새로 만든 Keystore 비밀번호 입력

Key alias : 새로 만든 Keystore 의 키 식별 이름

Key password : 새로 만든 Keystore 의 키 암호

[Next] 클릭 후 다음화면에서 

만든 앱에 서명을 하고 싶다면 

APK Destination Folder 에서 위치를 지정하여

Build Types 를 선택하여 Finish를 한다.

APK에 서명하지 않고 키와 키스토어만 생성하고 싶다면 [Cancel]을 클릭한다.

Debug 키해시

개발하고 있는 app에서 테스트를 하려면 Debug 키해시를 등록해야 한다.

$ keytool -exportcert -alias androiddebugkey -keystore <debug_keystore_path> -storepass android -keypass android | openssl sha1 -binary | openssl base64

여기 참고 https://developers.kakao.com/docs/android#키해시-등록

※ 터미널 창에 한글이 깨진다면 openssl 을 꼭 설치하도록 하자.

https://code.google.com/archive/p/openssl-for-windows/downloads

https://m.blog.naver.com/PostView.nhn?blogId=tkddlf4209&logNo=220684818671

Release 키해시

$ keytool -exportcert -alias <release_key_alias> -keystore <release_keystore_path> | openssl sha1 -binary | openssl base64

CLI의 %JAVA_HOME%이 위치한 경로에서 위의 명령어 입력

release_key_alias : 새로 만든 Keystore 의 키 식별 이름

release_keystore_path : 새로 만든 Keystore 위치

정상적으로 동작한다면 key가 출력이 된다.

출력된 Key를 카카오톡 개발자센터의 내 앱에서 [설정]-[일반]-[플랫폼]-[Android]-[키 해시] 입력란에 추가한다.

Ionic2 버전에 카카오톡 플러그인 소스 적용

app.module.ts

import {KakaoTalk} from 'ionic-plugin-kakaotalk';

providers: [
  KakaoTalk
]

login.ts

declare var KakaoTalk: any; // 임폴트 구문 다음

export class SimpleLoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SimpleLoginPage');
  }
  logins() {
    if (typeof KakaoTalk !== 'undefined') {

      KakaoTalk.login(
        function (result) {
          console.log('Successful login!');
          console.log(result);
        },
        function (message) {
          console.log('Error logging in');
          console.log(message);
        }
      );
    }
  }
}

login.html

<ion-content padding>
  <button ion-button color="light" (click)="logins()">KAKAO LOGIN</button>
</ion-content>

[카카오톡 개발자센터]-[내앱]-[설정]-[사용자 관리] 페이지에서

사용 을  ON 으로 변경한다.