첫 글이니만큼 내가 해결방법을 찾느라 오래 걸렸던 솔루션을 올려본다.
요즘 반응형 웹을 사용해서 어플을 만드는, 즉 Hybrid App 형태로 만드는 경우가 많아서 제일 많이 쓰는 라이브러리가 flutter_webview와 flutter_inappwebview 인 것 같다.
flutter_webview보다 flutter_inappwebview가 자유도가 높아서 flutter_inappwebview를 사용했는데.. 다른 페이지로 넘어가는건 다 되는데 로그인을 하려니 팝업창이 안 뜨더라..
서치하는데에 오래걸렸지만 다행히 flutter_inappwebview issue page에 개발자가 직접 답변한 글이 있더라.
https://github.com/pichillilorenzo/flutter_inappwebview/issues/431
그러니까 중요한 점은, InAppWebView 위젯에 onCreateWindow라는 함수에 pop up dialog를 따로 띄워줘야 했다.
InAppWebView( initialUrl: "https://drrabbittutor.com/", initialOptions: InAppWebViewGroupOptions( android: AndroidInAppWebViewOptions( allowContentAccess: true, builtInZoomControls: true, thirdPartyCookiesEnabled: true, allowFileAccess: true, supportMultipleWindows: true ), crossPlatform: InAppWebViewOptions( verticalScrollBarEnabled: true, clearCache: true, disableContextMenu: false, cacheEnabled: true, javaScriptEnabled: true, javaScriptCanOpenWindowsAutomatically: true, debuggingEnabled: true, transparentBackground: true, ), ), onWebViewCreated: (InAppWebViewController controller) { _webViewController = controller; }, onCreateWindow: (controller, createWindowRequest) async { showDialog( context: context, builder: (context) { return AlertDialog( content: Container( width: MediaQuery.of(context).size.width, height: 400, child: InAppWebView( // Setting the windowId property is important here! windowId: createWindowRequest.windowId, initialOptions: InAppWebViewGroupOptions( android: AndroidInAppWebViewOptions( builtInZoomControls: true, thirdPartyCookiesEnabled: true, ), crossPlatform: InAppWebViewOptions( cacheEnabled: true, javaScriptEnabled: true, debuggingEnabled: true, userAgent: "Mozilla/5.0 (Linux; Android 9; LG-H870 Build/PKQ1.190522.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36" ), ), onWebViewCreated: (InAppWebViewController controller) { }, onLoadStart: (InAppWebViewController controller, String url) { print("onLoadStart popup $url"); }, onLoadStop: (InAppWebViewController controller, String url) async { print("onLoadStop popup $url"); }, onCloseWindow: (controller) { // On Facebook Login, this event is called twice, // so here we check if we already popped the alert dialog context if (Navigator.canPop(context)) { Navigator.pop(context); } }, ), ), ); }, ); return true; }, ),
그리고 또 알아둬야 할 점.
보통 이런식으로 팝업창을 사용하는 경우는 로그인 팝업을 띄울 때 인데, 나 역시 구글로그인이 안돼서 찾기 시작했다.
찾으면서 알게 된 점은, google login을 하려면 user agent를 따로 지정해줘야 한다.
flutter_inappwebview 에서는 이 또한 지원하는데 InAppWebView의 InitialOptions 를 지정할 때 userAgent 옵션에 다음을 넣어주면 된다.
"Mozilla/5.0 (Linux; Android 9; LG-H870 Build/PKQ1.190522.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36"
이렇게 하면 google login을 성공적으로 시행할 수 있다.