폴리머 구성 요소 google-signin 이벤트가 실행되지 않습니까?

Question

polymer-cli 1.7을 사용하여 새로운 스타터 키트 프로젝트를 만들었으며 google-signin 요소를 사용하여 Google 인증을 추가하려고합니다.

로그인 버튼이 표시되고 로그인 할 수 있지만 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 덕분에 작업 예제.