Implementieren Sie die Google+ Anmeldung mit React Native

EDIT 2017

Innerhalb des Expo-Frameworks, das jetzt Standard für reaktive Apps ist, ist die Google-Authentifizierung verfügbar:

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

Rufen Sie Android- und iOS-Client-IDs ab: 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>)
  }
}

ALTE ANTWORT

Es gibt jetzt eine Bibliothek, mit der Sie sich bei Google+ anmelden können, um zu reagieren - native: https://github.com/devfd/react-native-google-signin

Dies ist also nur bedingt mit React Native zu tun, da Ihr Hauptproblem darin besteht, die Obj-C-Seite der G + -Anmeldung zu schreiben. Dazu greifen Sie auf die iOS-Schnellstart-App für Google Plus:

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

Folgen Sie den Anweisungen, um das Beispielprojekt zu öffnen. Dort finden Sie die Datei SignInViewController.m, die diese Zeile enthält:

@interface SignInViewController () <GPPSignInDelegate>

Das scheint es zu sein, wonach du strebst.

Sobald dies funktioniert hat, müssen Sie die Verbindung zu React Native implementieren. Der Facebook-Post, auf den Sie verlinkt haben, zeigt, wie das geht, aber die offizielle Dokumentation ist hier:

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

Ich habe auch einen Post geschrieben, um das einfachste Native-Modul zu zeigen, an das ich denken könnte, das meiner Meinung nach das allgemeine Konzept ziemlich gut beschreibt:

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

Nach so viel Mühe habe ich alle Probleme durchgegangen, mit denen wir uns bei der Integration von Google+ in React Native App beschäftigen. Bitte finden Sie Schritt für Schritt, dass Änderungen vorgenommen werden müssen 1. Projekt in der Google Cloud-Plattform erstellen: Testen Sie den kostenlosen Pfad Ich verwende die Google Cloud-Plattform. Wenn Sie dies nicht verwenden, aktivieren Sie einfach apis unter der Google-Konsole 

2. Aktivieren Sie die Google+ API für Ihr Projekt und generieren Sie den API-Schlüssel in Ihrer Google Cloud-Konsole

3. Legen Sie den YourSHA-1-Schlüssel und den Paketnamen (wie in AndroidManifest.xml angegeben) für Ihr Android-Projekt fest (Hinweis: Wenn Sie expo dafür verwenden, sollten Sie zunächst expo ausgeben. Read How To Eject Expo ) 

Um ein eigenes SHA-1 zu erstellen, verwenden Sie den Befehl -> keytool -list -v -keystore mystore.keystore

HINWEIS: Wenn Ihr Build ein Debug-Build ist, funktioniert der mit dem obigen Befehl generierte SHA-1 nicht. Überprüfen Sie Ihre ADB-Protokolle sorgfältig. Der von Ihrem Android-Debug-Build verwendete SHA-1 wird im Geräteprotokoll protokolliert. Um das Geräteprotokoll zu überprüfen, führen Sie den folgenden Befehl in Ihrem Verzeichnis/Users // Library/Android/sdk/platform-tools -> adb logcat aus

4. Importieren Sie dasselbe Projekt in Firebase: Wenn Sie Firebase nicht verwenden, überspringen Sie diesen Schritt und den nächsten Schritt

5. Richten Sie das Android-Projekt in Ihrem Firebase-Projekt ein und richten Sie dann die in Ihrer App verwendeten Authentifizierungsmethoden ein.

6. Dann richten Sie den sameSHA-1-Schlüssel für Ihr Firebase-Projekt ein: Navigieren Sie in der Seitenleiste zur Projekteinstellung und klicken Sie auf Allgemein, wählen Sie die Android-App aus, und stellen Sie den SHA-1-Schlüssel ein

HINWEIS: Sobald SHA-1 eingerichtet ist, laden Sie die Datei google-services.json auf derselben Seite herunter. und halten Sie die Datei in Ihrem Android-Projekt-Director-App-Ordner/ReactNativeProjectFolder/Android/App

7. hinzufügen von "React-native-google-signin" - und "Firebase" -Modulen

installieren Sie npm rea-native-google-signin –save

npm install firebase –save

8. Fügen Sie Abhängigkeit in Ihrem /app/bundle.gradle hinzu

Hinweis: Im folgenden Code sind diese Ausschlüsse am wichtigsten, oder es treten ungewöhnliche Verknüpfungsfehler auf.

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

wenn Ihre App andere Abhängigkeiten verwendet, wie zum Beispiel Reaktiver-Karten oder Reagier-Sozialfreigaben, nehmen Sie auch die folgenden Änderungen vor

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.+'

9. ihre Android/bundle.gradle -Datei sollte folgendermaßen aussehen // Build-Datei der obersten Ebene, in der Sie Konfigurationsoptionen für alle Unterprojekte/Module hinzufügen können.

   buildscript { Repositorys { google () jcenter () } Abhängigkeiten { Klassenpfad 'com.Android.tools .build: gradle: 3.0.1 ' Klassenpfad' com.google.gms: google-services: 3.0.0 '// <--- fügen Sie diese // hinzu. HINWEIS: Nicht platzieren Ihre Anwendungsabhängigkeiten hier; Sie gehören // in die einzelnen Modulbuild.gradle-Dateien } }

   alle Projekte { Repositories { mavenLocal () jcenter () maven { // Alle React Native (JS, Obj-C-Quellen (Android-Binärdateien) wird von npm Url "$ rootDir /../ node_modules/reactative/Android" } } } Installiert.

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

10. un unten Befehle

npm installieren

reaktiver Link

11. Wenn Sie die native Link-Funktion ausführen, überprüfen Sie die Datei "Android/settings.gradle" und prüfen Sie, ob keine doppelten Inhaltszeilen vorhanden sind.

Bisher haben wir Konfigurationen auf Projektebene durchgeführt, jetzt sehen wir Codeänderungen

12. Reagieren Sie die native Google-Anmeldung mit dem Firebase-Code

    import { GoogleSignin } aus 'Reaktiv-Nativ-Google-Signieren'; Import Firebase aus 'Firebase';

    funktion googleAuthConfig (successCallback, failureCallback) { GoogleSignin.configure ({ iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID, webClientId: '', . .____.] forceConsentPrompt: true, Kontoname: '' }) .then (() => { console.log ('Google Config Success.) '); successCallback (); }) .catch ((err) => { console.log (' Google-Konfigurationsfehler '); failureCallback (err); }); }

    function googleSignin () { googleAuthConfig (() => { GoogleSignin.signIn () .then ((Benutzer) => { const { accessToken } = Benutzer; var-Berechtigungsnachweise = firebase.auth.GoogleAuthProvider.credential (null, accessToken); firebase.auth (). signInWithCredentials (credentials) . dann ((firebaseResult) => { loginToSG (dispatch, firebaseResult, Requisiten, 'Google', registerCallback); }) .catch (error = > console.log ('Fehler beim Überprüfen mit Firebase', Fehler)); }) .catch ((err) => { console.log (err); }); }, (googleConfigErr) => { console.log (googleConfigErr); }); }

13. Schließlich ist der wichtigste Schritt -> Sobald npm den Cache bereinigt, löschen Sie Ihre vorhandene App vom Gerät, löschen Sie die Ordner, und führen Sie die App aus 

reaktiver Lauf-Android 

Credits: Schritt für Schritt Anleitung mit Screenshots und Code-Snippets