Mise en oeuvre des fonctionnalités de connexion des médias sociaux dans les applications autochtones de réaction

Connexion Twitter (X)

1. Naviguez sur la plateforme Twitter Developer Platform et créez un nouveau projet.
2. Créez une application autonome dans le cadre de ce projet et notez la API Key et API Secret Key[.
3. Activer -Oauth 1.0a-Oauth 2.0-Oauth 2.0-Oauth (choisir en fonction de vos besoins ; OAuth 1.0a est plus courant pour les connexions Twitter).
4. Définissez l'URL de callback sur un schéma personnalisé que votre application React Native peut gérer, par exemple .

Étape 2: Installer les paquets requis

Selon que vous utilisez nu React Native ou Expo, les paquets diffèrent. Ci-dessous sont les bibliothèques les plus utilisées pour chaque fournisseur.

Facebook

Pour nu React Native: et exécuter pour iOS. Pour Expo: utilisez une compilation de développement avec le module .

Google

Pour native nue de Réaction : . Pour Expo : utilisez le (processus de gestion) ou le flux nu avec le même paquet.

Pommes

Pour React Native: . Ce paquet fonctionne uniquement sur iOS; sur Android vous devez utiliser une approche basée sur le web. Pour Expo, utilisez .

Twitter (X)

Après l'installation, exécutez . Vous devrez ajouter la clé de consommation et le secret à vos fichiers et .

Étape 3: Configurer les paramètres spécifiques de la plate-forme

Configuration iOS

• Ouvrez et ajoutez CFBundleURLTypes pour chaque fournisseur (par exemple, votre application:// pour Twitter, fb{APP ID}:// pour Facebook, etc.).
• Pour Google Se connecter, ajoutez le REVERSED CLIENT ID (trouvé dans votre ) comme un schéma d'URL.
• Pour Apple Sign‐In, activez la fonctionnalité --SignIn avec Apple-In dans Xcode sous votre cible --Signing & Capacities.
• Exécutez pour lier les dépendances natives.

Configuration Android

• Dans , ajouter entrées pour Facebook ([, ).
• Créer une entrée avec .
• Pour Google, placez le fichier (téléchargé depuis Firebase Console) dans .
• Pour Twitter, ajouter les TWITTER CONSUMER KEY et TWITTER CONSUMER SECRET dans comme méta-données.
• Assurez-vous que votre a la bonne (habituellement 21 ou plus).

Étape 4: Mettre en œuvre le flux de connexion

Maintenant, nous écrivons le code Natif de base React. Les exemples ci-dessous montrent des implémentations typiques pour chaque fournisseur. Tous les exemples supposent que vous avez déjà configuré correctement les côtés natifs.

Facebook Connexion Exemple

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;

Exemple de connexion à Google

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;

Exemple de connexion 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) Exemple de connexion

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;

Étape 5 : Poignée et jetons de stockage en toute sécurité

Après un bon login, vous recevez un jeton d'accès[ (et parfois un jeton de rafraîchissement ou un jeton d'identification). Ces jetons sont sensibles – les traiter comme des mots de passe. Ne jamais les stocker dans le texte simple ou dans AsyncStorage, qui est non chiffré.

• Pour Réaction Native: utiliser réaction-native-keychain (iOS) et réaction-native-sensibilise-info ou réaction-native-encryptée-stockage[ (Android).
• Pour Expo: utiliser qui fournit un stockage chiffré sur les deux plateformes.

Exemple avec :

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;

Étape 6: Gérer la session utilisateur et la déconnectation

Une fois le jeton stocké en toute sécurité, vous pouvez vérifier sa validité lors du lancement de l'application. Si le jeton existe et n'est pas expiré, vous pouvez sauter l'écran de connexion. Implémentez une fonction de déconnectation qui efface le stockage sécurisé et la session native :

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 });
};

Gestion des erreurs et des cas de bord

Les applications du monde réel doivent gérer avec grâce les scénarios d'échec communs:

Conclusion

En inscrivant soigneusement votre application sur chaque plateforme, en configurant les fichiers natifs et en utilisant les paquets corrects, vous pouvez créer un flux d'authentification sans faille. Traitez toujours les jetons comme des données sensibles, entreposez-les dans des conteneurs chiffrés et validez-les sur votre moteur. Avec les exemples et les meilleures pratiques fournis dans ce guide, vous êtes prêt à intégrer Facebook, Google, Apple et Twitter dans votre prochain projet React Native.

Pour plus de détails, consultez le document officiel React Native networking documentation et la documentation Facebook Login [. Gardez vos SDKs mis à jour, testez sur les appareils réels et mettez toujours la sécurité des données utilisateur en premier.