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!
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
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
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.
Activez l'API Google+ pour votre projet et générez une clé API dans votre console Google Cloud.
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.
Importer le même projet dans Firebase: Si vous n'utilisez pas Firebase, ignorez cette étape et l'étape suivante.
Configurez le projet Android dans votre projet firebase, puis configurez les méthodes d'authentification utilisées dans votre application.
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
npm installer react-native-google-signin –save
npm install firebase –save
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.+'
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 + "}
commandes ci-dessous
npm installer
lien réactif natif
Jusqu'à présent, nous avons effectué des configurations au niveau du projet. Voyons maintenant les modifications de code.
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); }); }
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