2017-03-24 1 views
0

Je crée actuellement une application avec du travail et nous avons opté pour une application hybride utilisant Cordova/Phonegap afin que nous puissions avoir un code source pour windows/android/IOS.Applications hybrides avec PhoneGap + Firebase Authentification Problèmes

Où nous avons rencontré des problèmes avec l'authentification. après avoir regardé en ligne et suivant des tutoriels et des exemples de code sur la documentation de Firebase et sur ici, je ne suis pas plus proche de faire fonctionner cela.

Nous utiliserons google Auth pour commencer. D'après ce que j'ai lu à cause de certaines modifications récentes, l'utilisation de l'authentification via des applications basées sur la vue Web ne fonctionne plus. et il n'y a pas eu beaucoup d'exemples complets utilisant InAppBrowser pour ouvrir le pop-up googleAuth ou rediriger.

le code suivant est idéalement ce que nous voulons utiliser: (modifié à partir de l'exemple de Firebase) la question est que cela ne fonctionne pas dans les applications Cordova/PhoneGap mais fonctionne parfaitement sur un PC/Mac dans le navigateur

pourrait Quelqu'un explique comment je modifie cela pour travailler dans une application?

<!-- Material Design Theming --> 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 

<link rel="stylesheet" href="main.css"> 
<script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script> 
<script> 
    // Initialize Firebase 
    var config = { 
     apiKey: "xxx", 
     authDomain: "xxx.firebaseapp.com", 
     databaseURL: "https://xxx.firebaseio.com", 
     storageBucket: "xxx.appspot.com", 
     messagingSenderId: "xxx" 
    }; 
    firebase.initializeApp(config); 
</script> 
<script type="text/javascript"> 

    /** 
    * Function called when clicking the Login/Logout button. 
    */ 
    // [START buttoncallback] 
    function toggleSignIn() { 
     if (!firebase.auth().currentUser) { 
      // [START createprovider] 
      var provider = new firebase.auth.GoogleAuthProvider(); 
      // [END createprovider] 
      // [START addscopes] 
      provider.addScope('https://www.googleapis.com/auth/plus.login'); 
      // [END addscopes] 
      // [START 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; 
       // [START_EXCLUDE] 
       document.getElementById('quickstart-oauthtoken').textContent = token; 
       // [END_EXCLUDE] 
      }).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; 
       // [START_EXCLUDE] 
       if (errorCode === 'auth/account-exists-with-different-credential') { 
        alert('You have already signed up with a different auth provider for that email.'); 
        // If you are using multiple auth providers on your app you should handle linking 
        // the user's accounts here. 
       } else { 
        console.error(error); 
       } 
       // [END_EXCLUDE] 
      }); 
      // [END signin] 
     } else { 
      // [START signout] 
      firebase.auth().signOut(); 
      // [END signout] 
     } 
     // [START_EXCLUDE] 
     document.getElementById('quickstart-sign-in').disabled = true; 
     // [END_EXCLUDE] 
    } 
    // [END buttoncallback] 

    /** 
    * initApp handles setting up UI event listeners and registering Firebase auth listeners: 
    * - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or 
    * out, and that is where we update the UI. 
    */ 
    function initApp() { 
     // Listening for auth state changes. 
     // [START authstatelistener] 
     firebase.auth().onAuthStateChanged(function(user) { 
      if (user) { 
       // User is signed in. 
       var displayName = user.displayName; 
       var email = user.email; 
       var emailVerified = user.emailVerified; 
       var photoURL = user.photoURL; 
       var isAnonymous = user.isAnonymous; 
       var uid = user.uid; 
       var providerData = user.providerData; 
       // [START_EXCLUDE] 
       document.getElementById('quickstart-sign-in-status').textContent = 'Signed in'; 
       document.getElementById('quickstart-sign-in').textContent = 'Sign out'; 
       document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, ' '); 
       // [END_EXCLUDE] 
      } else { 
       // User is signed out. 
       // [START_EXCLUDE] 
       document.getElementById('quickstart-sign-in-status').textContent = 'Signed out'; 
       document.getElementById('quickstart-sign-in').textContent = 'Sign in with Google'; 
       document.getElementById('quickstart-account-details').textContent = 'null'; 
       document.getElementById('quickstart-oauthtoken').textContent = 'null'; 
       // [END_EXCLUDE] 
      } 
      // [START_EXCLUDE] 
      document.getElementById('quickstart-sign-in').disabled = false; 
      // [END_EXCLUDE] 
     }); 
     // [END authstatelistener] 

     document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false); 
    } 

    window.onload = function() { 
     initApp(); 
    }; 
</script> 

    <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in">Sign in with Google</button> 

       <!-- Container where we'll display the user details--> 
       <div class="quickstart-user-details-container"> 
        Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span> 
        <div>Firebase auth <code>currentUser</code> object value:</div> 
        <pre><code id="quickstart-account-details">null</code></pre> 
        <div>Google OAuth Access Token:</div> 
        <pre><code id="quickstart-oauthtoken">null</code></pre> 
       </div> 
<style> 
    div.quickstart-user-details-container 
     display: none; 
    } 

</style> 

Répondre

1

AskFirebase

Firebase suppose que vous ne voulez utiliser "http: //" ou "https: //" pas ce que PhoneGap utilise une telle en tant que "local: //" ou "file: //", vous ne pouvez donc pas l'ajouter aux sections "Domaines autorisés". Ce serait bien si les gens AskFirebase prenaient en compte le chemin de développement hybride - HINT. Il y a quelques informations à https://firebase.google.com/docs/auth/web/cordova mais ce n'est pas évident, par exemple n'importe où près de la zone de configuration 'Domaines autorisés' ou à proximité de l'un des exemples. #AskFirebase