✍ 문제점
플러터 웹뷰에서 회원 가입 시 pass 휴대폰 인증 새창에서 완료된 결과 데이터을 회원정보입력 창에 데이터를 전송을 해야하는데 , 데이터만 저장되고 해당 데이터를 넘기지 못하는 이슈가 발생 했다
👉 의문
자바스크립트 결과 데이터를 플러터에서 받아서 다시 데이터를 보내주면 되지 않을까?
class WebViewFw extends StatefulWidget {
_WebViewFwState createState() => _WebViewFwState();
}
class _WebViewFwState extends State<WebViewFw> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
late WebViewController _myController;
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
build(BuildContext context) {
return WebView(
initialUrl: 'url',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_myController = webViewController;
_controller.complete(webViewController);
},
onProgress: (int progress) {
print("WebView is loading (progress : $progress%)");
},
javascriptChannels: <JavascriptChannel>{
_baseJavascript(context),
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
gestureNavigationEnabled: true,
);
}
Widget
JavascriptChannel _baseJavascript(BuildContext context) {
return JavascriptChannel(
name: 'baseApp',
onMessageReceived: (JavascriptMessage message) {
if (message.message == 'authok') {
//showAlertDialog(message.message, context);
print('javascript run');
_myController.evaluateJavascript("submitApp();");
}
});
}
}
👉 결과 JavascriptChannel 생성 후 Javascript내에 결과값 받아올 부분에
window.[Channel name] 입력 후 웹뷰 내에서 자바스크립트 컨트롤 가능
위 채널 실행시 pass새창 핸드폰 인증 후 받은 결과 값을 받으면 bassApp에 authok 값을 주게 된다.
message.message 받은 메세지 값이 authok 이면 👉_myController.evaluateJavascript("submitApp();");
submit 실행하여 값을 넘겨줌
👉 채널을 이용하여, 자바스크립트 값받아오기 , 전송하기로 양방향 통신이가능