[expo] 10. expo로 앱 만들기 - 카카오 로그인 - 2

안녕하세요 프시케입니다.

 

이번 포스팅은 저번 포스팅에 이어 카카오 로그인 구현입니다.

 

카카오 로그인을 구현하기위해 Terminal에서 해당 라이브러리를 설치해줍니다. 

 

npx expo install react-native-webview

 

npm install axios

 

npx expo install @react-native-async-storage/async-storage

 

라이브러리의 설치가 끝나고 expo를 실행시켜주고 

 

W를 눌러 web도 열어줍니다. 

 

npx expo start  ->  w

 

 

로그인 화면에서 카카오 로그인 버튼 클릭 시 카카오 화면으로 이동하게 되고 

 

카카오 화면에서 WebView를 열어 kakao 로그인을 진행하는 방식입니다. 

 

먼저 로그인 화면의 코드를 보면 카카오 화면으로 바로 이동하게 됩니다. 

 

Signin.js

const Signin = () => {

  const navigation = useNavigation();

  return (

    <View style={Styles.container}>      

      <Text style={Styles.HomeText}>로그인 화면</Text>

      <TouchableOpacity

        onPress={() => navigation.navigate("KaKaoLogin", { screen: "KaKaoLogin" })}

        style={Styles.NextBottom}

      >

        <Text style={Styles.BottomText}>카카오 화면으로</Text>

      </TouchableOpacity>

    </View>

  )

}

export default Signin;

 

 

 

kakaoLogin.js 코드를 보면

 

REST_API_KEY는 kakao developers에서 내 애플리케이션 -> 요약정보 및 앱 키에 있는

 

REST API 키이고

 

그리고 REDIRECT_URL은 kakao developers에서 내 애플리케이션 -> 카카오 로그인에 있는

 

Redirect URI에 입력한 http://192.xxx.x.xxx:19006/Home입니다.

 

그리고 인가 코드를 console.log로 찍어보았습니다.

 

import React from "react";

import { View, StyleSheet } from "react-native";

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

const REST_API_KEY = 'cd44acce62747b798a00000000000000';

const REDIRECT_URI = 'http://192.xxx.x.xxx:19006/Home';

const INJECTED_JAVASCRIPT = `window.ReactNativeWebView.postMessage('message from webView')`;

const KaKaoLogin = () => {

  function KakaoLoginWebView (data) {

    const exp = "code=";

    var condition = data.indexOf(exp);    

    if (condition != -1) {

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

      console.log(authorize_code);

    };

  }

  return (

    <View style={Styles.container}>      

      <WebView

        style={{ flex: 1 }}

        originWhitelist={['*']}

        scalesPageToFit={false}

        source={{

          uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,

        }}

        injectedJavaScript={INJECTED_JAVASCRIPT}

        javaScriptEnabled

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

      />

    </View>

  )

}

export default KaKaoLogin;

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    marginTop: 24,

    backgroundColor: '#fff',

  },    

});

 

 

카카오 로그인 버튼을 누르는 동시에 카카오 로그인 화면창이 열리고 로그인을 진행합니다. 

 

 

 

로그인이 완료되면 카카오 화면이 종료되고 스플래시 화면으로 이동하게 됩니다.

 

그리고 Terminal에 인가 코드가 표시 됩니다. 

 

 

 

이제 인가 코드를 통해서 접근 토큰을 받아보겠습니다. 

 

kakaoLogin.js에서 asios를 사용하여 코드를 구성하고

 

 

 

다시 카카오 로그인을 진행하면 Terminal에 접근 코드가 표시됩니다. 

 

 

 

지금까지 카카오 로그인을 통해 접근 토큰을 받아보았습니다.

 

다음 포스팅에선 접근 토큰으로 동의 항목에 체크해둔 이메일과 성별 연령대를 확인하고

 

접근 토큰을 asyncstorage 넣고 카카오 로그인을 종료하면 회원가입 화면으로 이동하는 작업을 하겠습니다. 

 

이번 포스팅은 여기서 마치겠습니다.