Полимерный компонент google-signin не запускает события?

Question

Я создал новый проект стартового набора с использованием полимера-cli 1.7, и я пытаюсь добавить аутентификацию Google, используя элемент google-signin.

Отображается кнопка входа в систему, и я могу использовать ее для входа в систему, но свойство signedIn не установлено, и события (например, is-authorized-changed) не срабатывают.

is-authorized-changed срабатывает дважды при первой загрузке страницы, но не срабатывает при входе или выходе.

... 
<link rel="import" href="../bower_components/google-signin/google-signin.html"> 
... 
<dom-module id="cx-dashboard"> 
    <template> 
    <style> 
     ... 
    </style> 

    <app-location route="{{route}}"></app-location> 
    <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route> 
    <app-drawer-layout fullbleed force-narrow="true"> 
     <!-- Drawer content --> 
     <app-drawer> 
     <app-toolbar>Menu</app-toolbar> 
     <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> 

      <a name="view1" href="/view1">View1</a> 
      <a name="view2" href="/view2">View2</a> 
     </iron-selector> 
     </app-drawer> 
     <!-- Main content --> 
     <app-header-layout has-scrolling-region> 
     <app-header condenses reveals effects="waterfall"> 
      <app-toolbar> 
      <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> 
      <div main-title>Dashboard</div> 
      {{signedIn}} 
      <google-signin client-id="my-client-id" hosted-domain="mydomain" 
      signed-in="{{signedIn}}"></google-signin> 
      </app-toolbar> 
     </app-header> 
     <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main"> 
      <my-view1 name="view1"></my-view1> 
      <my-view2 name="view2"></my-view2> 
      <my-view3 name="view3"></my-view3> 
      <my-view404 name="view404"></my-view404> 
     </iron-pages> 
     </app-header-layout> 
    </app-drawer-layout> 
    </template> 
    <script> 
    Polymer({ 
     is: 'cx-dashboard', 

     properties: { 
     page: { 
      type: String, 
      reflectToAttribute: true, 
      observer: '_pageChanged' 
     } 
     }, 
     listeners: { 
     'is-authorized-changed': '_handleAuthChange', 
     'google-signin-success': '_signInSuccess', 
     'google-signed-out': '_signedOut', 
     'google-signin-aware-success': '_signInSuccess' 
     }, 
     observers: [ 
     '_routePageChanged(routeData.page)' 
     ], 

     _routePageChanged: function(page) { 
     this.page = page || 'view1'; 
     }, 

     _pageChanged: function(page) { 
     // Load page import on demand. Show 404 page if fails 
     var resolvedPageUrl = this.resolveUrl('my-' + page + '.html'); 
     this.importHref(resolvedPageUrl, null, this._showPage404, true); 
     }, 

     _showPage404: function() { 
     this.page = 'view404'; 
     }, 
     _signInNecessary: function() { 
     console.log('_signInNecessary') 
     }, 
     _signInSuccess: function() { 
     console.log('_signInSuccess') 
     }, 
     _signedOut: function() { 
     console.log('_signedOut') 
     }, 
     _handleAuthChange: function(event) { 
     console.log('_handleAuthChange', event) 
     } 
    }); 
    </script> 
</dom-module> 

Answer 1

Проблема заключалась в том, что я не настроен правильный порт в Google console.

Благодаря @ tony19 для рабочего примера.