[ RN ] 회원가입

Happhee·2021년 12월 23일
react native
1

[ImagineCup] NVP

목록 보기
8/8
post-thumbnail

우선, 회원가입을 위해 리듀서의 구조를 살짝 바꿨다.
회원가입을 할때, 정보를 저장해둘 reducer가 필요해졌다.
따라서

  • authReducer
    : uniqueId, passWord, name, phoneNumber, fileName, date
  • userReducer
    : uniqueId, passWord
    로 분리하였다

🖥 회원가입 절차

  1. 휴대폰 인증 : spring (coolsms) 인증 으로!
    -> 인증되면 이름 가져오기
  2. 간편 비밀번호 생성
  3. 신분증 등록
  4. 백신패스 등록
  5. 이름 모두 비교 분석후 회원정보 (디바이스아이디, 이름, 시간) 서버로 전송 후
  6. 로그인 화면으로 이동!!!

1️⃣ TakeTextMessage

📍 사용 기능

  • coolsms 으로 보내기 및 가져오기
  • 인증번호 유효시간 설정
    setInterval( ) & clearInterval( ) & useRef( )사용하기

📍 js 설정

  • containers/auth/TakeTextMessage.js
 const [min, setMin] = useState(padNumber(3, 2));
    const [sec, setSec] = useState(padNumber(0, 2));
    const time = useRef(180);
		//3분으로 설정
    const timerId = useRef(null);



    const startTimer = () => {
        clearInterval(timerId.current);
        time.current = 180;
        setMin(padNumber(3, 2));
        setSec(padNumber(0, 2));
        timerId.current = setInterval(() => {
            time.current -= 1;
            setSec(padNumber(time.current % 60, 2));
            setMin(padNumber(parseInt(time.current / 60), 2));
        }, 1000);


    }
    const stopTimer = () => {
        setMin(padNumber(3, 2));
        setSec(padNumber(0, 2));
        clearInterval(timerId.current);
    }
    useEffect(() => {
        if (time.current <= 0) {
            clearInterval(timerId.current);
        }
    }, [sec]);

형식이 잘못되거나 인증이 유효하지 않으면 stopTimer를 호출해 타이머를 멈추고,
유효한 인증이면 startTimer를 호출해 타이머를 시작한다.

<SignUpButton
	buttonName="인증"
    onPress={function () { 		
      Keyboard.dismiss();
      if (!isPhoneNumber(phoneNumber)) {
        Alert.alert('잘못된 형식의 전화번호입니다');
        stopTimer();
      }else {
        Alert.alert('인증 유효시간은 3분입니다');
        props.postMessage(phoneNumber);
        props.getMessage(phoneNumber);
        startTimer();
      }
    }
            } 
/>

2️⃣ SetPassword

📍 TextInput 설정

  • keyboardType =number-pad로 설정
  • secureTextEntry의 기능을 추가하여 비밀번호 타임
  • 최대 길이 maxLength는 6
  • 이를 만족하지 못하면 오류 발생! 
 <TextInput style={signUp.messageInput}
                                placeholder="숫자 6자리 입력"
                                placeholderTextColor={colors.nvpUnder}
                                keyboardType="number-pad"
                                maxLength={6}
                                secureTextEntry
                                onChangeText={(inputPassword) => {
                                    setPassword(inputPassword);
                                }} />

3️⃣ CheckCertificate

📍 TakeIdCard - RectangleCamera.js

사진 찍기 과정

  • 📝 react-native-rectangle-scanner 직사각형으로 인식 후 촬영
  • 사진찍는 화면에 뒤로가기
  • 찍고나서 결과를 화면에 보여주기
    -> 비율을 지정해서 보여주어야 하므로
    📝 react-native-responsive-screen 화면비율에 맞게 지정
  • 다시찍거나 사용하기 ->인식결과 밑에 보여주고!!! + 다시 찍기 또는 사용하기 버튼 눌러서 저장!!

1. 우선, 사진 찍기 라이브러리 설치 후

npm install react-native-rectangle-scanner --save

2. ios 연결하기

cd ios && pod install && cd ..
  • NVP > NVP > Info

    Privacy - Camera Usage Description 을 Key로 가지고
    카메라 접근이 필요합니다! 를 Value로 가지는
    Information Property 추가!

3. android 연결

include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-rectangle-scanner/android/openCVLibrary310')
  • android/app/src/main/AndroidManifest.xml 로 들어가서 카메라 권한을 설정
<uses-permission android:name="android.permission.CAMERA" />
  • components/RectangleCarmera.js 따로 생성
    npm install --save prop-types prop 타입을 가져오기 위한 라이브러리 필요!

4. 신분증 촬영 결과

  • 이후 이를 OCR 기능을 통해 이름을 따와야 함

📍 OCR 과정

  • 📝 구글 cloud vision 직사각형으로 인식 후 촬영
  • 선택 이유 : 한국어를 지원해주고 RN 내부적인 라이브러리보다 더 발달되어 있어 정확도가 높을 것으로 예상됨
  • 📝 React Native Firebase - Cloud Firestore 에 이미지를 올려서 접근할 수 있게 해서 불러와야함
  • 사진찍으면 fireStorage에 업로드
  • 찍고나서 ocr 결과를 화면에 보여주기
    -> 비율을 지정해서 보여주어야 하므로
  • 다시찍거나 사용하기 ->인식결과 밑에 보여주고!!! + 다시 찍기 또는 사용하기 버튼 눌러서 서버로 저장!!

