리액트네이티브 웹뷰 나이스 인증

Question

Node와 리액트네이티브 웹뷰로 나이스인증 결과값까지는 보이는데웹뷰 내 데이터를 어떻게 가져와야할까요?import React, { useEffect, useRef, useState } from 'react';import {Alert, Linking, Platform, ScrollView, Text, View} from 'react-native';import tw from '../../../lib/tailwind';import SubmitButton from '../../../components/SubmitButton';import {WebView, WebViewMessageEvent} from 'react-native-webview';import SendIntentAndroid from 'react-native-send-intent';import { authNice } from '../../../services';// import AsyncStorage from '@react-native-async-storage/async-storage';// import Config from 'react-native-config';export default function VerificationScreen(props: {onNextPage: (a?: any) => void;}) {// props.onNextPage()const webViewRef = useRef(null);const[encodeData, setEncodeData] = useState('');const[webviewOpen, setWebviewOpen]= useState(false);const [html, setHtml] = useState('');const [bodyData, setBodyData] = useState('');const onShouldStartLoadWithRequest =(e:any) =>{if(e.url.startsWith('http://') || e.url.startsWith('https://') || e.url.startsWith('about:blank')) {return true;} if(Platform.OS === 'android'){console.log('안드로이드'); SendIntentAndroid.openChromeIntent(e.url).then(isOpend =>{if(!isOpend) Alert.alert('앱 실행에 실패했습니다.')}).catch(err =>{console.log('안드로이드 에러 : ', err);});return false; }else{Linking.openURL(e.url).catch(err =>{console.log('ios 에러 : ', err)})return false;} } const handlerMessage = async(event:WebViewMessageEvent)=>{const { nativeEvent} = event;const message = JSON.parse(nativeEvent.data);console.log('e : ',message)}const openNiceApi = async()=>{const enCode = await authNice(); delete enCode.requestno; setEncodeData(enCode.enc_data); setBodyData(`m=checkplusService&token_version_id=${encodeURIComponent(enCode.token_version_id)}&enc_data=${encodeURIComponent(enCode.enc_data)}&integrity_value=${encodeURIComponent(enCode.integrity_value)}`); setWebviewOpen(true);} return ({webviewOpen ? () : ( 투명한 서비스 이용을 위해본인인증할게요본인인증따라서 신뢰도 높은 연락을 위해 본인인증 절차를 필요로 합니다. props.onNextPage() }onPress={() => openNiceApi()}/>잠시만요!PASS 앱이 설치 되어 있나요? 본인인증에 필요해요.본인확인 절차 및 미성년자 가입방지를 위한 본인인증이며, 차후 공인중개사으로 등급 변경 요청 시 확인을 위해휴대폰 전화번호만 저장합니다.{/* m=checkplusService&EncodeData=${encodeURIComponent(encodeData)} */})});}

월급은나의빛 · Answer

다음 페이지의 예를 참조하면 될 것 같은데요.React Native WebView: A complete guide - LogRocket Blog핵심은 리턴하는 컴포넌트에 onLoad 속성을 추가해서 onLoadHandler 가 불려나오게 하는 것으로 보입니다. { console.log(event.nativeEvent.data); }} onLoad={onLoadHandler} <-- onLoad > injectedJavaScript={runFirst} injectedJavaScriptBeforeContentLoaded={runBeforeFirst} /> onLoadHandler 에서 injectedJavaScript 라는 함수를 inject를 해서 쓰는군요. const onLoadHandler = ({ nativeEvent }) => { if (!nativeEvent.url.startsWith("http")) { webRef.current.injectJavaScript(injectedJavaScript); } };injectedJavaScript 함수에서는 document.getElementById() 를 사용가능한 것으로 보입니다. 그걸로 정보가 있는 element 찾아서 innerHtml로 읽어내면 되지 않을까요?

리액트네이티브 웹뷰 나이스 인증

1개의 답변

기술 목록