html5+ & mui框架facebook登陸插件（android版）

 

貼出源碼回報社區！

下面貼出關鍵代碼，稍後完善更多細節步驟。我的android開發經驗很少，若是有更好的集成方式，請你們分享！

前提：
1. 能在android stuido成功運行官方給出的android SDK集成和插件示例程序和離線打包
2. 能在android stuido成功運行官方給出的集成示例facebook-android-sdk(https://github.com/facebook/facebook-android-sdk) 中的 FBLoginSample 示例程序
3. 註冊了facebook開發者平臺，並完成了官方android集成步驟
4. 下面的部分.facebook.的代碼均採用了官方示例代碼，參考：https://github.com/facebook/facebook-android-sdk/tree/master/samples/FBLoginSample

源代碼目錄結構

1.js層代碼調用插件login.js

var App ={

    loginWithFacebook: function()
    {
        Common.showLoading();

        setTimeout(function(){
            if(App.timeout)
            {
                Common.hideLoading();
                mui.toast(Common.messages.LOGIN_TIMEOUT,{ duration:'short', type:'div' });
            }
        }, 5000);

        if(Common.debug)
        {
            setTimeout(function(){
                App.facebookAuthSuccessCallBack('{"picture":{"data":{"height":50,"is_silhouette":false,"url":"https:\/\/platform-lookaside.fbsbx.com\/platform\/profilepic\/?asid=1791872767573170&height=50&width=50&ext=1529946538&hash=AeT-c8Gg8kljhvAC","width":50}},"name":"Nick Name","id":"1791872767544170","email":"your@email.com","permissions":{"data":[{"permission":"user_birthday","status":"granted"},{"permission":"user_hometown","status":"granted"},{"permission":"user_location","status":"granted"},{"permission":"user_posts","status":"granted"},{"permission":"user_gender","status":"granted"},{"permission":"user_link","status":"granted"},{"permission":"user_age_range","status":"granted"},{"permission":"email","status":"granted"},{"permission":"public_profile","status":"granted"}]},"age_range":{"min":21},"link":"","gender":"male","birthday":"01\/01\/1991","location":{"id":"106324046073002","name":"Shanghai, China"}}');
                //App.facebookAuthCancelCallBack();
                //App.facebookAuthErrorCallBack("auth fail!");
            }, 2000);

        }else
        {
            //plus.facebookplug.logOut();
            plus.facebookplug.logIn();
        }

    },

    // 這個回調函數會在 cn.your.app.SDK_WebApp.java 原生類中調用, 參考類中的excuteJSCode()方法
    facebookAuthSuccessCallBack: function(data)
    {
        App.timeout = false;

        if(data != null)
        {
         // data example:  '{"picture":{"data":{"height":50,"is_silhouette":false,"url":"https:\/\/platform-lookaside.fbsbx.com\/platform\/profilepic\/?asid=1791872767573170&height=50&width=50&ext=1529946538&hash=AeT-c8Gg8kljhvAC","width":50}},"name":"Nick Name","id":"1791872767544170","email":"your@email.com","permissions":{"data":[{"permission":"user_birthday","status":"granted"},{"permission":"user_hometown","status":"granted"},{"permission":"user_location","status":"granted"},{"permission":"user_posts","status":"granted"},{"permission":"user_gender","status":"granted"},{"permission":"user_link","status":"granted"},{"permission":"user_age_range","status":"granted"},{"permission":"email","status":"granted"},{"permission":"public_profile","status":"granted"}]},"age_range":{"min":21},"link":"","gender":"male","birthday":"01\/01\/1991","location":{"id":"106324046073002","name":"Shanghai, China"}}'
            try{
                var facebookUser = JSON.parse(data);
                facebookUser.unionid = facebookUser.id;
                mui.toast(Common.messages.LOGIN_SUCCESS,{ duration:'short', type:'div' });
                App.checkUserIsExist(facebookUser, "facebook");
            }catch(err)
            {
                Common.hideLoading();
                mui.toast(Common.messages.LOGIN_FAIL,{ duration:'long', type:'div' });
                Common.log("====login.js, facebookAuthSuccessCallBack(), decode facebook user JSON string fail!");
            }
        }else
        {
            Common.hideLoading();
            App.facebookAuthErrorCallBack();
        }
    },

    // 這個回調函數會在 cn.your.app.SDK_WebApp.java 原生類中調用, 參考類中的excuteJSCode()方法
    facebookAuthCancelCallBack: function()
    {
        App.timeout = false;
        Common.hideLoading();

        mui.toast(Common.messages.LOGIN_CANCEL,{ duration:'long', type:'div' });
    },

    // 這個回調函數會在 cn.your.app.SDK_WebApp.java 原生類中調用, 參考類中的excuteJSCode()方法
    facebookAuthErrorCallBack: function(error)
    {
        App.timeout = false;
        Common.hideLoading();

        mui.toast(Common.messages.LOGIN_FAIL,{ duration:'long', type:'div' });
    }

};



if(window.plus){
    App.init();
}else{ 
    document.addEventListener( "plusready", App.init, false );
}

2. js層代碼插件facebookplug.js

document.addEventListener( "plusready",  function()
{
    var facebookplug =
    {
        logIn : function ()
        {
            window.plus.bridge.exec('facebookplug', "logIn", []);
        },
        logOut : function ()
        {
            window.plus.bridge.exec('facebookplug', "logOut", []);
        },
    };

    window.plus.facebookplug = facebookplug;
}, true );

3. 原生層FacebookLoginPlugin.java

package cn.your.app.plugin.facebook;

import cn.your.app.SDK_WebApp;
import cn.your.app.plugin.facebook.callbacks.GetUserCallback;
import cn.your.app.plugin.facebook.requests.UserRequest;
import io.dcloud.common.DHInterface.IWebview;
import io.dcloud.common.DHInterface.StandardFeature;
import io.dcloud.common.util.JSUtil;

import org.json.JSONArray;

import android.content.Context;
import android.os.Bundle;

import com.facebook.AccessToken;
import com.facebook.login.LoginManager;

import java.util.Arrays;


public class FacebookLoginPlugin extends StandardFeature
{

    public void onStart(Context pContext, Bundle pSavedInstanceState, String[] pRuntimeArgs) {

        /**
         * 若是須要在應用啓動時進行初始化，能夠繼承這個方法，並在properties.xml文件的service節點添加擴展插件的註冊便可觸發onStart方法
         * */
    }

    public void logIn(IWebview pWebview, JSONArray array)
    {
        if (AccessToken.getCurrentAccessToken() == null) {

            /*
             * 獲取用戶屬性的權限，參考官方文檔：https://developers.facebook.com/docs/facebook-login/permissions/
             * 有2中屬性，一種是默認公開的（Default fields），參考： https://developers.facebook.com/docs/facebook-login/permissions/#reference-default_fields
             * 另外一種是須要在應用控制面板提交審查才能夠獲取的字段（Read Permissions）
             */
            // 只獲取公開的屬性
            //LoginManager.getInstance().logInWithReadPermissions(pWebview.getActivity(), Arrays.asList("public_profile"));

            // 獲取更多屬性（應用處於開發階段時，不須要提交審查便可獲取全部字段權限）
            LoginManager.getInstance().logInWithReadPermissions(pWebview.getActivity(),Arrays.asList("email", "user_age_range", "user_birthday", "user_gender", "user_hometown", "user_link", "user_location"));

        } else {

            UserRequest.makeUserRequest(new GetUserCallback((SDK_WebApp)pWebview.getActivity()).getCallback());
        }

    }

    public void logOut(IWebview pWebview, JSONArray array)
    {
        LoginManager.getInstance().logOut();
    }




}

4. 原生層SDK_WebApp.java (在官方給出的android SDK集成代碼基礎上增長以下代碼)

package cn.your.app;

import io.dcloud.EntryProxy;
import io.dcloud.RInformation;
import io.dcloud.common.DHInterface.IApp;
import io.dcloud.common.DHInterface.IApp.IAppStatusListener;
import io.dcloud.common.DHInterface.ICore;
import io.dcloud.common.DHInterface.ICore.ICoreStatusListener;
import io.dcloud.common.DHInterface.IOnCreateSplashView;
import io.dcloud.common.DHInterface.ISysEventListener.SysEventType;
import io.dcloud.common.DHInterface.IWebview;
import io.dcloud.common.DHInterface.IWebviewStateListener;
import io.dcloud.common.util.BaseInfo;
import io.dcloud.common.util.ImageLoaderUtil;
import io.dcloud.feature.internal.sdk.SDK;
import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.Toast;



import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;

import cn.your.app.plugin.facebook.callbacks.GetUserCallback;
import cn.your.app.plugin.facebook.entities.FacebookUser;
import cn.your.app.plugin.facebook.requests.UserRequest;
import java.util.ArrayList;

/**
 * 本demo爲以WebApp方式集成5+ sdk， 
 *
 */
public class SDK_WebApp extends Activity implements GetUserCallback.IGetUserResponse {

    boolean doHardAcc = true;
    EntryProxy mEntryProxy = null;
    CallbackManager callbackManager;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        if (mEntryProxy == null) {
            FrameLayout f = new FrameLayout(this);
            // 建立5+內核運行事件監聽
            WebappModeListener wm = new WebappModeListener(this, f);
            // 初始化5+內核
            mEntryProxy = EntryProxy.init(this, wm);
            // 啓動5+內核
            mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);
            setContentView(f);
        }

        // 註冊Facebook受權登陸回調方法
        registerFacebookAuthCallback();
    }



    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        mEntryProxy.onActivityExecute(this, SysEventType.onActivityResult, new Object[] { requestCode, resultCode, data });

        // facebook受權成功通知
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }

    /** ================Facebook Login START============== **/
    protected void registerFacebookAuthCallback()
    {
        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                UserRequest.makeUserRequest(new GetUserCallback(SDK_WebApp.this).getCallback());
            }

            @Override
            public void onCancel() {
                excuteJSCode("App.facebookAuthCancelCallBack()");
            }

            @Override
            public void onError(FacebookException error) {
                excuteJSCode("App.facebookAuthErrorCallBack('" + error.getMessage() + "')");
            }
        });
    }

    @Override
    public void onCompleted(FacebookUser user) {

        excuteJSCode("App.facebookAuthSuccessCallBack('" + user.getName() + "')");
    }

    @Override
    public void onGotFacebookUserData(String user)
    {
        excuteJSCode("App.facebookAuthSuccessCallBack('" + user + "')");
    }

    // 調用login.html內的JS函數, 參考引用的 /js/login.js 文件
    protected void excuteJSCode(String jsCode)
    {
        ArrayList<IWebview> ss = SDK.obtainAllIWebview();
        for (IWebview iWebview : ss) {
            if (iWebview.getOriginalUrl().equals("login.html")) {
                iWebview.evalJS(jsCode);
                break;
            }
        }
    }

    /** ================Facebook Login END============== **/

}


}

