Firebase Anmeldung mit AngularDart in Chrome Browser

Question

Ich teste eine Web-App von Firebase Login mit eckigen Dart in Chrome-Browser bei localhost, aber während Sie auf die sign-in klicken, wird das Popup für Login innerhalb von 1 s verschwunden und nicht mit erfolgreich Anmeldung. Während es auf Chrom getestet wird, funktioniert es. Kann jemand sagen, was ich tun soll, um das zu beheben?

firebase_service.dart

import 'dart:async'; 
import 'package:angular/angular.dart'; 
import 'package:firebase/firebase.dart' as fb; 

@Injectable() 
class FirebaseService { 
    fb.User user; 
    fb.Auth _fbAuth; 
    fb.GoogleAuthProvider _fbGoogleAuthProvider; 

    FirebaseService() { 
    fb.initializeApp(
     apiKey: "AIzaSyBOShlCgUeqTL99n32bjWdNlkH1RPk9Xx4", 
     authDomain: "my-app.firebaseapp.com", 
     databaseURL: "https://my-app.firebaseio.com", 
     storageBucket: "my-app.appspot.com", 
    ); 

    _fbGoogleAuthProvider = new fb.GoogleAuthProvider(); 
    _fbAuth = fb.auth(); 
    _fbAuth.onAuthStateChanged.listen(_authChanged); 
    } 

    void _authChanged(fb.User event) { 
    user = event; 
    } 

    Future signIn() async { 
    try { 
     await _fbAuth.signInWithPopup(_fbGoogleAuthProvider); 
    } 
    catch (error) { 
     print("$runtimeType::login() -- $error"); 
    } 
    } 


    void signOut() { 
    _fbAuth.signOut(); 
    } 
} 

app_component.html

<header class="material-header shadow"> 
    <div class="material-header-row"> 
     <material-button icon 
         class="material-drawer-button" (trigger)="drawer.toggle()"> 
      <material-icon icon="menu"></material-icon> 
     </material-button> 
     <span class="material-header-title">{{appTitle}}</span> 
     <div class="material-spacer"></div> 
     <nav class="material-navigation"> 
      <material-button class="material-drawer-button" icon 
          materialTooltip="Notifications" 
          (trigger)=""> 
       <material-icon icon="notifications"></material-icon> 
      </material-button> 
      <div id="popup-sign-out" class="popup-user" *ngIf="fbService.user != null"> 
       <material-button class="material-drawer-button" icon 
           popupSource 
           #source="popupSource" 
           materialTooltip="More options" 
           (trigger)="basicPopupVisible = !basicPopupVisible"> 
        <material-icon icon="more_vert"></material-icon> 
       </material-button> 
       <material-popup defaultPopupSizeProvider 
           enforceSpaceConstraints 
           [source]="source" 
           [(visible)]="basicPopupVisible"> 
        <div header class="custom-header"> 
         <img id="popup-user-image" [src]="fbService.user?.photoURL"> 
         <div class="user-detail"> 
          <div id="user-name">{{fbService.user?.displayName}}</div> 
          <div id="email">{{fbService.user?.email}}</div> 
         </div> 
        </div> 

        <div group class="custom-popup-body"> 
         <material-list class="popup-list" size="3"> 
             <div group> 
           <material-list-item class="sign-out-button" 
                *ngIf="fbService.user != null" 
                (trigger)="fbService.signOut()"> 
            <material-icon icon="exit_to_app" [style.color]="iconColor" 
                class="material-list-item-primary" aria-hidden="true"> 
            </material-icon> 
            Sign out 
           </material-list-item> 
          </div> 

         </material-list> 
        </div> 
       </material-popup> 
      </div> 
     </nav> 
     <nav class="material-navigation"> 
       <div id="sign-in" class="user" *ngIf="fbService.user == null"> 
        <material-button raised class="sign-in-button" (trigger)="fbService.signIn()"> 
         <img class="google-icon" src="g-logo.png"/> 
         Sign In 
        </material-button> 
       </div> 

       <div id="sign-out" class="user" *ngIf="fbService.user != null"> 
        <img id="header-user-image" [src]="fbService.user?.photoURL"> 
       </div> 
     </nav> 
    </div> 
</header> 

app_component.dart

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 
import 'package:yns_app/services/firebase_service.dart'; 

@Component(
    selector: 'my-app', 
     styleUrls: const [ 
    'app_component.css', 
'package:angular_components/src/components/app_layout/layout.scss.css', 
    ], 
    templateUrl: 'app_component.html', 
    directives: const [ 
    materialDirectives, 
    DeferredContentDirective, 
    MaterialButtonComponent, 
    MaterialIconComponent, 
    MaterialPersistentDrawerDirective, 
    MaterialToggleComponent, 
    MaterialListComponent, 
    MaterialListItemComponent, 
    ClickableTooltipTargetDirective, 
    DarkThemeDirective, 
    MaterialIconTooltipComponent, 
    MaterialInkTooltipComponent, 
    MaterialPaperTooltipComponent, 
    MaterialPopupComponent, 
    MaterialTooltipDirective, 
    MaterialTooltipTargetDirective, 
    MaterialTooltipSourceDirective, 
    NgIf, 
    Search, 
    NameGenerator, 
], 
    providers: const [ 
    materialProviders, 
    popupBindings, 
    DefaultPopupSizeProvider, 
    ], 
) 
class AppComponent { 
    final FirebaseService fbService; 
    bool basicPopupVisible = false; 
    bool end = false; 

    String get tooltipMsg => 'All the best messages appear in tooltips.'; 

    String get longString => 'Learn more about web development with AngularDart ' 
    'here. You will find tutorials to get you started.'; 

    AppComponent(FirebaseService this.fbService); 
} 

@Injectable() 
PopupSizeProvider createPopupSizeProvider() { 
    return const PercentagePopupSizeProvider(); 
} 

@Directive(selector: '[defaultPopupSizeProvider]', providers: const [ 
    const Provider(PopupSizeProvider, useFactory: createPopupSizeProvider) 
]) 
class DefaultPopupSizeProvider {} 

Answer 1

die Domäne verbinden oder die Sub-Domain für das Projekt gehostet, unter dem Hosting Sektion.