iOS UIWebView、WKWebView注入Cookie

avatar
奇舞团移动端团队 @奇舞团

级别： ★☆☆☆☆
标签：「iOS 」「UIWebView注入Cookie」「WKWebView注入Cookie」
作者： WYW
审校： QiShare团队

前言 上一篇文章中，笔者分享了Cookie简介，在这篇文章中，笔者将在分享原生App中，嵌入UIWebView、WKWebView时，注入Cookie、及获取服务端返回的响应头中的Cookie。

为什么要在UIWebView、WKWebView中注入Cookie

笔者设想了如下场景：

有时App中不仅仅会有原生的界面，还会有嵌入的UIWebView，或者是WKWebView。 比如说有一个App QiShare，嵌入了简书的网页。那么，对于一个使用繁体的用户，我们可以在加载简书WebView的时候，在Cookie中设置local为zh-TW，这样用户可以从原生QiShare App，切换到浏览简书WebView的时候，仍然看到的是繁体的内容。

另外，仍然以简书为例，笔者在使用WebView访问QiShare的网址的时候发现，是“已关注”状态，这一点是通过在Cookie中设置remeber_user_token做到的。

具体点描述这个例子

以访问简书QiShare Cookie简介为例：笔者使用UIWebView在加载Cookie简介页面的时候，在Cookie中设置了local为zh-TW。不过首次加载的时候，不会直接显示为繁体，笔者以为原因是首次简书WebView，简书服务端还没有返回相应繁体信息。不过笔者第二次打开简书的其他WebView的时候，仍然没有显示为繁体，这一点还有点纳闷。

笔者试了一下，当我们打开QiShare的链接，可以发现显示内容已经为繁体了。

因为上边的繁体显示不稳定，我们还通过启动WebView前，注入Cookie，通过查看打开WebView后对QiShare关注状态来说明Cookie中remember_user_token的作用，打开WebView后，QiShare的关注状态，显示已关注。这需要我们在简书的WebView上登录过帐号（在模拟器上如果想登录简书的UIWebView，可以打开任意一篇文章，然后点赞，便可以到WebView的登录界面），然后，在Cookie里边会有个remember_user_token来告诉我们是已关注的状态。

UIWebView 注入Cookie：

