如何在 cordova/ionic 应用程序中放置 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. 通过某种方式使带有 +1 按钮的原生 Android 视图出现在 web 视图上。

2. 制作一个假的 +1 按钮，当它被点击时，它会调用一个插件，该插件会产生一些请求/点击真正的 +1 按钮......

3. 有什么建议吗？

这两种可能性都有吗？

感谢您的帮助！

Answer 1

如果你不想处理登录，你可以构建一个插件来添加一个原生的PlusOneButton。 我现在正在处理它，我会尝试在今天下午发布它，但由于版主不喜欢“仅链接”，我将在这里解释如何构建插件，我将添加一次链接我完成了它的开发。

首先，阅读guide about how to build a cordova plugin，我不打算进入那个级别的细节。

您的 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");

Answer 2

您的问题是用户没有在科尔多瓦浏览器中使用他们的 Google 帐户登录，因此很明显，您在单击 +1 按钮时会看到登录提示。

我了解到您希望访问与用户手机/操作系统相关联的全球 Google 帐户，并在您的应用中使用该帐户。首先，您的应用程序需要凭据才能访问这些数据，然后需要从 Cordova 浏览器中访问这些凭据。有this plugin 可以为您做到这一点。

在你的初始化代码中，然后你可以调用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);
}