Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@nofrmm

WebViewからfacebookへログインしたあとの白い画面対応

はじめに

webView内でいいねボタンを押すだけ、が思った以上に大変でした。
国内の記事がなかったので、べつの方法もあるとは思いますが
探しきれなかったので、こちらに書いておきます。

facebookのログイン機能を素のwebviewでつかう

ログイン情報がログアウト、初回のアクセス

いいねボタンやシェアボタンを押したあとの挙動はログインページに遷移しました。
アプリ側は何もしなくても、webview内でJSがそのまま実行しているままの挙動です。
ログインし、表示されたのは真っしろな画面。

もう一度良いねボタンを設置したページを表示

ログイン前と同じ状態で表示されていました。
ボタンを押すと、いいねボタンのカウントアップが確認できたので
ああ、ログインできてたんだ・・・ということが分かります。

これはあかん。

挙動をみる

ControllerへUIWebViewDelegateのメソッドを追加

ViewController.m
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *urlString = [NSString stringWithFormat:@"%@", request];
    NSLog(@"url :%@", urlString);
    return YES;
}

怪しい名前のURLがログに出力される
https://www.facebook.com/plugins/close_popup.php#_=_

close_popup.phpは何をしているのか

close_popup.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Facebook</title></head>
<body><script>window.close();</script></body>
</html>

webviewだと何もしません。だから問題。

どうしようか

表示しないのがいい。(という判断)
でも遷移しないとログイン画面から動けない

戻ろう・・・

ViewController.m
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    if ([urlString rangeOfString:@"close_popup.php"].location != NSNotFound) {
        if (webView.canGoBack){
            [webView goBack];
        }
    }
    return YES;
}

コード全部

ViewController.m
@interface ViewController ()<UIWebViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect r = [[UIScreen mainScreen] bounds];
    // Do any additional setup after loading the view, typically from a nib.
    UIWebView *wv = [[UIWebView alloc] init];
    wv.delegate = self;
    wv.frame = CGRectMake(0, 0,r.size.width, r.size.height);
    wv.scalesPageToFit = YES;
    [self.view addSubview:wv];

    NSURL *url = [NSURL URLWithString:@"いいねボタンなどをおいたコンテンツのURL"];
    NSURLRequest *req = [NSURLRequest requestWithURL:url];
    [wv loadRequest:req];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *urlString = [NSString stringWithFormat:@"%@", request];
    //NSLog(@"url :%@", urlString);
    if ([urlString rangeOfString:@"close_popup.php"].location != NSNotFound) {
        //NSLog(@"close_popup.php found");
        if (webView.canGoBack){
            [webView goBack];
            return NO;
        }
    }
    return YES;
}
@end

参考URL

http://stackoverflow.com/questions/11622845/facebook-login-fails-in-uiwebview
http://brainwashinc.com/2014/01/06/ios-uiwebview-handle-window-openwindow-close-popup-page/
http://sakebook.blogspot.jp/2013/03/facebookjavascriptsdkuiwebview.html

最後に

Facebookから提供されているiOS用のSDKでログインするとパーミションが表示されるのが嫌なので
こちらの方法を取りますが
iOSの場合はAppleの申請がネックになり、Facebook側に仕様変更(close_popup.phpの名前が変わるなど)が発生すると修正までのタイムラグになり機会損失につながります。

「JSでの回避、webviewは素のままで」が望ましい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What are the problem?