flutter_inappwebview에서 popup window가 뜨지 않을 때 / google login 안 될 때 해결방법

JuhyunKim·2022년 11월 2일
0

flutter

목록 보기
1/5

첫 글이니만큼 내가 해결방법을 찾느라 오래 걸렸던 솔루션을 올려본다.
요즘 반응형 웹을 사용해서 어플을 만드는, 즉 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을 성공적으로 시행할 수 있다.

0개의 댓글