Expo - Nodejs/Express를 통한 REST API 카카오 로그인(1)

배경(변명) 

MVP모델을 빠르게 만들어야 하는 상황에서 IOS/Android 동시 개발을 진행해야 하기에 RN으로 가닥을 잡았고

시장 조사 결과로 반드시 구현해야 할 카카오, naver 로그인의 경우 eject 없이는 api 사용이 불가능하다는 점을 인지했다.

 

하지만 무엇보다 xcode 사용 가능 인원이 없다는 안타까운 현실 로 인하여 어금니 꽉 깨물고 EXPO 개발을 선택했다.

(안그래도 백엔드 해야하는데 ios 프론트까지 다 하긴 죽어도 싫었다.)

 

 

Server는 프로젝트 성격상 CRUD가 주가 되기에 Django를 유력하게 생각했으나 추후 있을 수 있는 비전공자들의 투입을 고려해 nodejs를 선택했다.

 

이는 프론트와 언어의 일관성을 유지하는 것이 더 중요하다고 생각했기 때문.

사실 아무리 생각해도 django가 맞다고 여러번 생각했다.

 

자바스크립트 key와 Rest api key를 고민 하던 중 rest api node js를 통해 구현하기로 했다.

---

 

사전 준비 

사전에 준비해야 하는 것은 아래 3가지이다. 자세한 과정은 생략한다.

• 앱 등록
• uri 등록
• redirection uri 등록

다만 이 과정에서 유의해야 할 것이 uri등록과 redirection uri등록이다. 본인은 아래와 같은 상황을 마주쳤었다.

 

1. uri와 redirection uri의 상관관계가 없는 경우
2. redirection uri가 유효하지 않은 경우

 

 

ex 1) uri를 localhost:3000놓고 redirection을 aocalhost:3000과 같이 설정한 경우

 

ex 2) Android emulator를 사용하는 경우

         AVD에서는 localhost를 10.0.0.2를 사용하는데 유효하지 않은 redirection uri라고 화를 낸다.

         따라서 localhost로 작업하는 경우 ios simulator를 사용할 것을 권장한다.

          android emulator에서 rest api접근 하는 것을 열심히 찾았으나
         애초에 expo로 카카오 로그인 시도하는 사람이 그리 많지 않다. = 정보 부족
         heroku를 통한 hosting도 시도해봤지만 다 터졌다...

---

Kakao - Rest api 이해

 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

Kakao Developers

위 링크에 들어가서 설명을 보면 카카오 로그인은 다음과 같은 절차를 가진다.

1. access code 발급
2. 발급 받은 access code를 통한 access token 발급
3. access token을 통한 로그인

---

    1. access code 발급  

 

Documentation을 보면 access code 발급 과정은 위 링크를 get으로 요청한다.

 Get  /oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code Http 1.1

   

이 때 {REST_API_KEY}는 미리 발급 받은 app의 rest api key,

{REDIRCET_URI}는 미리 설정한 redirection uri.

    

 

Get으로 요청한다는 것에서 눈치를 챈 사람도 있을 것이다.

저 말은 그냥 webview를 요청할 때 uri를 저 링크로 설정하면 된다는 말이다.

 

 

주의할 점은 링크 앞에 https://kauth.kako.com을 붙여주어야 한다. 

---

- Expo -

module 설치

npm install --save react-native-webview

    언제부턴진 모르겠지만 최근 react는 webview 모델을 react-native에서 분리했기 때문에 module을 따로 설치해준다.

 

import { View } from "react-native";
import { WebView } from 'react-native-webview';
// other import settings...
const kakaologIn = ({navigation}) => {
//...
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=어쩌구&redirect_uri=어쩌구'}}
        />
      </View>
    );
    };

   

다음과 같이 작성한 후 실행을 하면 아래와 같은 이미지가 웹뷰에 등장한다. 

 

여기서 로그인 -> 동의하고 계속하기를 누르면 access code가 우리가 미리 설정했던 redirection uri로 전송된다.

즉, kakao에서 날아온 response를 redirection uri에서 받아 다시 app으로 날려주는 방식을 사용하면 된다.

    

   

본인은 redirection uri를 localhost:3000/oauth로 잡았다.

---

    - Server -

/*app.js*/
...

var oauthRouter = require('./routes/oauth');

var app = express();

...

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/oauth', oauthRouter);

...

module.exports = app;

/*oauth.js*/
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
    console.log("get");
    //console.log(req.query['code']);
  res.send("access code 지급 완료");
});

---

- Expo - 

import { View } from "react-native";
import { WebView } from 'react-native-webview';
// 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 = target.indexOf(exp);
      	if(condition!= -1){
            var request_code = target.substring(condition+exp.length);
            console.log("access code :: " + request_code);
      	  }
        }
    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=어쩌구&redirect_uri=어쩌구'}}
            injectedJavaScript = {runFirst}
            onMessage = {(event)=>{LogInProgress(event.nativeEvent["url"]);}}
            // onMessage ... :: webview에서 온 데이터를 event handler로 잡아서 logInProgress로 전달
        />
      </View>
    );
};

console로 찍어보면 장황한 길이의 access code를 확인할 수 있다.

 

여기까지 한다고 해서 로그인이 되는 것이 아니다.

access code를 이용하여 access token을 발급 받아야지만 로그인이 끝난다.

---

 

 

다음 번엔 access code를 통하여 access token을 발급 받는 과정을 포스팅하겠다.

 

 

 

Expo - Nodejs/Express를 통한 REST API 카카오 로그인(2)

Expo - Nodejs/Express를 통한 REST API 카카오 로그인(2)