1. 촬영 후 firebase Storage에 업로드

yarn add @react-native-firebase/storage

설치 후 

cd ios && pod install && npm run ios
  • RectangleCamera.js 에 uploadImageToStorage() 정의 
import storage from '@react-native-firebase/storage'; 
uploadImageToStorage(){
  let imageNames = this.state.currentImage.split('/');
  let refImageName = imageNames[imageNames.length - 1];
  //jpeg 파일 이름만 따오기!
  let reference = storage().ref(refImageName);
  // 핸드폰 로컬 저장소에 있는 이미지 업로드!!
  let task = reference.putFile(this.state.currentImage);
  task.then(() => {
                console.log("Upload");
  }).catch((e) => console.log(e));
}

업로드 성공

2. root폴더에 config.json 정의

{
    "googleCloud": {
        "api": "https://vision.googleapis.com/v1/images:annotate?key=",
        "apiKey": "앱키"
    }
}

3. RectangleCamera.js 에 클라우드 연결해서 ocr 텍스트 가져오기 실행!!

callGoogleVisionApi = async (uri) => {
        let googleVisionRes = await fetch(config.googleCloud.api + config.googleCloud.apiKey, {
            method: 'POST',
            body: JSON.stringify({
                "requests": [
                    {
                        "features": [
                            {
                                "type": "DOCUMENT_TEXT_DETECTION"
                            }
                        ],
                        "image": {
                            "source": {
                                "imageUri": uri
                            }
                        }
                    }
        });
                ]
            })
        await googleVisionRes.text()
            .then(googleVisionRes => {
                console.log(googleVisionRes.description);
                if (googleVisionRes) {
                }
            }).catch((err) => { console.log(err) })
    }

4. firebase storage에 있는 사진들에 접근 가능하도록 rule을 바꿔놓아야 한다.!

  • 권한 추가
  • Rules : 모두가 읽고 쓰기 가능하게 설정
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
       allow read, write;
    }
  }
}

5. OCR 분석 결과

 "responses": [
    {
      "textAnnotations": [
        {
          "locale": "ko",
          "description": "CT\n\u003c\n신분증 등록\n네모 상자가 나타나게 신분증을 찍어주세요\n신분증 촬영 결과\n주민등록증\n홍서희(洪瑞喜)\n000112-\n/\n다시찍기\n사용하기\n",
          "boundingPoly": {
            "vertices": [
              {
                "x": 22,
                "y": 39
  • 여기서 신분증 촬영 ~ -\n까지 뽑아와서 데이터저장!!

    신분증 등록 완료

6. 신분증 사진 삭제

  • 개인정보법에 의해 신분증은 저장해놓으면 안된다.
const imageRef = storage().refFromURL(uri);
                    imageRef.delete();

📍 TakeVaccinePass

1. 📝 react-native-image-picker 를 통해 갤러리에서 쿠브 인증서를 가져온다.

yarn add react-native-image-picker
cd ios && pod install

2. react-native-image-picker의 라이브러리인 launchImageLibrary를 사용하여 갤러리에 접근한다.

  • TakeVaccinePass.js
	let [imageUri, setImageUri] = useState('');
   	const openPicker = () => {
        launchImageLibrary({}, (response) => {
		//선택한 이미지의 경로를 가져와서 view로 보여준다.
            console.log(response.assets[0].uri);
            setImageUri(response.assets[0].uri);
        })
    }
      ... 
    <View style={signUp.cameraView}>
                <Image
                    source={{ uri: imageUri }} style={{ width: '100%', height: '100%' }} />
            </View>


성공적으로 경로를 가져온 것을 볼 수 있다.

3. 가져온 이미지 fireStorage에 업로드 후 ocr 분석

firebaseStorage 관리를 위해 firebaseStorage.js를 만들어
모듈로써 관리한다 

import storage from '@react-native-firebase/storage';

export function registerImage(imageName) {


    let currentImageName = imageName.split('/');
    let refImageName = currentImageName[currentImageName.length - 1];
    let reference = storage().ref(refImageName);
    let task = reference.putFile(imageName);
   
    task.then(() => {
        console.log("Upload");
    }).catch((e) => {
        console.log(e)
        console.log("에러")
    });
}

이를 백신패스 등록하는 곳에 연결

import { registerImage } from '../../utils/firebaseStorage';

...

    const openPicker = () => {
        launchImageLibrary({}, (response) => {

           
            setImageUri(response.assets[0].uri);

            registerImage(response.assets[0].uri);
        })
    }


📍 회원가입 가능 여부 판단

  • 초기 이름
  • 신분증 데이터
  • 백신패스 데이터
    를 종합하여 회원가입 가능 여부를 판단하여 진행

4️⃣ 회원가입 완료

회원가입할때

  • id
  • password
  • name
  • phone
  • filename
  • date(인증서 제출알짜)
profile
Happhee
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다
이전 포스트

[ RN] 로그인 및 JWT

0개의 댓글