web-dev-qa-db-fra.com

Implémentation de Google+ Sign-In avec React Native

Je souhaite intégrer G + Sign In (selon https://developers.google.com/+/mobile/ios/sign-in ) dans une application React Native. Je me connecte via Facebook via http://brentvatne.ca/facebook-login-with-react-native/ qui fonctionne parfaitement, mais je ne sais pas quoi faire à ce stade du G + docs : 

Dans le fichier .h de votre contrôleur de vue, importez GooglePlus/GooglePlus.h et déclarez que cette classe de contrôleur implémente le protocole GPPSignInDelegate.

Si quelqu'un pouvait fournir des pointeurs/des exemples de code? 

Merci!

12
DaBeeeenster

EDITER 2017

Dans le cadre de l'Expo, qui est désormais la valeur par défaut pour les applications natives de réaction, l'authentification Google intégrée est disponible:

Documentation de l'Expo: https://docs.expo.io/versions/latest/sdk/google.html

Obtenez les identifiants de client Android et iOS: 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>)
  }
}

ANCIENNE REPONSE

Il existe maintenant une bibliothèque pour vous connecter à Google+ pour react-native: https://github.com/devfd/react-native-google-signin

7
Danny Sullivan

Il ne s'agit donc que d'un lien partiel avec React Native, car votre problème principal semble être l'écriture du côté Obj-C du signe G +. À cette fin, saisissez l'application iOS Quick Start pour Google Plus:

https://developers.google.com/+/quickstart/ios

Suivez les instructions pour ouvrir le projet exemple. Vous trouverez le fichier SignInViewController.m qui contient cette ligne:

@interface SignInViewController () <GPPSignInDelegate>

Cela semble être ce que vous recherchez.

Une fois que cela fonctionne, vous devez implémenter la connexion à React Native. La publication Facebook que vous avez liée à montre comment faire cela, mais la documentation officielle est ici:

http://facebook.github.io/react-native/docs/nativemodulesios.html#content

J'ai également écrit un article pour montrer le module natif le plus simple auquel je puisse penser, qui décrit assez bien le concept général:

http://colinramsay.co.uk/2015/03/27/react-native-simple-native-module.html

4
Colin Ramsay

Après tant de difficultés, je suis passé en revue tous les problèmes auxquels nous sommes confrontés avec l’intégration de la connexion à Google+ dans l’application React Native. Veuillez trouver étape par étape des modifications nécessaires 1. Créer un projet dans la plate-forme Google Cloud: Essayez le suivi gratuit J'utilise Google Cloud Platform. Si vous ne l'utilisez pas, il vous suffit d'activer apis dans la console Google. 

  1. Activez l'API Google+ pour votre projet et générez une clé API dans votre console Google Cloud.

  2. Définissez la clé YourSHA-1 et le nom du package (comme indiqué dans le fichier AndroidManifest.xml) de votre projet Android (Remarque: si vous utilisez expo à cette fin, vous devez d'abord éjecter expo pour y parvenir, Lisez comment éjecter Expo

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

REMARQUE: Si votre version est une version de débogage, le SHHA-1 généré avec la commande ci-dessus ne fonctionnera pas. Veuillez vérifier attentivement les journaux de votre compte adb. Le SH-1 utilisé par votre version de débogage Android sera consigné dans le journal du périphérique. Pour vérifier le journal du périphérique, exécutez la commande ci-dessous à partir de/Utilisateurs // Bibliothèque/Android/sdk/platform-tools -> adb logcat.

  1. Importer le même projet dans Firebase: Si vous n'utilisez pas Firebase, ignorez cette étape et l'étape suivante.

  2. Configurez le projet Android dans votre projet firebase, puis configurez les méthodes d'authentification utilisées dans votre application.

  3. Puis configurez sameSHA-1 Key pour votre projet firebase: Accédez au paramètre de projet à partir de la barre latérale, cliquez sur Général, sélectionnez l'application Android et définissez la clé SHA-1.

REMARQUE: Une fois SHA-1 installé, téléchargez le fichier google-services.json sur la même page. et conservez le fichier dans le dossier de votre application de directeur de projet Android/ReactNativeProjectFolder/Android/app

  1. ajouter les modules "react-native-google-signin" et "firebase"

npm installer react-native-google-signin –save

npm install firebase –save

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

Remarque: dans le code ci-dessous, ces exclus sont les plus importants, sinon vous rencontrerez d'étranges erreurs de liaison.

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

si votre application utilise d'autres dépendances telles que react-native-maps ou react-native-social-share, faites les modifications ci-dessous également

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 fichier Android/bundle.gradle doit ressembler à ceci: // Fichier de construction de niveau supérieur dans lequel vous pouvez ajouter des options de configuration communes à tous les sous-projets/modules.

    buildscript { repositories { google () jcenter () } dépendances { classpath 'com.Android.tools .build: gradle: 3.0.1 ' classpath' com.google.gms: google-services: 3.0.0 '// <--- ajoute ceci // NOTE: ne placez pas vos dépendances d'application ici; ils appartiennent // aux différents fichiers du module build.gradle } }

    allprojects { référentiels { mavenLocal () jcenter () maven { // Tous les types de React Native (JS, Obj-C) , Binaires Android) est installé à partir de npm Url "$ rootDir /../ node_modules/react-native/Android" } } }

    ext { compileSdkVersion = 23 targetSdkVersion = 23 buildToolsVersion = "23.0.1" googlePlayServicesVersion = "10.2.4" androidMapsUtilsVersion = " 0,5 + "}

  2. commandes ci-dessous

npm installer

lien réactif natif

  1. Une fois que vous avez réagi au lien natif - vérifiez le fichier Android/settings.gradle, vérifiez qu’il ne devrait pas y avoir de lignes de contenu en double.

Jusqu'à présent, nous avons effectué des configurations au niveau du projet. Voyons maintenant les modifications de code.

  1. Réagissez en vous connectant/inscrivez-vous à Google en utilisant le code Firebase

    importer { GoogleSignin } de 'react-native-google-signin'; importer firebase de 'firebase';

    fonction googleAuthConfig (successCallback, failureCallback) { GoogleSignin.configure ({ iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID, webClientId: '', hébergé. .____.] forceConsentPrompt: true, nom du compte: '' }) .then (() => { console.log ('Google Config Success '); successCallback (); }) .catch ((err) => { console.log (' Erreur de configuration Google '); failureCallback (err); }); }

    fonction googleSignin () { googleAuthConfig (() => { GoogleSignin.signIn () .then ((user) => {.____.] const { accessToken } = utilisateur; var informations d'identification = firebase.auth.GoogleAuthProvider.credential (null, accessToken); firebase.auth (). signInWithCredential (credentials) .then ((firebaseResult) => { loginToSG (dispatch, firebaseResult, accessoires, 'Google', registerCallback); }) .catch (error = > 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 de> nettoyer une fois le cache npm, supprimer votre application existante du périphérique, supprimer les dossiers de construction, puis exécuter l’application. 

réagit natif sous Android 

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

0
Sadanand