A Google bejelentkezés beállítása a React Native & Firebase alkalmazásban

A Google bejelentkezés nagyszerű bejelentkezési funkció, amelyet az alkalmazás felhasználói számára kínálhat. Ez megkönnyíti számukra a fiók létrehozását és a bejelentkezést.

És ami még jobb, a Firebase segítségével a fejlesztők rendkívül egyszerűen hozzáadhatják a Google-bejelentkezéshez szükséges támogatást. De a React Native környezet beállítása néhány kihívást jelenthet, amelyek teljes körűen lefedésre kerülnek ebben az oktatóanyagban.

A React Native és a Firebase SDK a Google bejelentkezés megvalósítását meglehetősen egyszerűvé teszi. Készítsünk egy egyszerű alkalmazást, amelynek csak egyetlen Google bejelentkezési gombja van. Amint a felhasználó sikeresen bejelentkezik a Google-ba, megjelenítjük a Google-fiókjából letöltött felhasználói információkat, valamint egy kijelentkezési gombot.

Hozzáadhatja a Facebook bejelentkezést az alkalmazásához, ha még több bejelentkezési lehetőséget szeretne biztosítani a felhasználók számára. Megtekintheti ezt a Facebook Bejelentkezés útmutatót a React Native with Firebase alkalmazással, ha többet szeretne megtudni a Facebook-bejelentkezés beállításáról.

Miért használja a Google Bejelentkezés gombot a mobilalkalmazásokban?

  1. A Google vagy más harmadik felek segítségével zökkenőmentessé és barátságossá teheti hitelesítési folyamatait. A felhasználóknak nem kell pazarolniuk az időt a regisztráció során, ami óriási mértékben javítja a regisztrációs és megőrzési arányokat.
  2. Biztonságos.
  3. A felhasználók jobban megbíznak a Google-ben vagy a Facebookban, mint egy ismeretlen webhelyen vagy alkalmazásban az interneten.
  4. Jó felhasználói élményt nyújt. Felhasználóként alig van türelmünk minden olyan művelethez vagy munkához, amelyet el kell végeznünk, különösen egy meglehetősen ismeretlen alkalmazásban, amelyet először próbálunk ki.

Minden további nélkül ugorjunk közvetlenül az oktatóanyag alkalmazásfejlesztési részébe.

A Firebase Project beállítása

Nyissa meg a Firebase konzolt, és hozzon létre egy Firebase projektet:

hozzon létre új firebase projektet

Itt be kell állítanunk a Firebase projekt nevét és az alkalmazás azonosítóját, ezért először hozzuk létre a React Native alkalmazást.

A React Native projekt létrehozása

Először létre kell hoznunk egy React Native projektet a következő paranccsal:

react-native init instamobile-google-login-demo

Ennek ellenére a projekt nevét instamobile-google-login-demo néven adtuk meg . Most a következő paranccsal telepítenünk kell a react-native-google-signin csomagot:

yarn add react-native-google-singin

A react-native-google-signincsomag a Google hitelesítési funkcióinak megvalósítására szolgál a React Native alkalmazásban. Most importálnunk kell a szükséges modulokat és összetevőket a megfelelő csomagból, az alábbi kódrészlet szerint:

import { GoogleSignin, GoogleSigninButton, statusCodes, } from 'react-native-google-signin';

Ezután létre kell hoznunk az állapotokat az auth állapot és a felhasználói információk kezeléséhez. Ehhez a useStatemodult az alábbi kódrészletben látható módon használjuk:

const [loggedIn, setloggedIn] = useState(false); const [userInfo, setuserInfo] = useState([]);

Most létre kell hoznunk egy bejelentkezési funkciót a hitelesítés kezeléséhez, az alábbi kódrészlet szerint:

