使Facebook登录使用Android Webview [英] Making facebook login work with an Android Webview

问题描述

我只想在Android中的WebView上实现Facebook登录。问题是在我点击我的HTML页面上的Facebook按钮，并在Facebook对话框中插入用户名和密码。 url重定向只是给我一个黑页。

  @Override 
 public void onCreate（Bundle savedInstanceState）{
 super.onCreate（savedInstanceState）; 
 
 WebView webview = new WebView（this）; 
 webview.setWebChromeClient（new WebChromeClient（））; 
 webview.getSettings（）。setPluginState（PluginState.ON）; 
 webview.getSettings（）。setJavaScriptEnabled（true）; 
 webview.getSettings（）。setCacheMode（WebSettings.LOAD_NO_CACHE）; 
 webview.getSettings（）。setJavaScriptCanOpenWindowsAutomatically（true）; 
 webview.setWebViewClient（new WebViewClient（））; 
 webview.loadUrl（http://peoplehunt.crowdscanner.com/hunt）; 
 setContentView（webview）; 
  

这是我的HTML页面上的Facebook常规JavaScript API，当Facebook按钮为点击（$（$（$（$）
$ b $ $ $ $ $ $ $ $$$ login（function（response）{
//这个函数应该叫
if（response.authResponse）{
FB.api（'/ me？fields = name，email，picture，id& ; type = large'，function（response）{
//console.log(\"email+ response.email）;
$（＃submitHandle）。hide（）;
$（＃loader）。show（）;
//console.log('Good to see you，'+ response.picture +'。'）;
var theUsername = response.name;
theUsername = theUsername.repla ce（/ / g，'_'）+_+ response.id +@ meetforeal.com;
//console.log(theUsername）;
$（input [name = email]）。val（encodeURIComponent（response.email））;
$（input [name = lastName]）。val（encodeURIComponent（response.name））;
$（input [name = avatarImage]）。val（response.picture）;
$（input [name = userName]）。val（encodeURIComponent（theUsername））;
$（＃msg_twitter）。fadeIn（slow）;
$（＃submitHandle）。show（）;
$（＃loader）。hide（）;
$（＃user）。attr（action，/ crowdmodule / auth / registerattendeefacebook）;
$（＃user）。submit（）;
}）;
} else {
//console.log('User取消登录或未完全授权。
}
}，{scope：'email'}）;

有关如何在Facebook对话页面上重定向后回复响应的任何想法？谢谢。

解决方案

我的Android应用程序有同样的问题。
问题的原因是FB登录JavaScript在新窗口中打开一个新页面。然后尝试关闭它，并在登录成功后发送一些javascript验证码。 WebView通常是单窗口，所以没有地方可以返回，因此是空白屏幕。

请按照我的工作代码的流程示例。 >

 < FrameLayout xmlns：android =http://schemas.android.com/apk/res/android
 xmlns ：tools =http://schemas.android.com/tools
 android：layout_width =match_parent
 android：layout_height =match_parent
 android：background =＃0099cc 
工具：context =。MyActivity
 android：id =@ + id / webview_frame> 
 
< WebView 
 android：id =@ + id / webview
 android：layout_width =fill_parent
 android：layout_height =fill_parent
 /> 
  

是我的内容的主要观点。
以下是我的活动代码。

  public class MyActivity extends Activity {
 
 / * URL保存为fb登录后加载* / 
 private static final String target_url =http://www.example.com; 
 private static final String target_url_prefix =www.example.com; 
 private Context mContext; 
私人WebView mWebview; 
私人WebView mWebviewPop; 
 private FrameLayout mContainer; 
 private long mLastBackPressTime = 0; 
私人吐司mToast; 
 
 @Override 
 protected void onCreate（Bundle savedInstanceState）{
 super.onCreate（savedInstanceState）; 
 
 setContentView（R.layout.activity_urimalo）; 
 // final View controlsView = 
 // findViewById（R.id.fullscreen_content_controls）; 
 CookieManager cookieManager = CookieManager.getInstance（）; 
 cookieManager.setAcceptCookie（true）; 
 mWebview =（WebView）findViewById（R.id.webview）; 
 // mWebviewPop =（WebView）findViewById（R.id.webviewPop）; 
 mContainer =（FrameLayout）findViewById（R.id.webview_frame）; 
 WebSettings webSettings = mWebview.getSettings（）; 
 webSettings.setJavaScriptEnabled（true）; 
 webSettings.setAppCacheEnabled（true）; 
 webSettings.setJavaScriptCanOpenWindowsAutomatically（true）; 
 webSettings.setSupportMultipleWindows（true）; 
 mWebview.setWebViewClient（new UriWebViewClient（））; 
 mWebview.setWebChromeClient（new UriChromeClient（））; 
 mWebview.loadUrl（target_url）; 
 
 mContext = this.getApplicationContext（）; 
 
} 
 
 
私有类UriWebViewClient扩展WebViewClient {
 @Override 
 public boolean shouldOverrideUrlLoading（WebView view，String url）{
 String host = Uri.parse（url）.getHost（）; 
 //Log.d(\"shouldOverrideUrlLoading，url）; 
 if（host.equals（target_url_prefix））
 {
 //这是我的网站，所以不要覆盖;让我的WebView加载
 //页
 if（mWebviewPop！= null）
 {
 mWebviewPop.setVisibility（View.GONE）; 
 mContainer.removeView（mWebviewPop）; 
 mWebviewPop = null; 
} 
返回false; 
} 
 
 if（host.equals（m.facebook.com））
 {
 return false; 
} 
 //否则，链接不是我网站上的一个页面，所以启动
 //另一个处理URL的活动
 Intent intent = new Intent（Intent.ACTION_VIEW ，Uri.parse（url））; 
 startActivity（intent）; 
返回true; 
 
 
 @Override 
 public void onReceivedSslError（WebView视图，SslErrorHandler处理程序，
 SslError错误）{
 Log.d（onReceivedSslError， onReceivedSslError）; 
 //super.onReceivedSslError(view，handler，error）; 
} 
} 
 
 class UriChromeClient扩展WebChromeClient {
 
 @Override 
 public boolean onCreateWindow（WebView view，boolean isDialog，
 boolean isUserGesture，Message resultMsg）{
 mWebviewPop = new WebView（mContext）; 
 mWebviewPop.setVerticalScrollBarEnabled（false）; 
 mWebviewPop.setHorizo​​ntalScrollBarEnabled（false）; 
 mWebviewPop.setWebViewClient（new UriWebViewClient（））; 
 mWebviewPop.getSettings（）。setJavaScriptEnabled（true）; 
 mWebviewPop.getSettings（）。setSavePassword（false）; 
 mWebviewPop.setLayoutParams（新FrameLayout.LayoutParams（ViewGroup.LayoutParams.MATCH_PARENT，
 ViewGroup.LayoutParams.MATCH_PARENT））; 
 mContainer.addView（mWebviewPop）; 
 WebView.WebViewTransport transport =（WebView.WebViewTransport）resultMsg.obj; 
 transport.setWebView（mWebviewPop）; 
 resultMsg.sendToTarget（）; 
 
返回true; 
} 
 
 @Override 
 public void onCloseWindow（WebView窗口）{
 Log.d（onCloseWindow，called）; 
} 
 
} 
} 
  

对于这个问题是onCreateWindow。创建一个新窗口并将其插入到框架布局中，并在成功后将其移除。我在shouldOverrideUrlLoading添加了删除。

I am just trying to implement the facebook login on a WebView in Android. The problem is after I click the facebook button on my HTML page and insert the username and password on Facebook dialog. The url redirect is just giving me a black page.

   @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView webview = new WebView(this);        
    webview.setWebChromeClient(new WebChromeClient());  
    webview.getSettings().setPluginState(PluginState.ON);
    webview.getSettings().setJavaScriptEnabled(true); 
    webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webview.setWebViewClient(new WebViewClient());
    webview.loadUrl("http://peoplehunt.crowdscanner.com/hunt"); 
    setContentView(webview);

This is the Facebook regular javascript API on my HTML page and this function gets called when the facebook button is clicked.

$("#login_facebook").click(function() {

                    FB.login(function(response) {
                            //This function should be called
                            if (response.authResponse) {
                            FB.api('/me?fields=name,email,picture,id&type=large', function(response) {
                                    //console.log("email "+response.email);
                                    $("#submitHandle").hide();
                                    $("#loader").show();
                                    //console.log('Good to see you, ' + response.picture + '.');
                                    var theUsername = response.name;
                                    theUsername = theUsername.replace(/ /g, '_')+"_"+response.id+"@meetforeal.com";
                                    //console.log(theUsername);
                                    $("input[name=email]").val(encodeURIComponent(response.email));
                                    $("input[name=lastName]").val(encodeURIComponent(response.name));
                                    $("input[name=avatarImage]").val(response.picture);
                                    $("input[name=userName]").val(encodeURIComponent(theUsername));
                                    $("#msg_twitter").fadeIn("slow");
                                    $("#submitHandle").show();
                                    $("#loader").hide();
                                    $("#user").attr("action","/crowdmodule/auth/registerattendeefacebook");
                                    $("#user").submit();
                            });
                            } else {
  //console.log('User cancelled login or did not fully authorize.');
 }
}, {scope: 'email'});

ANY ideas on how to get the response back after the redirect on the Facebook dialog page? THANKS.

解决方案

I had the same issue on my android application. The cause of the issue is FB login javascript opens a new page on a new window. Then it tries to close it and send some javascript auth codes back, after login success. WebView is typically "single window only" so it has no place to go back to, hence the blank screen.

Please follow flowing example from my working codes.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0099cc"
tools:context=".MyActivity" 
android:id="@+id/webview_frame">

<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

The Webview of id "webview" is the main view for my content. Below is my activity codes.

public class MyActivity extends Activity {

/* URL saved to be loaded after fb login */
private static final String target_url="http://www.example.com";
private static final String target_url_prefix="www.example.com";
private Context mContext;
private WebView mWebview;
private WebView mWebviewPop;
private FrameLayout mContainer;
private long mLastBackPressTime = 0;
private Toast mToast;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_urimalo);
    // final View controlsView =
    // findViewById(R.id.fullscreen_content_controls);
    CookieManager cookieManager = CookieManager.getInstance(); 
    cookieManager.setAcceptCookie(true); 
    mWebview = (WebView) findViewById(R.id.webview);
    //mWebviewPop = (WebView) findViewById(R.id.webviewPop);
    mContainer = (FrameLayout) findViewById(R.id.webview_frame);
    WebSettings webSettings = mWebview.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setAppCacheEnabled(true);
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    webSettings.setSupportMultipleWindows(true);
    mWebview.setWebViewClient(new UriWebViewClient());
    mWebview.setWebChromeClient(new UriChromeClient());
    mWebview.loadUrl(target_url);

    mContext=this.getApplicationContext();

}


private class UriWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        String host = Uri.parse(url).getHost();
        //Log.d("shouldOverrideUrlLoading", url);
        if (host.equals(target_url_prefix)) 
        {
            // This is my web site, so do not override; let my WebView load
            // the page
            if(mWebviewPop!=null)
            {
                mWebviewPop.setVisibility(View.GONE);
                mContainer.removeView(mWebviewPop);
                mWebviewPop=null;
            }
            return false;
        }

        if(host.equals("m.facebook.com"))
        {
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch
        // another Activity that handles URLs
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }

    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler,
            SslError error) {
        Log.d("onReceivedSslError", "onReceivedSslError");
        //super.onReceivedSslError(view, handler, error);
    }
}

class UriChromeClient extends WebChromeClient {

    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog,
            boolean isUserGesture, Message resultMsg) {
        mWebviewPop = new WebView(mContext);
        mWebviewPop.setVerticalScrollBarEnabled(false);
        mWebviewPop.setHorizontalScrollBarEnabled(false);
        mWebviewPop.setWebViewClient(new UriWebViewClient());
        mWebviewPop.getSettings().setJavaScriptEnabled(true);
        mWebviewPop.getSettings().setSavePassword(false);
        mWebviewPop.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        mContainer.addView(mWebviewPop);
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(mWebviewPop);
        resultMsg.sendToTarget();

        return true;
    }

    @Override
    public void onCloseWindow(WebView window) {
        Log.d("onCloseWindow", "called");
    }

}
}

The key for this issue is onCreateWindow. A new window is created and inserted to the frame layout and removed upon success. I added the removal at shouldOverrideUrlLoading.

这篇关于使Facebook登录使用Android Webview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！