Mettre en œuvre Google+ Sign-In à Réagir Natif

MODIFIER 2017

Dans le cadre de l'Expo, qui est maintenant la valeur par défaut pour réagir-applications natives, il est intégré dans Google Authentification disponibles:

Expo documentation: https://docs.expo.io/versions/latest/sdk/google.html

Android et iOS id client: https://console.developers.google.com/apis/credentials

import React from 'react'
import Expo from 'expo'
import Button from 'react-native-button'

class Login extends React.Component {
  signInWithGoogleAsync = async () => {
    try {
      const result = await Expo.Google.logInAsync({
        androidClientId: process.env.GOOGLE_ANDROID_CLIENT_ID,
        iosClientId: process.env.GOOGLE_IOS_CLIENT_ID,
        scopes: ['profile'],
      })

      if (result.type === 'success') {
        return result
      }
      return { cancelled: true }
    } catch (e) {
      return { error: e }
    }
  }


  onLoginPress = async () => {
    const result = await this.signInWithGoogleAsync()
    //if there is no result.error or result.cancelled, the user is logged in
    //do something with the result
  }

  render() {
    return (<Button onPress={this.onLoginPress}>Login</Button>)
  }
}

VIEILLE RÉPONSE

Il y a maintenant une bibliothèque pour se connecter avec Google+ pour réagir indigènes: https://github.com/devfd/react-native-google-signin

OriginalL'auteur Danny Sullivan

Après tant de lutte, j'ai traversé tous les problèmes que nous rencontrons avec Google+ signin intégration de Réagir application Native.
Veuillez trouver, étape par étape, les modifications doivent être faites
1. Créer un Projet dans Google Cloud Platform : Essayez free trail
Je suis en utilisant google cloud platform, si vous ne l'utilisez pas, il suffit d'activer les api sous google console

1. Activer Google+ API pour votre projet et de générer la Clé API de google cloud console

2. Ensemble YourSHA-1 clé et le nom du package (comme l'AndroidManifest.xml ) de votre projet android ( Note: si vous utilisez l'expo pour cela, vous devez éjecter l'expo d'abord pour atteindre cet objectif, Lire L'Éjection De L'Expo )

Pour générer votre propre SHA-1, utilisez la commande -> keytool -list-v -keystore mystore.fichier de clés

REMARQUE : Si Votre construction est debug puis theSHA-1 généré avec la commande ci-dessus ne fonctionne pas, veuillez vérifier votre bad journaux soigneusement, theSHA-1 utilisée par votre android debug build sera enregistré dans le périphérique de journal. Pour vérifier les journaux de périphérique exécutez la commande ci-dessous à partir de votre /Utilisateurs//Bibliothèque/Android/sdk/platform-tools —> adb logcat

1. Importer le même projet de firebase : Si vous n'êtes pas à l'aide de firebase sautez cette étape et l'étape suivante

2. De configuration du projet android dans votre firebase projet, puis l'installation de méthodes d'authentification utilisés dans votre application.

3. Puis l'installation de sameSHA-Touche 1 pour votre firebase projet: Accédez à configuration de Projet à partir de la barre latérale et cliquez sur général , sélectionnez l'application android et jeu de SHA-1 clé

REMARQUE: une Fois que SHA-1 est le programme d'installation, téléchargement google-services.fichier json dans la même page. et garder le fichier sous android, directeur de projet dossier app /ReactNativeProjectFolder/android/app

1. ajouter " réagissent-native-google-signin’ et ‘firebase’ modules

npm install réagir-native-google-signin –enregistrer

npm install firebase –enregistrer

1. Ajouter de la dépendance dans votre /app/bundle.gradle

Remarque : dans le code ci-dessous ceux qui exclut les plus importants, ou vous risquez de rencontrer d'étranges erreurs de liaison.

implementation project(':react-native-google-signin')

si votre application est l'utilisation de certaines autres dépendances comme réaction natif de cartes ou de réagir-native-sociale-part de faire en dessous de changements

implementation(project(":react-native-google-signin")){
    exclude group: "com.google.android.gms" //very important
}
compile(project(':react-native-maps')) {
      exclude group: 'com.google.android.gms', module: 'play-services-base'
      exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
implementation 'com.google.android.gms:play-services-base:11.+'
implementation 'com.google.android.gms:play-services-maps:11.+'

1. votre android/bundle.gradle fichier doit se présenter comme suit
   //Top-niveau de la construction de la page où vous pouvez ajouter des options de configuration commune à tous les sous-projets/modules.

   buildscript {
   référentiels {
   google()
   jcenter()
   }
   dépendances {
   classpath 'com.android.outils.construire:gradle:3.0.1'
   classpath 'com.google.gms:google-services:3.0.0' //<--- ajouter ce
   //REMARQUE: Ne placez pas votre demande ici de dépendances; ils appartiennent
   //dans chaque module de construire.gradle fichiers
   }
   }

   allprojects {
   référentiels {
   mavenLocal()
   jcenter()
   maven {
   //Tous de Réagir Natif (JS, Obj-C sources, Android binaires) est installé à partir de la ngp
   url "$rootDir/../node_modules/réagir indigènes/android"
   }
   }
   }

   ext {
   compileSdkVersion = 23
   targetSdkVersion = 23
   buildToolsVersion = "23.0.1"
   googlePlayServicesVersion = "10.2.4"
   androidMapsUtilsVersion = "0.5+"
   }

2. des nations unies ci-dessous les commandes

npm install

réagir indigènes lien

1. Une fois que vous exécutez réagir natif lien – vérifier android/paramètres.gradle fichier , vérifier qu'il ne devrait pas dupliquer les lignes de contenu.

Jusqu'à présent, nous avons fait du projet au niveau des configurations, maintenant nous allons voir des changements au code de

1. Réagir Natif de Google de connexion/inscrivez-vous en utilisant firebase code

   importer {
   GoogleSignin
   } à partir de 'réagir-native-google-signin';
   importation de firebase de "firebase';

   fonction googleAuthConfig(successCallback, failureCallback) {
   GoogleSignin.configurer({
   iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID,
   webClientId: ",
   hostedDomain: ",
   forceConsentPrompt: true,
   nom du compte:"
   })
   .puis(() => {
   console.log ("Google Config Succès");
   successCallback();
   })
   .catch(err) => {
   console.log ("Google Config Error');
   failureCallback(err);
   });
   }

   fonction googleSignin() {
   googleAuthConfig(() => {
   GoogleSignin.signIn()
   .puis((utilisateur) => {
   const {
   accessToken
   } = utilisateur;
   var informations d'identification = firebase.auth.GoogleAuthProvider.justificatif d'identité(null, accessToken);
   firebase.auth().signInWithCredential(informations d'identification)
   .puis((firebaseResult) => {
   loginToSG(envoi, firebaseResult, accessoires, 'Google', registerCallback);
   })
   .catch(erreur => console.log ("erreur lors de la vérification avec firebase', erreur));
   })
   .catch(err) => {
   console.log(err);
   });
   }, (googleConfigErr) => {
   console.log(googleConfigErr);
   });
   }

2. Enfin, l'étape la plus importante est -> faire une fois mnp cache nettoyer, supprimer votre application à partir de l'appareil, supprimer construire des dossiers puis exécutez l'application

réagir indigènes de l'exécution android

Crédits : Guide étape par étape avec des captures d'écran et des extraits de code

OriginalL'auteur Sadanand