🐕

SwiftUIのWKWebViewでBasic認証を行いWebアプリを表示する(iOS)

2022/06/06に公開

こちらの記事のiOS版です。経緯は、こちらの記事を参照ください。

https://zenn.dev/akira_kashihara/articles/a05bcc4099fa48

やりたいこと

Basic認証でロックが掛かっているWebアプリをWKWebViewで表示、操作できるようにしたいです。
このWebアプリで読み込むリソース(画像など)にも、Basic認証がかかっています。
SwiftUIを使って、WKWebViewを導入する方法はTomatoさんの記事[1]を参考にしました。

コードと実行結果

普段、iOSの開発は全くしておらず、Swiftを用いることもないので、このコードで動いたという紹介に留めたいと思います。
このコードは、stackoverflowのDavid Leppikさんの回答[2]をもとに、Apple DeveloperのForumにJim Doveyさんが投稿したコード[3]を参考に作成しています。

ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        WebViewTest()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
WebViewTest.swift
import SwiftUI
import WebKit

struct WebViewTest: UIViewRepresentable {
    func updateUIView(_ uiView: WKWebView, context: Context) {
        //
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    var url: String = "https://hogehoge.hoge"
    
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        view.navigationDelegate = context.coordinator
        view.load(URLRequest(url:URL(string: url)!))
        return view
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
            let parent: WebViewTest

            init(_ parent: WebViewTest) {
                self.parent = parent
            }

        func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge,
                         completionHandler: @escaping(URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
                let credential = URLCredential(user: "Basic認証のユーザ名",
                                               password: "Basic認証のパスワード",
                                               persistence: .forSession)
                completionHandler(.useCredential, credential)
            }
        }
}

struct WebViewTest_Previews: PreviewProvider {
    static var previews: some View {
        WebViewTest()
    }
}

実行結果は以下になります。
コンテンツは見せられないので、ぼかしになりますが、画像も読み込まれています。

iPhone Execution Result

脚注
  1. 【SwiftUI】でWebページを表示させる方法 / Tomato https://tomato-develop.com/swiftui-how-to-dispray-webpages/ (2022-06-06閲覧) ↩︎

  2. WKWebView with Basic auth / David Leppik https://stackoverflow.com/questions/60508114/wkwebview-with-basic-auth (2022-06-06閲覧) ↩︎

  3. Using WebKit Delegates / Jim Dovey https://developer.apple.com/forums/thread/126986 (2022-06-06閲覧) ↩︎

Discussion