javascript - 如何在 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:

索引.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">

配置.xml:

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

问题:
这适用于浏览器( ionic serve)，但不适用于应用程序...
当我点击什么都没有发生......(没有错误......)

无论如何，我可以在应用程序上完成这项工作吗？ ( ionic run)

更多信息/调试信息:

如果我点击了网络上的 +1 按钮，它不会在应用程序上显示红色按钮(阅读意味着我已经共享了该链接)(它不知道我是谁..)

我不想登录/注册，只需一个 +1 按钮...

如果我添加:

<allow-navigation href="*" />

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


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

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

我的可能性:

某种方式可以使带有 +1 按钮的原生 Android View 出现在 web View 上。

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

关于如何做的任何建议？

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

谢谢你的帮助!

Answer 1

您的问题是用户没有在 Cordova 浏览器中使用他们的 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);
}