如何在cordova/ionic app中放置Google Plus +1按钮？

Question

我在我的应用中添加了一个+1按钮:

我用过这段代码:

<div class="g-plusone" data-size="tall" data-href="GOOGLE PLAY STORE LINK TO MY APP"></div>

和

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

我也允许api:

index.html的:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com">

config.xml文件:

<allow-navigation href="https://apis.google.com" />

问题: 这适用于浏览器(ionic serve),但它不适用于应用程序...当我点击没有任何反应...(没有错误...)

无论如何,我可以在应用程序上进行此工作？(ionic run)

更多信息/调试信息:

1. 如果我点击网络上的+1按钮,它不会显示应用程序上的红色按钮(阅读意味着我已经分享了该链接)(它不知道我是谁...)
2. 我不想登录/注册,只需+1按钮......

如果我添加:

<allow-navigation href="*" />

在config.xml中,当我点击+1按钮时它要求我登录:(它不应该)

这意味着+1按钮不起作用,因为"在匿名浏览器中",未通过操作系统进行身份验证...

我还按照以下说明创建了一个演示纯Android应用程序:https://developers.google.com/+/mobile/android/recommend 它完美运行...(我可以+1链接...)

我的可能性:

1. Webview上会显示一些使用+1按钮制作原生Android视图的方法.

2. 制作一个假的+1按钮,当它被点击时,它会调用一个插件,使得请求/点击真正的+1按钮....

3. 关于如何做的任何建议？

这两种可能性中的任何一种可能吗？

谢谢你的帮助!

Answer 1

您的问题是用户未在cordova浏览器中使用他们的Google帐户登录,因此很明显,您在点击+1按钮时会看到登录提示.

我们了解到您想访问与用户手机/操作系统相关的全球Google帐户,并在您的应用内使用此帐户.首先,您的应用需要凭据才能访问此数据,然后需要从cordova浏览器中访问这些数据.有这个插件它会替你.

在初始化代码中,您可以调用window.plugins.googleplus.login(...),这将提示用户进行确认(如有必要)并登录.

确保登录后初始化+1按钮,以便正确指示状态.例如(假设您使用的是jQuery):

$(document).ready(function() {
  loginToGoogle();
  initPlusOneButton();
}

function loginToGoogle() { ... }

function initPlusOneButton() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
}

Answer 2

如果您不想处理登录，您可以构建一个插件来添加本机PlusOneButton. 我现在正在研究它，我会尝试今天下午发布它，但是由于版主不喜欢“仅链接 asnwers”，我将在这里解释如何构建插件，并且我将添加一次链接我开发完了。

首先，阅读有关如何构建 cordova 插件的指南，我不打算详细介绍。

您的 CordovaPlugin 子类将需要以下变量：

private PlusOneButton mPlusOneButton;
private String URL;

你的执行方法应该是这样的：

public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if (action.equals("show")) {//show is the name of the method you call from javascript
        URL = "http://www.phonegap.es";//you should pick it from the plugin params
        mPlusOneButton =  new PlusOneButton(cordova.getActivity());
        mPlusOneButton.initialize(URL, null);

        //you have to run this part making sure you run it on the UI Thread
        cordova.getActivity().runOnUiThread(new Runnable() {
            public void run() {
                cordova.getActivity().addContentView(mPlusOneButton,new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT));


                //position the button wherever you want, you should pick the values from the plugin params
                mPlusOneButton.setX(300);
                mPlusOneButton.setY(300);

            }
        });

    } else {
        return false;
    }
    return true;
}

最后添加onResume使按钮状态保持最新的方法。

@Override
public void onResume(boolean multitasking) {
    super.onResume(multitasking);
    mPlusOneButton.initialize(URL, null);
}

该插件必须添加com.google.android.gms:play-services-plus依赖项

您可以将这一行添加到plugin.xml中

<framework src="com.google.android.gms:play-services-plus:+" />

编辑：插件已准备就绪https://github.com/jcesarmobile/plusOneButtonPlugin

安装它

cordova plugin add https://github.com/jcesarmobile/plusOneButtonPlugin

使用方法：

var params = {};
params.url = "http://www.example.com";
params.position = {x:100,y:100};
plusOneButton.show(params);

或者

plusOneButton.show("http://www.example.com");