리액트 네이티브 expo에서 카카오톡 로그인 사용하기

리액트 네이티브 cli와 expo cli로 앱을 만들수가 있습니다.

우리가 다루어 볼거는 expo cli 이구요.. expo의 가장 큰 장점은 쉽게 빠르게 앱을 개발 할수 있다는 겁니다.

하지만 지원 되지 않는 api는 사용할수 없다는 단점이 있지만 그래도 쉽고 빠르게 개발이 가능 하니 

저는 expo를 추천 합니다.

리액트 네이티브 cli로 개발을 하게 되면 네이티브 코드도 쓸수 있고 광범위하게 개발이 가능 하지만,

좀 어렵게 개발을 하실수도 있습니다. 하지만 expo를 사용하면 어렵지 않고 쉽게 개발이 가능 합니다.

그리고 expo에서도 리액트 네이티브의 기본적인 태그는 다 지원을 합니다.

리액트 네이티브에서 사용 가능 패키지들은 지원이 되지 않치만, expo에서 지원 안되는게 그리 많치는 않습니다.

예를 들어서 image picker 라는게 있는데, 이건 안드로이드에서 하나의 이미지만 가져 올수 있습니다.

하지만 medialibrary를 사용을 하면 갤러리의 이미지 파일을 다 가지고 올수 있고, 이걸 가지고 직접 만들어서

사용하는 방법이 있습니다. medialibrary는 다른 글에서 설명 하겠습니다.

먼저 카카오 로그인을 사용 하려면 카카오 디벨로퍼에서 rest api로 사용을 해야 합니다.

그래서 카카오 디벨로퍼에서 가입을 하고 어플리케이션을 만들어 줍니다.

 

https://developers.kakao.com/

Kakao Developers

내어플리케이션 > 어플리케이션 추가하기로 추가를 하시면 됩니다.

 

앱아이콘 : 사용할 아이콘을 등록해 줍니다.

앱이름 : 앱이름을 입력해 줍니다.

사업자명 : 나중에 라도 사업자로 등록할 회사 이름을 입력 합니다.

이렇게 하고 저장을 클릭을 합니다.

 

만들어진 내어플리케이션을 클릭을 하여서 어플리케이션으로 들어 갑니다.

 

제품설정 > 카카오로그인의 활성화를 on 으로 바꾸어서 활성화를 해줍니다.

 

그리고 카카오로그인의 rest api를 사용을 하려면 Redirect URI을 꼭 설정해 주어야 합니다.

Redirect URI 이 뭐냐면 카카오로그인이 성공을 하면 일루 보낸다는 겁니다.

스프링부트의 서버의 url을 설정해 주시면 됩니다.

예를 들어 http://localhost:8080/kakao 이런식으로 입력을 해줍니다.

http://도메인/주소 이런식으로 외부로 접속 가능한 url로 설정을 해주면 됩니다.

이렇게 하면 카카오 로그인의 rest api의 준비가 끝났습니다.

 

그리고 사용할 REST API 키는 앱키에 있습니다.

 

그리고 상단의 문서탭에서 카카오 로그인 > rest api를 클릭하여 줍니다.

 

여기서 카카오로그인 > rest api > 인가코드 받기, 토큰받기 이렇게 순서대로 처리를 해주어야 카카오에 로그인이 

완료가 됩니다.

 

그리고 지금부터 설명 하는건 리액트를 안써 보셨거나 하시면 이해가 안되 실수 있습니다.

리액트 네이티브 expo 설치 및 실행하기(앱 만들기) (tistory.com)

리액트 네이티브 expo 설치 및 실행하기(앱 만들기)

이걸 좀 보시고 해보시면 이해가 조금 이라도 되실수 있습니다.

 

이제 expo에서 rest api를 사용하기 위해서 웹뷰를 설치를 해주어야 합니다.

이 방식을 새로운 페이지를 띄워서 그냥 rest api를 보내주면 카카오 로그인창이 앱에 보입니다.

예를 들어서 새로운 화면을 만들어서 이미 만들어지 화면에서 띄운다고 생각 하시면 됩니다.

 

