Кнопка входа в Google+ с ReactJS

Я пытаюсь заставить кнопку входа в Google+ работать в моем коде React. Код реакции выглядит следующим образом (фактический код имеет правильное значение для 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 не генерируются ошибки/предупреждения. Итак, насколько мне известно, все работает так, как ожидалось.

Однако метод обратного вызова this.signinCallback, который я указываю, не вызывается. Любые идеи о том, что я делаю неправильно здесь?

Спасибо


reactjs google-login
person user1955986    schedule 15.10.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Как указано в документах Google+ по кнопке входа, ожидается, что data-callback будет "функцией в глобальном пространство имен». Это связано с тем, что код Google, скорее всего, вызывает ваш обратный вызов по имени, поскольку все атрибуты HTML являются просто строками. Он будет делать что-то вроде (предупреждение, не настоящий код):

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

Вы передаете ссылку на свой обратный вызов, который недоступен глобально. Вы можете открыть его, когда компонент смонтирован, и удалить его из глобального пространства имен, когда он будет размонтирован:

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
  ...
}
person Ross Allen    schedule 16.10.2014