5. 配置文件/app/src/main/res/values/strings.xml

<resources>
    <string name="app_name">應用名</string>
    <string name="facebook_app_id">193445774573048</string>
    <string name="fb_login_protocol_scheme">fb121135774573048</string>
</resources>

6. 配置文件/app/src/main/assets/data/dcloud_properties.xm（在原基礎上新增的部分）

<properties>
    <features>
        <feature
            name="facebookloginplugin"
            value="cn.shaketowin.app.plugin.facebook.FacebookLoginPlugin" />
    </features> 

    <services>
        <!--<service name="facebookloginplugin" value="cn.shaketowin.app.plugin.facebook.FacebookLoginPlugin"/>-->
    </services>
</properties>

7. 配置文件/app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.shaketowin.app">

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />


    <!-- facebook login begin -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- facebook login end -->



    <application
        android:name="io.dcloud.application.DCloudApplication"
        android:allowBackup="true"
        android:allowClearUserData="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:supportsRtl="true">

        <!-- facebook login begin -->
        <meta-data android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id"/>

        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!-- facebook login end -->



        <activity
            android:name="cn.shaketowin.app.ActivityEntry"
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:screenOrientation="user"
            android:windowSoftInputMode="adjustResize">
                <!--<intent-filter>-->
                    <!--<action android:name="android.intent.action.MAIN" />-->
                    <!--<category android:name="android.intent.category.LAUNCHER" />-->
                <!--</intent-filter>-->
        </activity>
        <activity
            android:name="cn.shaketowin.app.SDK_WebApp"
            android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale"
            android:screenOrientation="user"
            android:theme="@style/DCloudTheme"> <!-- 離線配置沉浸式  SDK_WebApp  做爲apk入口時  必須設置 SDK_WebApp   的主題爲android:theme="@style/DCloudTheme" -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>