소셜 로그인

u·2022년 4월 11일

ReactNative

목록 보기
11/12

원리

oauth 어플

https://velog.io/@undefcat/OAuth-2.0-%EA%B0%84%EB%8B%A8%EC%A0%95%EB%A6%AC

oauth 웹

https://velog.io/@yaytomato/프론트에서-안전하게-로그인-처리하기

네이버

https://github.com/react-native-seoul/react-native-naver-login

카카오

https://github.com/react-native-seoul/react-native-kakao-login
https://www.hides.kr/1065

react-native-kakao-login 라이브러리에 있는 README.md와 강의 동영상을 활용해서 프로젝트에 적용하자.

주의사항

  • 카카오 디벨로퍼 앱 설정에서 번들ID를 xcode상에 존재하는 번들ID를 붙여야한다.
  • AppDelegate.m에서 마지막 import문 다음에 이 코드를 추가해주면 된다
#import <RNKakaoLogins.h>
- (BOOL)application:(UIApplication *)app
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
 if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
 }

 return NO;
}

코드 적용해보기

App.js

import React, {useState, useEffect} from "react"
import {View, Text, Button, StyleSheet} from "react-native"
import {KakaoOAuthToken, login, getProfile as getKakaoProfile} from "@react-native-seoul/kakao-login"

export default ()=>{

  const [result, setResult] = useState("nothing")

  const signInWithKakao = async ()=> {
    const token = await login();
    setResult(JSON.stringify(token));
    console.log(result)
  };
  const getProfile = async ()=>{
    const profile = await getKakaoProfile();
    setResult(JSON.stringify(profile));
    console.log(result)
  };

  useEffect(()=>{
    console.log("Screen loaded")
    console.log(result)
    console.log(login)
    console.log(KakaoOAuthToken)
  })

  return (
    <View style={{padding:40, justifyContent: "center", alignItems: "center"}}>
      <Text style={{fontSize:30, padding: 20}}>정보 출력</Text>
      <Text style={{fontSize:17}}>{result}</Text>
      <Button
      title="login"
      onPress={()=>{signInWithKakao()}}/>
      <Button
      title="get Profile"
      onPress={()=>{getProfile()}} />
    </View>
  )
}

알아둬야 할 지식

  • info.plist : 애플리케이션의 기본 정보가 담긴 설정 파일이다. '명세서'로 볼 수 있다.
    앱 실행과 관련된 다양한 설정을 할 수 있다.

https://devyul.tistory.com/entry/iOS-infoplist%EB%9E%80

0개의 댓글