iOS 하이브리드앱(웹뷰) 팝업방식 로그인, 카카오링크, 채널상담

JavaScript SDK를 사용하는 웹페이지를 iOS 하이브리드앱(웹뷰)에서 사용하고자 할때 처리해야할 사항을 정리했습니다.

 

1. 웹뷰 객체를 StoryBoard에 올리지말고 객체관리를 위해 createWebView를 호출해서 생성합니다.

2. 가이드대로 구현하시면, 팝업을 별도 웹뷰로 띄웁니다. (팝업이 안뜨면 아래 코드 구현부를 확인해봅니다.)

3. 모바일에서 팝업방식 로그인, 카카오링크, 채널상담은 카카오톡 스킴을 호출 하므로 팝업만 표시되고 작동하지 않는다면 스킴 분기 구현부를 확인해봅니다. 

4. 하얀화면이 나오는 것은 http주소를 호출 했을때 입니다. (기본 https만 가능, http호출은 아래 info.plist 설정 참조)

 

디벨로퍼스 가이드 : 하이브리드 앱에 적용하기

ViewController.swift

//
//  ViewController.swift
//  webTest
//
//  Created by kakao on 2021/09/01.
//

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    // 웹뷰 목록 관리
    var webViews = [WKWebView]()
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let screenSize: CGRect = UIScreen.main.bounds
        webView = createWebView(frame: screenSize, configuration: WKWebViewConfiguration())
        
        // Do any additional setup after loading the view.
        let myURL = URL(string:"http://test-tam.pe.kr")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    func webView(_ webView: WKWebView,
                 decidePolicyFor navigationAction: WKNavigationAction,
                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void
    ) {
        print(navigationAction.request.url?.absoluteString ?? "")

        // 카카오 SDK가 호출하는 커스텀 스킴인 경우 open(_ url:) 메소드를 호출합니다.
        if let url = navigationAction.request.url
            , ["kakaokompassauth", "kakaolink", "kakaoplus"].contains(url.scheme) {

            // 카카오톡 실행
            UIApplication.shared.open(url, options: [:], completionHandler: nil)

            decisionHandler(.cancel)
            return
        }

        // 서비스 상황에 맞는 나머지 로직을 구현합니다.


        decisionHandler(.allow)
    }
    

    /// ---------- 팝업 열기 ----------
    /// - 카카오 JavaScript SDK의 로그인 기능은 popup을 이용합니다.
    /// - window.open() 호출 시 별도 팝업 webview가 생성되어야 합니다.
    ///
    func webView(_ webView: WKWebView,
                 createWebViewWith configuration: WKWebViewConfiguration,
                 for navigationAction: WKNavigationAction,
                 windowFeatures: WKWindowFeatures
    ) -> WKWebView? {
        guard let frame = self.webViews.last?.frame else {
            return nil
        }

        // 웹뷰를 생성하여 리턴하면 현재 웹뷰와 parent 관계가 형성됩니다.
        return createWebView(frame: frame, configuration: configuration)
    }

    /// ---------- 팝업 닫기 ----------
    /// - window.close()가 호출되면 앞에서 생성한 팝업 webview를 닫아야 합니다.
    ///
    func webViewDidClose(_ webView: WKWebView) {
        destroyCurrentWebView()
    }

    // 웹뷰 생성 메소드 예제
    func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {
        let webView = WKWebView(frame: frame, configuration: configuration)

        // set delegate
        webView.uiDelegate = self
        webView.navigationDelegate = self

        // 화면에 추가
        self.view.addSubview(webView)

        // 웹뷰 목록에 추가
        self.webViews.append(webView)

        // 그 외 서비스 환경에 최적화된 뷰 설정하기


        return webView
    }

    // 웹뷰 삭제 메소드 예제
    func destroyCurrentWebView() {
        // 웹뷰 목록과 화면에서 제거하기
        self.webViews.popLast()?.removeFromSuperview()
    }

}

※ 웹뷰가 안뜨고 하얀화면만 나올때 : https가 아닌 http호출 할때

App Transport Security Settings 항목과 하위 항목을 추가 해줍니다.