रिक्त स्क्रीन दिखा रहे फायरबेस में Google प्रमाणीकरण प्रोग्रेसिव वेब ऐप

Question

मैं अपना पहला प्रगतिशील वेब ऐप बनाने के रास्ते पर हूं जो डेटा संग्रह करने के लिए फ़ायरबेस का उपयोग करता है। मैं ऐप का उपयोग करने वाले सभी उपयोगकर्ताओं के लिए एक प्रविष्टि बिंदु के रूप में Gmail का भी उपयोग कर रहा हूं। हालांकि मैं लॉगिन लागू करने पर फंस गया हूँ।

एचटीएमएल:

<button md-raised-button color="warn" (click)="logInGoogle()"><md-icon>group</md-icon>Sign in with google to enjoy the app</button> 

ts:

logInGoogle(){ 
    this.authService.loginWithGoogle().then(user => { 
     console.log("User is logged in"); 
     //this.router.navigate(['/addweather']); 
    }) 
    .catch(err => { 
     console.log('some error occured'); 
    }) 
    } 

यहाँ सेवा है:

loginWithGoogle() { 
    return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
    } 

इसके अलावा auth राज्य मैं जाँच करने के लिए नीचे दिए गए मेरे में प्रवेश करने के लिए कोड है यह मेरे app.component.ts कन्स्ट्रक्टर में:

मुझे अधिकृत

1. यह लॉगिन कार्यक्षमता ब्राउज़रों पर ठीक काम करता है अगर मैं लॉगिन बटन पर क्लिक करें coz यह एक नई विंडो खुल जाता है:

   this.authService.afAuth.authState.subscribe(
        (auth) => { 
        if(auth === null){ 
         console.log("Not Logged in."); 
         this.router.navigate(['login']); 
         this.isLoggedIn = false; 
        } 
        else { 
         console.log("Successfully Logged in."); 
         this.isLoggedIn = true; 
         this.router.navigate(['']); 
        } 
        } 
       ) 
   

   अब व्यवहार की एक जोड़ी है कि एप्लिकेशन दिखाया जा रहा है कर रहे हैं और उसी टैब पर वापस आ जाता है जिस पर ऐप खोला जाता है।

2. मैं होम स्क्रीन पर अनुप्रयोग जोड़ने के लिए और फिर से प्रवेश करने का प्रयास करते यह मेरे नीचे दिए गए विकल्पों के लिए संकेत:

एक बार मैं क्रोम पर क्लिक करें, यह मेरे अधिकार देती है और मुझे पुनर्निर्देश ऐप पर लेकिन ऐप अब एक खाली स्क्रीन दिखाता है और ओथ स्क्रीन सिर्फ एक अनंत प्रोसेसिंग स्थिति पर जाती है। ऐसा क्यों हो रहा है? मेरा मतलब है कि यह सामान्य तरीके से काम नहीं करना चाहिए क्योंकि यह ब्राउज़र में ऐप चलाए जाने पर काम करता था।

लॉगिन बटन पर क्लिक करने पर इसे उपरोक्त छवि में दिखाए गए विकल्प को संकेत नहीं देना चाहिए; इसके बजाय इसे एक ओथ संवाद खोलना चाहिए। मैं निम्नलिखित कोड के साथ भी ऐसा करने की कोशिश की:

logInGoogle(){ 
    var newWindow = window.open('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=9722-j3fstr5sh6pumie.apps.googleusercontent.com&redirect_uri=https://weatherapp321.firebaseapp.com/__/auth/handler&response_type=token', 'name', 'height=600,width=450'); 

    } 

यह अब बजाय उत्साह विकल्पों के साथ एक संवाद है जो वांछित है को खोलता है। लेकिन अधिकृत करने के बाद, यह मुझे लॉगिन पृष्ठ पर वापस ले जाता है। ऐसा क्यों हो रहा है? जब मैं पहले से ही app.component.ts में ऑथ स्टेट की जांच कर रहा हूं और उपयोगकर्ता को अधिकृत होने पर उपयोगकर्ता को होम पेज पर रीडायरेक्ट कर रहा हूं।

धीरज रखने और अंत तक पढ़ने के लिए धन्यवाद। सहायता के लिए बहुत आभार होगा।

संपादित

येवगेन द्वारा सुझाव दिया गया है: signInWithRedirect साथ की कोशिश की। यह तब काम करता था जब मैंने पहली बार 2 सेकंड की थोड़ी देर के साथ लॉग इन किया था। लेकिन फिर मैंने लॉग आउट किया और फिर से लॉग इन करने का प्रयास किया, मुझे लॉग इन करने के बाद एक खाली स्क्रीन मिल गई।

Answer 1

