如何在 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)

更多information/debug信息：

如果我点击了网络上的 +1 按钮，它不会在应用程序上显示红色按钮（阅读意味着我已经分享了 link）（它不知道我是谁..)
我不想做一个 login/signup，只是一个 +1 按钮...

如果我添加：

<allow-navigation href="*" />

在 config.xml 中，当我点击 +1 按钮时它要求我登录：（不应该）

这意味着 +1 按钮不起作用，因为 "in an anonymous browser"，未使用 OS...

进行身份验证

我还按照以下说明创建了一个演示纯 Android 应用程序：https://developers.google.com/+/mobile/android/recommend 它完美地工作...（我可以 +1 link...）

我的可能性：

一些方法可以使带有 +1 按钮的本机 Android 视图显示在网络视图上。
制作一个假的 +1 按钮，当它被点击时，它会调用一个插件，在真正的 +1 按钮上制作一些 request/click 之王....
有什么建议吗？

有这两种可能吗？

感谢您的帮助！

Answer 1

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

我了解到您想访问与用户 phone/OS 关联的全局 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);
}

Answer 2

如果您不想处理登录，您可以构建一个插件来添加原生 PlusOneButton。我现在正在研究它，我将尝试在今天下午发布它，但由于版主不喜欢 "link only asnwers" 我将在这里解释如何构建插件，并且我将添加 link一旦我完成开发。

首先，请阅读 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");

如何在 cordova/ionic 应用程序中放置 Google Plus +1 按钮？

How to place a Google Plus +1 button inside cordova/ionic app?

javascript

webview

google-plus

cordova

ionic-framework