带有ReactJS的Google+登录按钮 [英] Google+ signin button with ReactJS

问题描述

我正在尝试让Google+登录按钮在我的React代码中正常工作.反应代码如下(实际代码具有正确的CLIENT_ID值).

I am trying to get Google+ login button to work in my React code. The react code is as following (the actual code has proper value for CLIENT_ID).

React.DOM.div({className: "signin-with-google"}, 
  React.DOM.span({id: "signinButton"}, 
    React.DOM.span({
      className: "g-signin", 
      'data-callback': this.signinCallback, 
      'data-clientid': "CLIENT_ID", 
      'data-cookiepolicy': "single_host_origin", 
      'data-scope': "https://www.googleapis.com/auth/userinfo.email"}
    )
  )
)

该按钮正确显示在页面上，单击该按钮将打开OAuth对话框，然后单击接受"使其消失，并且在对话框或javascript控制台上均不会生成任何错误/警告.因此，据我所知，一切正常.

The button shows up properly on the page, clicking on it brings up the OAuth dialog and hitting Accept makes it disappear and no errors/warnings are generated either in the dialog or on the javascript console. So to the best of my knowledge everything is working as expected.

但是，我指定的回调方法this.signinCallback没有被调用.有什么关于我在这里做错事情的想法吗?

However, the callback method this.signinCallback that I am specifying doesn't get invoked. Any, ideas on what I am doing wrong here?

谢谢

推荐答案

如Google+ 登录按钮中所述docs ，data-callback应该是全局名称空间中的函数".这是因为Google的代码很可能会按名称调用您的回调，因为所有HTML属性都是字符串.它将执行以下操作(警告，而非真实代码):

As stated in the Google+ Sign-in Button docs, data-callback is expected to be "A function in the global namespace". That is because Google's code likely calls your callback by name since all HTML attributes are just strings. It will do something like (warning, not real code):

window[element.dataset["callbackName"]]();

您正在传递对回调的引用，该引用不可全局访问.您可以在安装组件时公开它，并在卸载该组件时将其从全局名称空间中删除:

You are passing a reference to your callback, which is not globally accessible. You can expose it when the component is mounted and delete it from the global namespace when it is unmounted:

componentWillMount: function() {
  // Somehow generate a unique ID for every G+ button. This uses Underscore's
  // `uniqueId` function[1].
  //
  // [1] http://underscorejs.org/#uniqueId
  this.callbackName = _.uniqueId("gPlusCallback-");

  window[this.callbackName] = this.signinCallback;
},
componentWillUnmount: function() {
  delete window[this.callbackName];
},
render: function() {
  ...
    'data-callback': this.callbackName
  ...
}

这篇关于带有ReactJS的Google+登录按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！