[expo] 11. expo로 앱 만들기 - 카카오 로그인 - 3

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

 

이번 포스팅은 저번 포스팅에 이어 접근 토큰으로 동의 항목의 정보와

 

접근 토큰을 asyncStorage에 넣고 

 

카카오 로그인 종료 후 회원가입 화면으로 이동하는 기능을 만들어 보겠습니다. 

 

먼저 지난 kakaoLogin.js 코드에서 AccessToken을 console.log로 찍어보았습니다. 

 

이 AccessToken으로 동의 항목의 정보 조회는 아래의 코드와 같습니다. 

 

 

 

해당 정보들을 console.log로 찍어보면 

 

 

정상적으로 나오는 걸 확인할 수 있습니다. 

 

이제 정보 조회 함수를 삭제하고(다음에 사용)

 

접근 토큰을 asyncStorage에 넣어보겠습니다. 

 

다음은 kakaoLogin.js의 전체 코드로 카카오 로그인 후 회원가입 화면으로 이동하는 navigation을 추가하였습니다.

 

import React from "react";

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

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

import axios from 'axios';

import AsyncStorage from '@react-native-async-storage/async-storage';

import { useNavigation } from "@react-navigation/native";

const REST_API_KEY = 'cd44acce62747b798a83000000000000;

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

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

const KaKaoLogin = () => {

  const navigation = useNavigation();

  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);

      requestToken(authorize_code);

    };

  }

  const requestToken = async (authorize_code) => {

    var AccessToken = "none";

    axios ({

      method: 'post',

      url: 'https://kauth.kakao.com/oauth/token',

      params: {

        grant_type: 'authorization_code',

        client_id: REST_API_KEY,

        redirect_uri: REDIRECT_URI,

        code: authorize_code,

      },

    }).then((response) => {

      AccessToken = response.data.access_token;

      //console.log(AccessToken);

      //requestUserInfo(AccessToken);

      storeData(AccessToken);

    }).catch(function (error) {

      console.log('error', error);

    })

    navigation.navigate("Signup", { screen: "Signup" } );

  };

  // function requestUserInfo(AccessToken)  {

  //   axios ({

  //     method: 'GET',

  //     url: 'https://kapi.kakao.com/v2/user/me',

  //     headers: {

  //       Authorization : `Bearer ${AccessToken}`

  //     },

  //   }).then((response) => {

  //     var user_emil = response.data.kakao_account.email;

  //     var user_range = response.data.kakao_account.age_range;

  //     var user_gender = response.data.kakao_account.gender;

  //     console.log("user_emil", user_emil);

  //     console.log("user_range", user_range);

  //     console.log("user_gender", user_gender);

  //   }).catch(function (error) {

  //     console.log('error', error);

  //   })

  //   return;

  // }

  const storeData = async (returnValue) => {

    try {

      await AsyncStorage.setItem('userAccessToken', returnValue);

    } catch (error) {

    }

  }

  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',

  },    

});

 

카카오 로그인 후 정상적으로 회원가입 화면으로 이동하였습니다. 

 

지금까지 카카오 로그인 구현을 알아봤습니다.

 

다음 포스팅은 접근 토큰을 다른 화면에서 불러오는 과정을 알아보도록 하겠습니다. 

 

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