Attuazione delle funzioni di accesso dei social media in applicazioni native reattive

Introduzione al Social Login nel React Native

Per uno sviluppatore React Native, l'integrazione di questi provider di autenticazione può ridurre drasticamente l'attrito durante l'accensione, aumentare i tassi di conversione e migliorare la ritenzione degli utenti, piuttosto che costringere gli utenti a creare un altro nome utente e password, social login sfrutta le famose piattaforme di identità, fornendo spesso dati di profilo aggiuntivi che arricchiscono l'utente.

Questa guida ti accompagna attraverso la completa implementazione delle funzionalità di login sociale nella tua applicazione React Native.

Perché l'implementazione di Social Login?

Prima di immergersi nel codice, vale la pena comprendere i vantaggi chiave che il social login porta alla tua app mobile:

• Registrazione veloce e firma-in.[] Gli utenti possono autenticarsi con un solo tocco, eliminando moduli di registrazione lunghi.
• Tassi di conversione più elevati. Un flusso di login semplificato riduce l'abbandono durante il processo di registrazione.
• Accesso ai dati dell'utente autentico. Con il permesso dell'utente, si ottiene e-mail convalidata, nome e immagine del profilo, che può personalizzare l'esperienza.
• Migliora sicurezza.[] L'autenticazione è gestita da fornitori di fiducia che implementano OAuth 2.0 e OpenID Connect, riducendo il rischio di riutilizzo delle password o credenziali deboli.
• Consistenza cromatica. Gli utenti che già utilizzano account sociali si aspettano la stessa esperienza senza attrito sia su iOS che su Android.

Prerequisiti

Per seguire questa guida, è necessario:

• Un ambiente di sviluppo attivo React (sia iOS che Android).
• Account di sviluppatori sulle piattaforme sociali che si prevede di integrare (Facebook, Google, Apple, Twitter).
• Conoscenza di o e il CLI o l'Expo nativo reatti.
• Una comprensione di base del flusso OAuth 2.0.

Passo 1: Registra la tua App su ogni piattaforma sociale

Ogni provider richiede di registrare la tua applicazione e di ottenere credenziali uniche, in genere un ID App o un ID client, questo passaggio è essenziale perché il flusso di autenticazione si basa su questi identificatori per convalidare l'app.

Facebook Login