笔者先以UIWebView加载QiShare简书，设置Cookie中的locale为zh-TW，为例说明UIWebView注入Cookie，如下代码可以做到设置Cookie中代表本地的语言的参数locale为'繁体'（zh-TW）。

    NSDictionary *keyPropertiesLocal = @{
                                    NSHTTPCookieName: @"locale",
                                    NSHTTPCookieValue: @"zh-TW",
                                    NSHTTPCookiePath: @"/",
                                    NSHTTPCookieDomain: @".jianshu.com"
                                    };
                                    
	NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:keyPropertiesLocal];
	
	[[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
	
	NSURL *url = [NSURL URLWithString:@"https://www.jianshu.com/p/1174d1dbe650"];
	NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
	[_webView loadRequest:request];

使用[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:设置Cookie的方式可以做到，每次加载UIWebView的时候，都会自动携带已注入的Cookie，有点全局性的效果。

笔者写了个使用NSHTTPCookieStorage 注入Cookie的方法：

代码如下：

//! 生成指定cookieName cookieValue cookiePath cookieDomain 的NSHTTPCookie 实例
- (NSHTTPCookie *)cookieWithName:(NSString *)name cookieValue:(NSString *)value  cookiePath:(NSString *)path cookieDomain:(NSString *)domain {
    
    NSDictionary *keyProperties = @{
                                         NSHTTPCookieName: name,
                                         NSHTTPCookieValue: value,
                                         NSHTTPCookiePath: path,
                                         NSHTTPCookieDomain: domain
                                         };
    
    NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:keyProperties];
    [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
    return cookie;
}

//! 设置 （生成指定cookieName cookieValue cookiePath cookieDomain 的NSHTTPCookie 实例） 到NSHTTPCookieStorage
- (NSHTTPCookie *)setCookieWithName:(NSString *)name cookieValue:(NSString *)value  cookiePath:(NSString *)path cookieDomain:(NSString *)domain {
    
    if (!name || !value || !path || !domain) {
        return nil;
    }
    NSHTTPCookie *cookie = [self cookieWithName:name cookieValue:value cookiePath:path cookieDomain:domain];
    [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
    
    return cookie;
}

使用方式如：

    NSURL * url = [NSURL URLWithString:@"https://www.jianshu.com/p/1174d1dbe650"];
    [self setCookieWithName:@"local" cookieValue:@"zh-TW" cookiePath:@"/" cookieDomain:kJianshuDomain];
    [self setCookieWithName:@"QiShareToken" cookieValue:@"QiShareTokenValue" cookiePath:@"/" cookieDomain:kJianshuDomain];
    [self setCookieWithName:@"QiShareKey" cookieValue:@"QiShareValue" cookiePath:@"/" cookieDomain:kJianshuDomain];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
    [_webView loadRequest:request];

在Cookie中设置过local后的Demo效果如下图，可以看到在“已关注”，“最新评论”，“热门”等部分已经显示为了繁体。

UIWebView_zh-TW.gif

使用Charles查看Cookie注入效果如下图：

UIWebViewCookie.png

WKWebView注入Cookie：

笔者以WKWebView加载掘金url，且加载过程中WKWebView注入Cookie，WKWebView设置如下Cookie（设置一个名为QiShareAuth1 值也为QiShareAuth1的Cookie；另外设置一个名为QiShareAuth2 值也为QiShareAuth2的Cookie）。 可以使用如下代码：

在创建WKWebView的时候就已经注入了要设置的Cookie

    WKUserContentController *userContentController = [WKUserContentController new];
    NSString *cookieSource = [NSString stringWithFormat:@"document.cookie = 'QiShareAuth1=QiShareAuth1';document.cookie = 'QiShareAuth2=QiShareAuth2';"];
    WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource:cookieSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
    [userContentController addUserScript:cookieScript];
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = userContentController;
    
    NSURL *juejinUrl = [NSURL URLWithString:@"https://juejin.cn"];
    NSMutableURLRequest *mJuejinRequest = [[NSMutableURLRequest alloc] initWithURL:juejinUrl];
    // [mJuejinRequest addValue:@"QiShareAuth1=QiShareAuth1;QiShareAuth2=QiShareAuth2" forHTTPHeaderField:@"Cookie"];
    WKWebView *wkWebV  = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
    _wkWebView = wkWebV;
   [self.view addSubview:wkWebV];

仍有问题？

笔者用Demo QiNetwork查看使用如上代码效果的时候，以为已经搞定了问题，结果发现，WKWebView在首次加载请求的时候，并没有携带我们注入的Cookie。查看了相关资料后有博客提及可以在加载请求前，使用给_wkWebView.configuration.websiteDataStore.httpCookieStore设置Cookie的方式，解决问题，不过笔者试过了，并没有达到预期效果。

笔者最终采用的是在首次加载请求的时候，在使用上述代码的情况下，同样给mJuejinRequest添加了一次请求所需的cookie，相关代码如下：

[mJuejinRequest addValue:@"QiShareAuth1=QiShareAuth1;QiShareAuth2=QiShareAuth2" forHTTPHeaderField:@"Cookie"];

上述代码也是可用于想设置某个单个的请求的Cookie。 使用Charles查看Cookie注入效果如下图：

WKWebViewCookie1.png

WKWebViewCookie2.png

Demo：

更多相关内容，可查看 QiNetwork

参考学习网址

小编微信：可加并拉入《QiShare技术交流群》。

关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
Cookie简介
iOS 图标&启动图生成器（一）
算法小专栏：“D&C思想”与“快速排序”
iOS 避免常见崩溃（二）
算法小专栏：选择排序
iOS Runloop（一）
iOS 常用调试方法：LLDB命令
iOS 常用调试方法：断点
奇舞周刊

avatar
文章
阅读
粉丝