iOS, 웹뷰에서 JS SDK 방식 로그인 간단히 테스트

iOS 웹뷰에서 로그인이 정상 작동하지 않는다는 문의가 종종 있어 간단히 테스트 해볼 수 있는 예제를 준비했습니다. 

---

Objective-C 

1. 신규 프로젝트를 생성하고 웹뷰 객체를 Main.stroyboard 에 올려 놓고 테스트할 사이트를 호출합니다.

※ 웹뷰를 이용한 JS SDK authorize 방식 로그인은 사이트를 호출하는 것 외에 따로 조치할 것이 없습니다.

//ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIView *viewWeb;
@end

//ViewController.m
#import "ViewController.h"
#import <WebKit/WebKit.h>

@interface ViewController (){
    WKWebView *webView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    WKWebView *webView = [[WKWebView alloc] init];
    webView.frame = self.view.bounds;
    [self.view addSubview:webView];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://developers.kakao.com/tool/demo/login/login"]];
    [webView loadRequest:request];
}
@end

Swift

1. 신규 프로젝트를 생성하고 아래 코드를 적용합니다. 

※ 웹뷰를 이용한 JS SDK login(팝업) 방식 로그인은 팝업을 띄울때 웹뷰를 생성해야합니다. 디벨로퍼스 가이드 하이브리드앱에 적용하기 참고

//ViewController.swift
import UIKit
import WebKit
@objcMembers class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    // 웹뷰 목록 관리
    var webViews = [WKWebView]()
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        NotificationCenter.default.addObserver(self, selector: #selector(didRecieveTestNotification(_:)), name: NSNotification.Name("TestNotification"), object: nil)

        let screenSize: CGRect = UIScreen.main.bounds
        webView = createWebView(frame: screenSize, configuration: WKWebViewConfiguration())
        // Do any additional setup after loading the view.
        let myRequest = URLRequest(url: Var.myURL!)
        webView.load(myRequest)
    }
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
        
    }
    
    @objc func didRecieveTestNotification(_ notification: Notification) {
            print("Test Notification")
        let myRequest = URLRequest(url: Var.myURL!)
        webView.load(myRequest)
    }
    
    /// ---------- 팝업 열기 ----------
    /// - 카카오 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
        }
        return createWebView(frame: frame, configuration: configuration) // 웹뷰를 생성하여 리턴하면 현재 웹뷰와 parent 관계가 형성됩니다.
    }

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

    // 웹뷰 생성 메소드 예제
    func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {
        let webView = WKWebView(frame: frame, configuration: configuration)
        webView.uiDelegate = self // set delegate
        webView.navigationDelegate = self
        self.view.addSubview(webView) // 화면에 추가
        self.webViews.append(webView) // 웹뷰 목록에 추가
        return webView // 그 외 서비스 환경에 최적화된 뷰 설정하기
    }

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

//Var.swift
import Foundation
class Var{
    public static var myURL = URL(string:"https://developers.kakao.com/tool/demo/login/login")
}

 

※ https가 아닌 http주소를 호출하려면 Info.plist에 아래 설정을 추가해야합니다.