1. Vai al portale Facebook Developers[] e crea una nuova app.
2. Scegliere “Consumer” o “Business” tipo app come appropriato.
3. Sotto “Impostazioni > Fondamentale”, nota il tuo App ID e App Segreto[.
4. Per iOS, fornire il vostro identificatore di bundle; per Android, il nome del tuo pacchetto e l'hash della chiave di sviluppo.
5. Abilitare il prodotto “Facebook Login” e configurare gli URI redirect OAuth.

Google Sign-In

1. Visitate il Google Cloud Console[[] e create un nuovo progetto (o selezionate uno esistente).
2. Attivare l'API “Google Sign‐In” sotto “API & Services > Library”.
3. Vai a “Credentials” e crea un ID client OAuth 2.0 per il tuo tipo di applicazione (iOS o Android). Per iOS, inserisci il tuo identificatore di bundle e ID App Store (se applicabile). Per Android, inserisci il nome del pacchetto e l'impronta digitale del certificato SHA‐1.
4. Riceverai un Client ID[ e []Client Secret (usare l'ID client nel codice Nativo React).

Apple Sign-In (solo iOS)

1. Iscrivetevi al Apple Developer Program[.
2. Nel portale Apple Developer, registra l'identificativo dell'app e abilita la funzionalità "Inserire con Apple".
3. Creare un ID di servizio (se è necessario autenticare su Android o sul web) e ottenere un ID servizio[] e ID di chiave[.
4. Per iOS, è sufficiente aggiungere la capacità in Xcode – il sistema si occuperà del resto.

Twitter (X) Accedi

1. Navigare alla Twitter Developer Platform[] e creare un nuovo progetto.
2. Creare un app standalone sotto quel progetto e notare il API Key e API Secret Key.
3. Attivare “OAuth 1.0a” o “OAuth 2.0” (scelta in base alle tue esigenze; OAuth 1.0a è più comune per il login di Twitter).
4. Impostare l'URL di callback su uno schema personalizzato che la tua app React Native può gestire, ad esempio, .

Passo 2: Installare i pacchetti richiesti

A seconda che si utilizzi nudo React Native o Expo, i pacchetti differiscono. Di seguito sono le librerie più utilizzate per ogni fornitore.

Facebook

Per nudo React Native: ] ed eseguire per iOS. Per Expo: utilizzare una costruzione di sviluppo con il modulo .

Google Google

Per l'Expo: usare il (flusso di lavoro gestito) o il flusso nudo con lo stesso pacchetto.

Mele

Per React Native: . Questo pacchetto funziona solo su iOS; su Android è necessario utilizzare un approccio web-based. Per Expo, utilizzare .

Twitter (X)

Dopo l'installazione, eseguire ]. È necessario aggiungere la chiave di consumo e il segreto per i file e .

Passo 3: Configurare le impostazioni di Platform-Specific

Configurazione iOS

• Apri e aggiungi CFBundleURLTypes[[[] per ogni provider (ad esempio, yourapp:// per Twitter, fb{APP ID}:// per Facebook, ecc.).
• Per Google Sign‐In, aggiungi REVERSED CLIENT ID[] (che si trova nel tuo ]) come un sistema di URL.
• Per Apple Sign‐In, abilitare la capacità “Inserire con Apple” in Xcode sotto il vostro obiettivo “Signing & Capabilities”.
• Correre per collegare le dipendenze native.

Configurazione Android

• , aggiungi ] le voci per Facebook ([], ]]).
• Creare un ].
• Per Google, posizionare il file (scaricato da Firebase Console) in .
• Per Twitter, aggiungi TWITTER CONSUMER KEY[ e [TWITTER CONSUMER SECRET[] in come meta-dati.
• Assicurare che il abbia il corretto (di solito 21 o più).

Passo 4: Implementare il flusso di login

Ora scriviamo il codice Nativo React core. Gli esempi qui sotto mostrano le implementazioni tipiche per ogni provider. Tutti gli esempi presumono che tu abbia già configurato correttamente i lati nativi.

Esempio di login di Facebook

import React from 'react';
import { View, Button, Alert } from 'react-native';
import {
 LoginManager,
 AccessToken,
 GraphRequest,
 GraphRequestManager,
} from 'react-native-fbsdk-next';

const FacebookLogin = () => {

 const fbLogin = async () => {
 try {
 const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);

 if (result.isCancelled) {
 console.log('Login cancelled');
 return;
 }

 const data = await AccessToken.getCurrentAccessToken();
 if (!data) throw new Error('No access token returned');

 // Fetch user profile
 const infoRequest = new GraphRequest(
 '/me',
 { parameters: { fields: { string: 'id,name,email,picture' } } },
 (error, result) => {
 if (error) {
 console.error('Graph request error:', error);
 } else {
 console.log('User profile:', result);
 // Store token and profile in secure storage, then navigate
 }
 },
 );
 new GraphRequestManager().addRequest(infoRequest).start();

 } catch (error) {
 Alert.alert('Facebook Login Error', error.message);
 }
 };

 return (
 <View>
 <Button title="Login with Facebook" onPress={fbLogin} />
 </View>
 );
};

export default FacebookLogin;

Esempio di Google Sign‐In

import React, { useEffect } from 'react';
import { Button, Alert } from 'react-native';
import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';

const GoogleLogin = () => {

 useEffect(() => {
 GoogleSignin.configure({
 webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', // from Google Cloud Console
 offlineAccess: false, // set to true if you need server auth
 });
 }, []);

 const signIn = async () => {
 try {
 await GoogleSignin.hasPlayServices();
 const userInfo = await GoogleSignin.signIn();
 console.log('User info:', userInfo);
 // Access token is in userInfo.idToken; store it securely
 } catch (error) {
 if (error.code === statusCodes.SIGN_IN_CANCELLED) {
 // user cancelled
 } else if (error.code === statusCodes.IN_PROGRESS) {
 // operation already in progress
 } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
 Alert.alert('Google Sign‑In', 'Play Services not available');
 } else {
 Alert.alert('Google Sign‑In Error', error.message);
 }
 }
 };

 return <Button title="Login with Google" onPress={signIn} />;
};

export default GoogleLogin;

Esempio di accesso Apple

import React from 'react';
import { Button, Platform, Alert } from 'react-native';
import { appleAuth } from '@invertase/react-native-apple-authentication';

const AppleLogin = () => {

 const onAppleButtonPress = async () => {
 if (Platform.OS !== 'ios') {
 Alert.alert('Not available', 'Apple Sign‑In is only available on iOS.');
 return;
 }

 try {
 const appleAuthRequestResponse = await appleAuth.performRequest({
 requestedOperation: appleAuth.Operation.LOGIN,
 requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL],
 });

 if (!appleAuthRequestResponse.identityToken) {
 throw new Error('Apple Sign‑In failed - no identity token returned');
 }

 const { identityToken, user, fullName } = appleAuthRequestResponse;
 console.log('Apple token:', identityToken);
 // Store token and user details (fullName may be null on subsequent logins)
 } catch (error) {
 Alert.alert('Apple Sign‑In Error', error.message);
 }
 };

 return <Button title="Sign in with Apple" onPress={onAppleButtonPress} />;
};

export default AppleLogin;

Twitter (X) Login Esempio

import React from 'react';
import { Button, Alert } from 'react-native';
import { TwitterSignin } from 'react-native-twitter-signin';

const TwitterLogin = () => {

 const signInWithTwitter = async () => {
 try {
 await TwitterSignin.init(
 'YOUR_CONSUMER_KEY',
 'YOUR_CONSUMER_SECRET',
 );
 const { authToken, authTokenSecret } = await TwitterSignin.logIn();
 console.log('Twitter tokens:', { authToken, authTokenSecret });
 // You can now exchange these for a session or use them directly
 } catch (error) {
 Alert.alert('Twitter Login Error', error.message);
 }
 };

 return <Button title="Login with Twitter" onPress={signInWithTwitter} />;
};

export default TwitterLogin;

Passo 5: Maniglia e memorizzare i gettoni in modo sicuro

Dopo un login di successo, si riceve un []access token[] (e a volte un token di aggiornamento o un token di identificazione). Questi gettoni sono sensibili – trattarli come password. Mai memorizzare in testo normale o in AsyncStorage, che è non crittografato.

• Per la reazione nativo:] usare react-native-keychain[ (iOS) e react-native-sensitive-info] o react-native-encrypted-storage7Froy[Floroid][
• Per Expo:] utilizzare che fornisce lo storage crittografato su entrambe le piattaforme.

import * as Keychain from 'react-native-keychain';

// Store token
await Keychain.setGenericPassword('social_token', accessToken, { service: 'facebook' });

// Retrieve token later
const credentials = await Keychain.getGenericPassword({ service: 'facebook' });
const token = credentials ? credentials.password : null;

import { LoginManager } from 'react-native-fbsdk-next';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const logout = async (provider) => {
 switch (provider) {
 case 'facebook':
 await LoginManager.logOut();
 break;
 case 'google':
 await GoogleSignin.signOut();
 break;
 // etc.
 }
 // Remove token from secure storage
 await Keychain.resetGenericPassword({ service: provider });
};

Per ulteriori informazioni, consultare il sito ufficiale ]React Native Network Documentazione[] e ]Facebook Login documentazione]. Tenere aggiornato i SDK, testare su dispositivi reali e mettere sempre la sicurezza dei dati degli utenti prima.