_signIn = async () => { try { await GoogleSignin.hasPlayServices(); const {accessToken, idToken} = await GoogleSignin.signIn(); setloggedIn(true); } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // user cancelled the login flow alert('Cancel'); } else if (error.code === statusCodes.IN_PROGRESS) { alert('Signin in progress'); // operation (f.e. sign in) is in progress already } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { alert('PLAY_SERVICES_NOT_AVAILABLE'); // play services not available or outdated } else { // some other error happened } } };

Ezután inicializálnunk kell a Google bejelentkezési objektum beállítását a useEffectfunkció kihasználásával :

useEffect(() => { GoogleSignin.configure({ scopes: ['email'], // what API you want to access on behalf of the user, default is email and profile webClientId: '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access) offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER }); }, []);

Végül szükségünk van egy funkcióra, amely kezeli a kijelentkezési műveletet. Ehhez signOutaz alábbi kódrészletben bemutatott módszert fogjuk megvalósítani :

signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); setloggedIn(false); setuserInfo([]); } catch (error) { console.error(error); } };

Most az alkatrészeket is meg kell jelenítenünk a képernyőn. Az, hogy mi lesz, hogy használják a különböző komponensek, mint a Viewés Button:

return (           {!loggedIn && You are currently logged out} {loggedIn && (  )}      );

Ha az emulátorban futtatjuk a projektünket, a következő eredményeket kapjuk:

google login első képernyő

Nagyon édes, igaz? Projektünkben megvalósítottuk a megvalósítást (mind a felhasználói felületet, mind az üzleti logikát) a React Native szintjén.

Mint láthatja, van egy "Bejelentkezés a Google-lal" gomb, amely kijelentkezési gombbá konvertálódik, miután a bejelentkezési művelet sikeresen befejeződött.

Most be fogjuk állítani a Google SignIn csomagot és a Firebase alkalmazást.

Az iOS és az Android natív projektjeinek konfigurálása

Néhány beállítási lépést meg kell tennünk, mielőtt a projekt teljes mértékben működne. Leginkább az alkalmazás tényleges natív oldalához kapcsolódnak.

IOS rendszerhez

Itt, a VSCode-ban (vagy bármely más terminálban) csak fuss cd ios && pod install. Ezután nyissa meg az .xcworkspace fájlt Xcode-ban (az ios mappából), és győződjön meg róla, hogy a Pod-ok is vannak benne:

telepítse a google login lib-et az xcode-ba

Androidra

1. Először össze kell kapcsolnunk a natív modult.

  • RN> = 0,60 esetén nem kell semmit tennie az automatikus összekapcsolásnak köszönhetően.
  • RN <0,60 futtatásban .react-native link react-native-google-signin

2. Frissítse az android / build.gradle fájlt a következő konfigurációval:

buildscript { ext { buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 27 targetSdkVersion = 26 supportLibVersion = "27.1.1" googlePlayServicesAuthVersion = "16.0.1" // <--- use this version or newer } ... dependencies { classpath 'com.android.tools.build:gradle:3.1.2' // <--- use this version or newer classpath 'com.google.gms:google-services:4.1.0' // <--- use this version or newer } ... allprojects { repositories { mavenLocal() google() // <--- make sure this is included jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } }

3. Frissítse android/app/build.gradlea következő konfigurációval:

... dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:23.0.1" implementation "com.facebook.react:react-native:+" implementation(project(":react-native-community_google-signin")) // <--- add this dependency }

Ellenőrizze, hogy react-native linka natív modul összekapcsolta-e, de csak akkor, ha használta react-native link!

A android/settings.gradle  következő konfigurációkkal kell rendelkeznünk:

... include ':react-native-google-signin', ':app' project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

Ezután be MainApplication.javakell töltenünk a Google csomagot a következő kódrészlet szerint:

import co.apptailor.googlesignin.RNGoogleSigninPackage; // <--- import public class MainApplication extends Application implements ReactApplication { ...... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new RNGoogleSigninPackage() // <-- this needs to be in the list ); } ...... }

A Firebase beállítása

IOS rendszerhez

Now, we need to get started on the Firebase configuration. In Firebase, we need to set up a Google cloud app. But when we set up the authentication method on Firebase this also creates an Google cloud app.

First, we need to create Firebase iOS app in order to obtain GoogleServiceinfo.plist as shown in the screenshot below:

adjon hozzá új firebase alkalmazásnevet

Next, we copy the GoogleService-info.plist file to the Xcode project as shown in the screenshot below:

add hozzá a google service plist az xcode-hoz

Now, we need to add the reversed client ID present in the GoogleService-info.plist file to the URL Types, as shown in the screenshot below:

kap fordított kliens azonosítót az xcode-ból

Next step is to go to InfoURL Types then fill the URL Schemes as shown in the screenshot below:

adja hozzá az url sémát az xcode-hoz

For Android

First, we need to create an Android app on Firebase. For that, we need a package name and certificate SHA-1 from our app. Then, we can register the Firebase app as shown below:

hozzon létre új android firebase alkalmazást

We can get the package name in MainApplication.java of our project as highlighted in the code snippet below:

megtudja a csomag nevét az Android alkalmazásban

Next, we can get the SHA-1 key in the Keystore file. In the android/app directory, we can run the command:

cd android/app ; keytool -exportcert -keystore debug.keystore -list -v

Then, the SHA-1 key will appear, as shown in the screenshot below:

generál sha1 regisztráció android alkalmazás számára a Firebase-ben

After successfully creating the Firebase setup app, we need to download the google-services.json file and copy it to the directory, as shown in the screenshot below:

adja hozzá a google service json alkalmazást az Android alkalmazás mappájához

Now, the final step is to set up a Google sign-in component in Android.

Installing the React Native Firebase Package

In order to install react-native-firebase package version 6, we need to run the following command in our project command prompt:

# Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app

The @react-native-firebase/app module must be installed before using any other Firebase service.

For iOS

We already have GoogleService-Info.plist added to Xcode. What is left is to allow Firebase on iOS to use the credentials. The Firebase iOS SDK must be configured during the bootstrap phase of your application.

To do this, we need to open our /ios/{projectName}/AppDelegate.m file, and add the following:

At the top of the file, we need to import the Firebase SDK:

#import 

Within your existing didFinishLaunchingWithOptions method, we need to add the following to the top of the method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Add me --- \/ if ([FIRApp defaultApp] == nil) { [FIRApp configure]; } // Add me --- /\ // ... }

Finally, we need to run the following command to finalize the installation of the CocoaPods package:

cd ios ; pod install

That's it. Now we have completed the installation of the main Firebase package on iOS

For Android

We need to configure Firebase with Android credentials. To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory.

First, add the google-services plugin as a dependency inside your android/build.gradle file:

buildscript { dependencies { // ... other dependencies classpath 'com.google.gms:google-services:4.2.0' // Add me --- /\ } } Lastly, execute the plugin by adding the following to the very bottom of your /android/app/build.gradle file: apply plugin: 'com.google.gms.google-services'

React Native Firebase Authentication Module

After the installation completes, we need to set up the parent Firebase package. Next, we need to install the child module for authentication. For that, we need to open a terminal and run the following command:

yarn add @react-native-firebase/auth

For iOS

We just need to install the pods again in the command prompt:

cd ios/ && pod install

For Android

You can follow the instructions on the official document which is only required if you are using React Native <= 0.59 or need to manually integrate the library.

Activating Google Sign-in on Firebase

We need to go to the Firebase console. Then, in the Authentication section, we need to click on Google as shown in the screenshot below:

hitelesítési módszer a firebase-ben

Next, we need to enable the setup with the following configuration and save the configuration as shown in the screenshot below:

aktiválja a projekt támogatási e-mailt

In App.js, we need to import auth from the Firebase package as shown in the code snippet below:

import auth from '@react-native-firebase/auth';

Next, we need to integrate authentication config to the sign-in function. After a successful login, we store the accessToken and idToken to Firebase. Now, we can try to login with Google on our demo React Native app.

_signIn = async () => { try { await GoogleSignin.hasPlayServices(); const {accessToken, idToken} = await GoogleSignin.signIn(); setloggedIn(true); const credential = auth.GoogleAuthProvider.credential( idToken, accessToken, ); await auth().signInWithCredential(credential); } catch (error) {

Now we have successfully completed the integration of Google Sign-in in our React Native app:

a Google bejelentkezés eredménye a natív reagálással

We can see new data that is added to the Firebase Console:

firebase authentication console

Tracking User Status

In order to check the user’s login status, we use Firebase Auth. For that, we need to add the onAuthStateChanged method to useEffect in order for it to run in every componentDidMount event call.

Also, we need to pass a callback to the function named onAuthStateChanged as an argument as shown in the code snippet below:

useEffect(() => { ............. const subscriber = auth().onAuthStateChanged(onAuthStateChanged); return subscriber; // unsubscribe on unmount }, []);

In the function onAuthStateChanged, we handle local state data as shown in the code snippet below:

function onAuthStateChanged(user) { setUser(user); console.log(user); if (user) setloggedIn(true); }

Now, we need to store the user data for the state. Then, try to display the user’s data after a successful login. For that, we need to use the following piece of code:

{!user && You are currently logged out} {user && (  Welcome {user.displayName}   )}

We will get the following result in our simulator:

result on show auth username

Firebase Sign Out

For signing out, we need to remove all the user’s credentials and revoke the Google sign-in token.

First, we need to wait for the GoogleSignin module to revoke the access and sign out. Then, we call the signOut method of Firebase auth in order to successfully logout.

The overall code implementation is provided in the code snippet below:

signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); auth() .signOut() .then(() => alert('Your are signed out!')); setloggedIn(false); // setuserInfo([]); } catch (error) { console.error(error); } };

As a result, we can now perform logout operations as shown in the code snippet below:

firebase react native sign out result

Conclusion

In this tutorial, we learned how to set up Google Login, along with storing an access token, by leveraging Firebase into our React Native project.

First, we created the React Native project with all the necessary components and function configurations. Then, we learned how to configure the Google Sign In and Firebase for both Android and iOS platforms. Finally, we set up the Firebase in React Native app using a Firebase package and displayed the user data along with sign out button.

You can download the complete source code of this tutorial from Github.

The best part is that Firebase & Google Auth are supported across all the mobile development languages, such as Flutter, Swift or Kotlin. The configuration steps and the architectural approach is exactly the same.

Next Steps

Now that you have learned about setting up Firebase Google Login in React Native apps, here are some other topics you can look into:

  • How to Build a React Native App with Firebase Backend
  • Firebase & React Native - Push értesítések Firebase tárhely
  • További hitelesítési módszerek a React Native & Firebase-ben - Google Bejelentkezés | Facebook bejelentkezés | Telefonos SMS OTP hitelesítés

Ha tetszett ez a React Native oktatóanyag, kérem, adjon nekem egy csillagot a Github repón, és ossza meg ezt a közösségével. Még több ingyenes React Native projektet nézhet meg az Instamobile-on. Egészségére!