expo install react-native-webview

이걸로 웹뷰를 설치를 해줍니다.

설치가 제대로 되지 않는다면 npm start로 실행을 시킨 개발서버를 끄고서

npm remove react-native-webview

를 지운후에 다시 설치를 해주면 정상적으로 설치가 됩니다.

이제 카카오 인가코드를 받고, 토큰 코드를 받으면 됩니다. 새로운 페이지를 만들어서, 새로운 페이지를 띄워서

거기서 웹뷰로 실행을 해주면 됩니다.

 

<View style={{ flex: 1 }}>

            <WebView

                originWhitelist={['*']}

                scalesPageToFit={false}

                style={{ marginTop: 30 }}

                source={{ uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id={id}&redirect_uri=카카오에서 설정한 리다이렉트 url' }}

                injectedJavaScript={runFirst}

                javaScriptEnabled={true}

                onMessage={(event) => { LogInProgress(event.nativeEvent["url"]); }}

            // onMessage ... :: webview에서 온 데이터를 event handler로 잡아서 logInProgress로 전달

            />

        </View>

 

이렇게 리턴값에 웹뷰를 설정을 해주어야 한다.

onMessage={(event) => { LogInProgress(event.nativeEvent["url"]); }}

이걸로 리다이렉트할시 탈취를 해서 웹화면에 값을 가지고 올수 있다.

const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;

이걸 상단에 설정을 해주면 탈취를 할수 잇다.

이해를 위해 전체 소스를 보여 주겠습니다.

 

import React from 'react';

import { View } from "react-native";

import { WebView } from 'react-native-webview';

import axios from 'axios';

 

// other import settings...

const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;

 

const KakaoLogin = ({ navigation }) => {

 

    function LogInProgress(data) {

        // access code는 url에 붙어 장황하게 날아온다.

        // substringd으로 url에서 code=뒤를 substring하면 된다.

        const exp = "code=";

        var condition = data.indexOf(exp);

        if (condition != -1) {

            var request_code = data.substring(condition + exp.length);

            // console.log("access code :: " + request_code);

            // 토큰값 받기

            requestToken(request_code);

        }

    };

 

    const requestToken = async (request_code) => {

        var returnValue = "none";

        var request_token_url = "https://kauth.kakao.com/oauth/token";

 

        axios({

            method: "post",

            url: request_token_url,

            params: {

                grant_type: 'authorization_code',

                client_id: 'ic',

                redirect_uri: 'url',

                code: request_code,

            },

        }).then(function (response) {

            returnValue = response.data.access_token;

 

        }).catch(function (error) {

            console.log('error', error);

        });

    };

 

    return (

        <View style={{ flex: 1 }}>

            <WebView

                originWhitelist={['*']}

                scalesPageToFit={false}

                style={{ marginTop: 30 }}

                source={{ uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=id&redirect_uri=url' }}

                injectedJavaScript={runFirst}

                javaScriptEnabled={true}

                onMessage={(event) => { LogInProgress(event.nativeEvent["url"]); }}

            // onMessage ... :: webview에서 온 데이터를 event handler로 잡아서 logInProgress로 전달

            />

        </View>

    );

};

 

export default KakaoLogin;

 

이런식으로 웹뷰로 띄워서 카카오 로그인이 가능하다.

제가 카카오 메시지를 보내는것 까지는 테스트 했지만, 카카오 메시지는 rest api로 화면을 던지는게 아니어서

화면이 나오지는 않고, 나에게 보내기만 테스트가 가능하다.

친구에게 보내기를 할려면 사업자도 있어야 하고, 동의항목을 카카오에서 추가후에 rest api로 동의항목을 체크를 해서

동의를 하면 친구에게 메시지 보내기를 구현을 할수 있다.

그리고 카카오에서 kauth 로 시작하는 rest api 주소는 화면을 리턴을 합니다. 나머지 kapi는 그냥 json을 값을 리턴

합니다.

친구에게 메시지 보내기, 동의항목에 동의 받기는 다른 게시글에서 공유 하겠습니다.