React Native 카카오 간편 로그인 구현

https://developers.kakao.com/

Kakao Developers

먼저 이곳에서 어플리케이션을 생성한다.

 

여기서 REST API 키를 사용할것이다.

 

로그인을 활성화 해놓는다.

 

Redirect URL을 설정한다.

 

필자의 환경은 Expo Go이라는 어플을 가지고 핸드폰으로 테스트 하였다.

import React from 'react';

import { View } from "react-native";

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

import axios from 'axios';


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

const KakaoLogin = ({ navigation }) => {

 

    function LogInProgress(data) {

        const exp = "code=";

        var condition = data.indexOf(exp);

        if (condition != -1) {

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

            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: 'REST_API_KEY',	//자신의 REST_API_KEY

                redirect_uri: 'https://auth.expo.io/',

                code: request_code,

            },

        }).then(function (response) {
        
          axios({
                method:'get',
                url:'https://kapi.kakao.com/v2/user/me',
                headers:{
                    Authorization: `Bearer ${response.data.access_token}`
                }
            }).then(function (response) {
                console.log('response :: ' + JSON.stringify(response));
            }).catch(function (error) {
              console.log('error', error);
            });


            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=REST_API_KEY&redirect_uri=https://auth.expo.io/' }}

                injectedJavaScript={runFirst}

                javaScriptEnabled={true}

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

            // onMessage webview에서 온 데이터를 처리

            />

        </View>

    );

};

export default KakaoLogin;

코드를 실행하면 로그인이 되고 화면에 이상한 영어들이 나올 건데 거기까지만 구현하였기 때문에 그게 맞다.

 

터미널 창을 보면 자신이 요구한 로그인한 사용자의 값들이 나와있는 것을 볼 수 있을 것이다!