【Swift】WKWebViewでCookieを取得する

はじめに

いま、私はUIKitの練習としてQiitaのモバイル版を作成してます。
しかし、Qiitaモバイルを作成にあたって問題点があることに気づきました。
Qiitaの公式APIにはタイムラインやトレンドなどを取得できるAPIが存在しません。

ではどうするか。

そういう時はCookieを使おう！！
というわけでWKWebViewを使用してQiitaのログイン時Cookieを取得します。

流れ

Qiitaのログイン画面を表示
↓
ユーザーがログイン
↓
ホームに遷移したらCookieを取得

実装

今回はKeychainAccessを使用してログイン完了時に保存してます。

import UIKit
import WebKit
import KeychainAccess

class WebViewController: UIViewController {

    var webView: WKWebView!

    let keychain = Keychain(service: "com.Qiita")

    var observers = [NSKeyValueObservation]()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView = WKWebView(frame: view.frame)
        view.addSubview(webView)

        let request = URLRequest(url: URL(string: "https://qiita.com/login?redirectTo=%2F")!)
        webView.load(request)

        observeUrl()
    }

    func observeUrl() {
        observers.append(webView.observe(\.url, options: .new) { _, _ in
            guard let url = self.webView.url else { return }
            if url == URL(string: "https://qiita.com/") {
                self.getCookies()
            }
        })
    }

    func getCookies() {
        webView.configuration.websiteDataStore.httpCookieStore.getAllCookies() { (cookies) in
            for cookie in cookies {
                if cookie.domain.contains("qiita.com") {
                    self.keychain["\(cookie.name)"] = "\(cookie.value)"
                }
            }
            let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
            let vc = storyboard.instantiateViewController(withIdentifier: "user")
            vc.modalPresentationStyle = .fullScreen
            self.present(vc, animated: true)
        }
    }
}

解説

インポート

WKWebViewを使用できるようにします。

import WebKit

WKWebViewの表示

webView = WKWebView(frame: view.frame)
view.addSubview(webView)

Qiitaのログイン画面の表示

let request = URLRequest(url: URL(string: "https://qiita.com/login?redirectTo=%2F")!)
webView.load(request)

URLの監視

WKWebViewが現在表示しているURLを監視します。
URLがhttps://qiita.com/であった場合getCookieを実行します。

func observeUrl() {
    observers.append(webView.observe(\.url, options: .new) { _, _ in
        guard let url = self.webView.url else { return }
        if url == URL(string: "https://qiita.com/") {
            self.getCookies()
        }
    })
}

Cookieの取得

実行時に表示されている画面のCookieを取得します。

func getCookies() {
    webView.configuration.websiteDataStore.httpCookieStore.getAllCookies() { (cookies) in
        for cookie in cookies {
            if cookie.domain.contains("qiita.com") {
                self.keychain["\(cookie.name)"] = "\(cookie.value)"
            }
        }
        let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
        let vc = storyboard.instantiateViewController(withIdentifier: "user")
        vc.modalPresentationStyle = .fullScreen
        self.present(vc, animated: true)
    }
}

関数上部の以下の部分では取得したCookieを保存しています。

for cookie in cookies {
    if cookie.domain.contains("qiita.com") {
        self.keychain["\(cookie.name)"] = "\(cookie.value)"
    }
}

関数下部の以下の部分ではホームへ自動画面遷移させています。

let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
let vc = storyboard.instantiateViewController(withIdentifier: "user")
vc.modalPresentationStyle = .fullScreen
self.present(vc, animated: true)

完成動画

おわり

Cookie最強！！