मोबाइल पर ऐसा लगता है कि आपका ऐप प्रमाणीकरण खोलता है, आपके वर्तमान ब्राउज़र का एक नया टैब नहीं बल्कि एक नए ब्राउज़र में, इसलिए यह Google के साथ प्रमाणीकरण के बाद आपके प्रारंभिक ब्राउज़र पर एक वैध रीडायरेक्ट वापस नहीं कर सकता है।आप रीडायरेक्ट से ही प्रवेश करेंगे, तो आप एक ही ब्राउज़र में रहने ताकि आप के लिए आपकी सेवा को बदलने के लिए की आवश्यकता होगी:

loginWithGoogle() { 
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()); 
} 

Answer 2

मैं अपने पालतू वेब एप्लिकेशन पर लगभग एक ही व्यवहार किया था। मेरी स्वयं के लिए मैं अगले चरणों के द्वारा इसे हल:

1. मैं app.module.ts

@NgModule({ 
 
    ... 
 
    providers: [ 
 
     { provide: APP_INITIALIZER, useFactory: appConfig, deps: [AuthService], multi: true } 
 
    ] 
 
}) 
 

 
export function appConfig(authService) { 
 
    const app = firebase.initializeApp({ 
 
     apiKey 
 
     authDomain 
 
    }); 
 
    return() => new Promise((resolve, reject) => { 
 
     firebase.auth() 
 
     .onAuthStateChanged(data => { 
 
      if (data) { 
 
       firebase.auth().currentUser.getToken() 
 
       .then((token: string) => authService.setToken(token);); 
 
      } 
 
      resolve(true); 
 
     }, error => resolve(true)); 
 
    }); 
 
}

1. पुनर्निर्देशन को firebase आरंभीकरण के लिए कदम लॉग इन पेज में मैंने auth.guard.ts

में प्रबंधित किया

export class AuthGuard implements CanActivate { 
 
    constructor(
 
     private authService: AuthService, 
 
     private router: Router 
 
    ) {} 
 

 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
 
     if (this.authService.isAuthenticated()) { 
 
      return true; 
 
     } else { 
 
      this.router.navigate(['/signin']); 
 
      return false; 
 
     } 
 
    } 
 
}

1. मैं अपने auth.service.ts

export class AuthService { 
 
    token: string; 
 

 
    signinUser(email: string, password: string) { 
 
     return new Promise((resolve, reject) => { 
 
      firebase.auth().signInWithEmailAndPassword(email, password) 
 
       .then(resp => { 
 
        firebase.auth().currentUser.getToken() 
 
         .then((token: string) => { 
 
          this.token = token; 
 
          resolve(resp); 
 
         }).catch(reject); 
 
        return resp; 
 
       }) 
 
       .catch(reject); 
 
      }); 
 
    } 
 

 
    signoutUser() { 
 
     return firebase.auth().signOut() 
 
      .then(resp => this.token = null); 
 
    } 
 

 
    getToken() { 
 
     firebase.auth().currentUser.getToken() 
 
      .then((token: string) => this.setToken(token)); 
 
     return this.token; 
 
    } 
 
    
 
    setToken(token) { 
 
     this.token = token; 
 
    } 
 

 
    isAuthenticated() { 
 
     return this.token != null; 
 
    } 
 
}

मुझे आशा है कि यह उपयोगी होगा में अगले कोड था तुम्हारे लिए।

Answer 3

रीडायरेक्ट पीडब्ल्यूए पर काम नहीं करता है (संभवतः कुछ मामलों में विभिन्न ब्राउज़र उदाहरणों का उपयोग करता है)।

https://firebase.google.com/docs/auth/web/google-signin

वह कुछ इस तरह दिखेगा::

firebase.auth().signInWithPopup(provider).then(function(result) { 
    // This gives you a Google Access Token. You can use it to access the Google API. 
    var token = result.credential.accessToken; 
    // The signed-in user info. 
    var user = result.user; 
    // ... 
}).catch(function(error) { 
    // Handle Errors here. 
    var errorCode = error.code; 
    var errorMessage = error.message; 
    // The email of the user's account used. 
    var email = error.email; 
    // The firebase.auth.AuthCredential type that was used. 
    var credential = error.credential; 
    // ... 
}); 

केवल प्रवाह अंतर यह है कि यह एक पॉप अप ब्राउज़र की शुरूआत है आप इस के आसपास पॉप-अप प्रमाणन प्रवाह का उपयोग करके प्राप्त कर सकते हैं वर्तमान उदाहरण को पुनर्निर्देशित करने के बजाय विंडो। यह ऑथ परिणाम प्राप्त करने के लिए कुछ तर्कों को भी सरल बनाता है। आप गैर PWAs पर सामान्य प्रवाह बनाए रखने के लिए पसंद करते हैं, तो आप पता लगा सकते हैं अगर एप्लिकेशन होम स्क्रीन से शुरू किया गया था:

https://developers.google.com/web/updates/2015/10/display-mode