web-dev-qa-db-fra.com

Ajouter l'authentification Google à la base de données en temps réel Firebase

J'utilise la base de données en temps réel Firebase et je dois y ajouter une authentification d'utilisateur. Les utilisateurs peuvent uniquement se connecter avec Google en tant que fournisseur.

Mode de base de données actuel:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Le mode New devrait ressembler à ceci:

// These rules grant access to a node matching the authenticated
// user's ID from the Firebase auth token
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

Que dois-je utiliser pour m'authentifier dans mon cas? userID, Google providerID ou un token comme décrit ici ?

C'est la fonction sans authentification pour stocker les données:

 createMeetup ({commit, getters}, payload) {
      console.log('index.js -> createMeetup')
      const meetup = {
        title: payload.title,
      }
      let imageUrl
      let key
      firebase.database().ref('meetups').Push(meetup)
        .then((data) => {
          key = data.key
          return key
        })
        .then(() => {
          commit('createMeetup', {
            ...meetup,
            imageUrl: imageUrl,
            id: key
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },
javascriptfirebasevue.jsfirebase-realtime-databasefirebase-authentication
7
Tom

Vous pouvez autoriser les utilisateurs à se connecter/authentifier en utilisant plusieurs méthodes. Ensuite, vous pouvez les fusionner dans un seul compte, comme décrit ici:

https://firebase.google.com/docs/auth/web/account-linking

Donc, vraiment, cela se résume à deux options:

  1. Autoriser les utilisateurs à se connecter avec plusieurs méthodes telles que Facebook, Google, Github, nom d'utilisateur/mot de passe de base, etc.
  2. Ou n'autorisez qu'une seule méthode de connexion, telle que Google uniquement.

Les options que vous choisirez vous aideront à choisir l’identifiant à utiliser.

2
Francisco Mateo

Pour votre cas d'utilisation, il semble que vous ayez besoin de régler quelques étapes. Je suppose que votre application peut déjà se connecter/utiliser Firebase, mais ce sont essentiellement les suivantes:

Étape 1 - Connexion

Connectez-vous à Firebase en utilisant votre clé/configuration d'API comme d'habitude, devrait ressembler à ce qui suit.

firebase.initializeApp(config)

Voir aussi: https://firebase.google.com/docs/web/setup

Vous avez probablement déjà cela quelque part. Cela ne change pas, mais si vous appliquiez les règles décrites ci-dessus, vos utilisateurs ne pourraient pas utiliser Firebase après une simple connexion.

Étape 2 - Authentification

Ceci indique essentiellement à Firebase qui est connecté. Cela doit être fait avec un jeton/une méthode que Firebase peut vérifier. L'utilisation d'un identifiant Google est la méthode la plus courante. 

Avec un identifiant Google/login existant

// Initialize a generate OAuth provider with a `google.com` providerId.
var provider = new firebase.auth.OAuthProvider('google.com');
var credential = provider.credential(googleUser.getAuthResponse().id_token);
firebase.auth().signInWithCredential(credential)

Voir aussi: https://firebase.google.com/docs/reference/js/firebase.auth.OAuthProvider#credential

Ou faire en sorte que Firebase SDK fasse le flux de connexion

var provider = new firebase.auth.GoogleAuthProvider();
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;
  // ...
})

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

Cette dernière option est préférée/suggérée par la documentation que vous avez référencée.

Si, comme vous l'avez décrit, les utilisateurs peuvent déjà se connecter avec Google à votre application pour d'autres fonctionnalités, vous devez déjà disposer d'un flux de connexion quelque part. En fonction de votre situation, il peut être judicieux de laisser la SDK/bibliothèque Firebase prendre en charge ce processus pour plus de simplicité dans votre application.

Étape 3 - Utiliser la base de données

Enfin, après avoir authentifié les utilisateurs et appliqué les règles que vous avez suggérées, vous devrez également vous assurer que les chemins que vous écrivez se trouvent dans ceux accessibles par l'utilisateur actuel. Vous pouvez le mettre dans une fonction simple pour le rendre plus facile.

const getUserRef = (ref) => {
  const user = firebase.auth().currentUser;
  return firebase.database().ref(`/users/${user.uid}/${ref}/`);
}

Bien sûr, vous ne devriez pas récupérer l'utilisateur actuel chaque fois que vous souhaitez obtenir une référence de base de données, mais je pense que cela illustre clairement les étapes à suivre.

1
sg3s

la documentation que vous avez couverte est la suivante: Authentification à l'aide de Google Sign-In avec JavaScript .

Vous pouvez laisser vos utilisateurs s'authentifier auprès de Firebase à l'aide de leurs comptes Google en intégrant Google Sign-In à votre application. Vous pouvez intégrer Google Sign-In en utilisant le SDK Firebase pour exécuter le flux de connexion ou en exécutant le flux de connexion Google manuellement et en transmettant le jeton d'ID obtenu à Firebase.

Avant que tu commences:

  • Ajoutez Firebase à votre projet JavaScript.
  • Activer Google Sign-In dans la console Firebase:
  • Dans la console Firebase, ouvrez la section Auth.
  • Dans l'onglet Méthode de connexion, activez la méthode de connexion Google, puis cliquez sur Enregistrer.
  • Gestion du flux de connexion avec le SDK Firebase Si vous créez une application Web, le moyen le plus simple d'authentifier vos utilisateurs avec Firebase à l'aide de leurs comptes Google est de gérer le flux de connexion avec le fichier SDK JavaScript Firebase. (Si vous souhaitez authentifier un utilisateur dans Node.js ou dans un autre environnement autre qu'un navigateur, vous devez gérer le flux de connexion manuellement.)

Pour gérer le flux de connexion avec le SDK JavaScript de Firebase, procédez comme suit:

Créez une instance de l'objet fournisseur Google:

var provider = new firebase.auth.GoogleAuthProvider();

Facultatif: spécifiez les étendues OAuth 2.0 supplémentaires que vous souhaitez demander au fournisseur d'authentification. Pour ajouter une étendue, appelez addScope().

Par exemple: 

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

Voir la documentation du fournisseur d'authentification .. Facultatif: pour localiser le flux OAuth du fournisseur dans la langue préférée de l'utilisateur sans transmettre explicitement les paramètres OAuth personnalisés pertinents, mettez à jour le code de langue sur l'instance Auth avant de démarrer le flux OAuth.

Par exemple:

firebase.auth().languageCode = 'pt';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Facultatif: spécifiez les paramètres de fournisseur OAuth personnalisés supplémentaires que vous souhaitez envoyer avec la demande OAuth. Pour ajouter un paramètre personnalisé, appelez setCustomParameters sur le fournisseur initialisé avec un objet contenant la clé spécifiée par la documentation du fournisseur OAuth et la valeur correspondante.

Par exemple:

provider.setCustomParameters({
    'login_hint': '[email protected]'
});

Réservé requis Les paramètres OAuth ne sont pas autorisés et seront ignorés. Consultez la référence du fournisseur d'authentification pour plus de détails . Authentifiez-vous avec Firebase à l'aide de l'objet fournisseur Google. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Google en ouvrant une fenêtre contextuelle ou en les redirigeant vers la page de connexion. La méthode de redirection est préférable sur les appareils mobiles.

Pour vous connecter avec une fenêtre contextuelle, appelez signInWithPopup:

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;
    // ...
});

Notez également que vous pouvez récupérer le jeton OAuth du fournisseur Google, qui peut être utilisé pour extraire des données supplémentaires à l'aide des API Google ..__ C'est également à ce niveau que vous pouvez détecter et gérer les erreurs. Pour obtenir une liste des codes d'erreur, reportez-vous aux documents de référence de l'authentification.

Pour vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect:

firebase.auth().signInWithRedirect(provider);

Ensuite, vous pouvez également récupérer le jeton OAuth du fournisseur Google en appelant getRedirectResult() lors du chargement de votre page:

firebase.auth().getRedirectResult().then(function(result) {
    if (result.credential) {
        // 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;
    // ...
});
0
Martin Zeitler

Les règles d'authentification de votre question indiquent uniquement que les utilisateurs peuvent lire/écrire leurs propres données utilisateur (vraisemblablement).

Je suppose que vous cherchez plutôt une solution pour autoriser l'utilisateur à créer des données de rendez-vous et vous devez créer des règles similaires à celles-ci:

Ces règles permettent à tout utilisateur connecté de créer des réunions.

{
  "rules": {
    "meetups": {
      "$meetupId": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null"
      }
    }
  }
}

Votre extrait de code qui envoie de nouvelles données de rendez-vous à la base de données tentera automatiquement de réussir ou d’échouer, selon que l’utilisateur était connecté ou non. Vous n'avez pas besoin d'indiquer spécifiquement à Firebase le mode de connexion de l'utilisateur. Le SDK Firebase se charge de l'authentification pour vous.

Mais si do voulez fournir différents mécanismes en fonction du type de connexion avec lequel l'utilisateur est authentifié, vous pouvez le vérifier dans les règles. Par exemple, si vous voulez vous assurer que l'utilisateur n'est pas simplement connecté "anonymement".

Voir la documentation: https://firebase.google.com/docs/database/security/user-security#section-variable

0
Dennis Alund