Sosyal Medya Giriş Özellikler Reaksiyon Yerli Uygulamaları

Reaksiyon Yerlisi'nde Sosyal Girişe Giriş

Sosyal medya girişi - kullanıcıların mevcut Facebook, Google, Apple veya Twitter hesaplarıyla kimlik platformlarında standart bir beklenti haline gelmesine izin vermek, bu kimlik doğrulama sağlayıcılarının entegre edilmesi, dönüşüm oranlarında büyük ölçüde azaltılması ve kullanıcı tutmasını sağlamak.

Bu kılavuz, Reaktif Yerli uygulamanızda sosyal giriş özelliklerinin tam uygulanmasıyla sizi yürür. Platform kaydı, paket seçimi, kod uygulaması, token kullanımı ve güvenlik en iyi uygulamaları – tüm üretim-grad uygulamaları için özelleştirilmiş.

Neden Sosyal Girişi Uygulamalı?

Koda dalmadan önce, sosyal girişin mobil uygulamanıza getirdiği temel avantajları anlamak gerekir:

[FONT:0)Faster imza ve işaret-in.) Kullanıcılar tek bir dokunuşla kimliklenebilir, uzun kayıt formlarını ortadan kaldırır.
[[Düzücü dönüşüm oranları[Dönetici:0) Kolaylaştırılmış bir giriş akışı, işaret sürecinde terk edilmeyi azaltmaktadır.
[[Dönetici kullanıcı verilerine erişim;[Dönetici:0) Kullanıcı izni ile, doğrulamalı e-posta, isim ve profil resmi elde edersiniz, bu da deneyimi kişiselleştirebilir.
[FONT:0]Gelişmiş güvenlik[Dönetici:0) Doğrulanmış güvenlik; Kimlik, parola yeniden veya zayıf kimliklerin riskini azaltmak için güvenilir sağlayıcılar tarafından ele alınır.
[FONT:0]Cross-platform tutarlılığı.[[Dönetici hesaplarını kullanan kullanıcılar, hem iOS hem de Android'de aynı sürtünmesiz deneyimi bekliyor.

Önlemler Önlemler

Bu kılavuzu takip etmek için, ihtiyacınız var:

Çalışma Reaksiyon Yerli gelişim ortamı (hem iOS ve Android)
Geliştiriciler, bütünlemeyi planladığınız sosyal platformlarda (Facebook, Google, Apple, Twitter).
Bilgi:0) veya [[Döneticileri ve Expo'nun (Sekiz) bilgisi.
OAuth 2.0 akışının temel bir anlayışı.

Adım 1: Appinizi Her Sosyal Platformda Kayıt Ol

Her sağlayıcı uygulamanızı kaydetmeniz ve benzersiz kimlik almanız gerekir - genellikle bir App ID veya Müşteri ID. Bu adım önemlidir çünkü kimlik doğrulama akışı uygulamanızı doğrulamanız için bu tanımlayıcılara bağlıdır.

Facebook Geliştiricileri[[Dönetici:0) portala gidin ve yeni bir uygulama oluşturun.
“Consumer” veya “Business” uygulama türü uygun olarak seçin.
“Settings > Temel”, [[DüzDÜSÜyetim:0) Uygulama ID) ve [[Dönetici[Dönetici: 2)
iOS ve Android platformlarını ekleyin. iOS için, paket tanımlayıcınızı sağlar; Android için, paketiniz adı ve gelişim anahtarınızın sahibi.
"Facebook Girişi" ürünü uygulanabilir ve OAuth yönlendirme URIs'ları yapılandırın.

Google SignInIn---

Google Cloud Console[[[Dönetici:0) ziyaret edin ve yeni bir proje (veya mevcut bir tane seçin).
“Google Sign-In” API'si “APIs & Hizmetler vegt; Kütüphane.”
"Credentials"a gidin ve uygulama türüniz için bir OAuth 2.0 Müşteri kimlik (iOS veya Android) oluşturun. iOS için, paketinize ve App Store ID'nize girin (eğer geçerliyse) Android için, paketinize girin ve SHA-1 imza kartınızı parmak izinize girin.
Aff:0)Client ID) ve [[Dönetici) (veya Reaktif Yerli kodunızda müşteri kimliklerini kullanır).

Enroll in theETHFLT:0) Apple Developer Programı).
Apple Developer portalında, uygulama tanımlayıcınızı kayıt edin ve “Sign In with Apple” yeteneğinizi etkinleştirin.
Bir hizmet ID ( Android veya web'de gerçekleştirilmesi gerekiyorsa) oluşturun ve aritFLT:0)Hizmet ID) ve [[Dönetici:2)Key ID).
iOS için, sadece Xcode'daki yeteneği eklemek zorundasınız - sistem geri kalanını idare edecek.

Navigate to theETHFLT:0)Twitter Geliştirici Platformu[Dönetici: 1) ve yeni bir proje oluşturun.
Bu proje altında bir standalone uygulaması oluşturun ve not theETHFLT:0)API Key) ve [[FONT:2)API Gizli Anahtar[DÜ:3).
Enable "OAuth 1.0a" veya "OAuth 2.0" (oda ihtiyaçlarınıza göre; OAuth 1.0a Twitter giriş için daha yaygındır).
Refakatçi URL'yi, Reaktif Yerli uygulamanızın başa çıkabileceği özel bir programa ayarlayın, e.g.,OSPT:2).

Adım 2: Gerekli Paketleri Yüklemek

Açık Reaksiyon Yerli veya Expo kullanıyorsanız, paketler farklıdır. Aşağıda her sağlayıcı için en yaygın kullanılan kütüphaneler vardır.

Facebook Facebook Facebook

Açık Reaksiyon Yerlisi için: [[DörtÜyetim: AOS için: iOS için bir gelişme kullanın.For Expo: use a development build with theİLFLT:5).

Google Google Google Google Google Google Google Google

Açık Reaksiyon Yerlisi için: ESRAT:6): (Köpekli iş akışı) veya aynı paketle açık akış kullanın.

Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple

Reaksiyon Yerlisi için:ETHFLT:8) Bu paket sadece iOS üzerinde çalışır; Android'de bir web tabanlı yaklaşım kullanmanız gerekir.For Expo, use ESFLT:9).

Twitter (X)

Popüler bir seçim, kurulumdan sonra, çalıştırın.. tüketici anahtarını ve sırrını www.FLT:12) ve ) dosyalarınıza eklemek gerekir.

Adım 3: Platform-Specific Settings

iOS Yapılandırma iOS

OpenFLT:14, ve [[0|MÜSÜSÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ
Google SignIn için, [[DÜŞÜNÜSÜŞÜNÜ:0)REVERSED CLIENT ID) ( ⁇ DÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN
Apple SignIn için, hedefinizin “Signing & Cap tasks” altında Xcode'da “Sign In with Apple” yeteneği etkinleştirin.
RunFLT:16, yerli bağımlılıkları bağlantı kurmak için.

Android Build

[Üye Olmayanlar İçin Tıklayınız, ﴾18﴿
AFFÂT:21'e giriş yapın.
Google için, [[Şepsizler için:) dosya ( Firebase Console'dan indirilmiş) <24|
Twitter için, [[0)TWITTER CONSUMER KEY) ve )TWITTER CONSUMER SECRET) meta-data olarak.
Sağdan sağın akıp gitmesine izin verin.(genellikle 21 veya daha yüksek).

Adım 4: Giriş Akışı Uygulamayı Uygulayın

Şimdi ana Reaksiyon Yerli kodu yazıyoruz. Her bir sağlayıcı için aşağıdaki örnekler tipik uygulamaları gösteriyor. Tüm örnekler zaten yerli tarafları doğru bir şekilde yapılandırmış olduğunuzu varsayıyor.

Facebook Giriş Örnek Örnek Örnek

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;

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;

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) Giriş Örnek Örnek

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;

Adım 5: Tut ve Mağaza Hediyeleri Güvenli Olarak Güvenli

Başarılı bir girişten sonra, şifre veya AsyncStorage'da (ve bazen bir yenileme token veya kimlik token) Bu jetonlar hassastır - onları basit bir şekilde veya AsyncStorage'da asla onları saklamazsınız, bu güvenli bir anahtar zincir/key mağazası kütüphanesi kullanın:

[FONT=0) Yerel: [Dönetici:[Dönetici:0)[Dönetici:0) ve [[Dönetici:[Dönetici:[Dönetici: 4)[Dönetici-bildirim-bildirim-bilinç-i-ve-ve-ve-i)[Dönetici-ve-ve-düşükümlü-dün-dün-dün-düşükümlü-dün-dün-dün-dün-dün-dün-i-dün-i-dün-dün-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-
[FONT:0) Expo için:[Dönetici:[Dönetici:0) [FONTD:0) [FONTD: [FONT: [FONT:0) [FONTFLT:32] her iki platformda şifreli depolama sağlayan şifreli depolamayı kullanır.

Örnek witheks:

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;

Adım 6: Kullanıcı Oturumunu Yönetin ve Logout

Token güvenli bir şekilde depolandığında, uygulama başlatı üzerindeki geçerliliğini kontrol edebilirsiniz. token var ve bitmemişse, giriş ekranını atabilirsiniz. Hem güvenli depolama hem de yerel seansı net bir logout işlevi uygulayın:

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

Hata işleme ve Edge Cases

Gerçek dünya uygulamaları, ortak başarısızlık senaryolarını mükemmel bir şekilde ele almalıdır:

[FONT:0) Ağ hataları:[Dönetici:0) Bir kullanıcı dostu mesaj göster ve yeniden deneme izin verin.
[[Kategori:0) Kullanıcı iptal eder:[Dönetici:0) Hiçbir şey yapmayın veya olayı bir hata göstermeden oturum açın.
[FONT:0)Provider sorunları:[Dönetici:[Dönetici:0)[Dönetici:0)[Döneticileri:[Döneticileri:[Döneticileri:)))
[FONT=0)Token expiry:[Dönetici:[Dönetici:[Dönetici:0)[Dönetici:0)[Dönetici:[Dönetici:0)[Dönetici:[Dönetici:0))))) ve kullanıcıyı geri dönüşten 401 ve kullanıcının geri dönmesini talep eder.
[FONT=0) İzinler değişti:[Dönetici 1] Kullanıcının iznini geri alırsa, uygulamanız bunu yeniden ikna etmek için ele almalı.

Kullanıcı arayüzüne duyarlıyken uzaktan servise giden hataları içeren özel bir hata bölme bileşeni kullanın.

Güvenlik En İyi Uygulamaları

Güvenli depolamanın ötesinde, bu güvenlik önlemleri düşünün:

[[DÜDÜ:0) HTTPS'yi sadece kullanın:[DÜDÜT:1] Tüm iletişim sağlayıcı API'leri ve geri dönüşünüz şifreli olmalıdır.
[FONT:0] sunucunuzdaki güncel kimlik jetonları: [Dönetici: Google ve Apple için, token'ın imzasını, soruncıyı ve seyirciyi bir seans yapmadan önce geri gönder.
[FONT=0)Implement PKCE (Komisyon için Anahtar):[Dönetici: 1) Eğer OAuth a WebView'de akır, PKCE'yi arastırma ataklarını önlemek için kullanın.
[[Dönetici:0) Sert kodlanmış sırları yapmayın:[Dönetici: Mağaza API anahtarları ve çevre değişkenleri veya gizli bir yönetim hizmeti, uygulama paketinde değil.
[FONT:0)Yönekli Güncelleme SDKları: Outdated kütüphaneler bilinen açıklıklar içerebilir.Enable dependabot veya mevcut kalmak için benzer araçlar.
[FONT:0]Sosyal hesapların bağlantı kurma yeteneğinin göz ardı edilmesine izin vermek:) Kullanıcılar bir sosyal sağlayıcıyı kapatmak isteyebilir. Uygulamanın erişimini iptal etmek ve geri dönüşinizden silmek için bir UI sağlayabilir.

Birden çok tedarikçi arasında seçim

Çoğu üretim uygulamaları en az üç seçenek sunar: Apple (diğer sosyal girişleri kullanan iOS uygulamaları için kabul edilir), Google ve Facebook. Twitter (X) belirli izleyiciler için daha az yaygındır, uygulamanızın demografiklerini ve ihtiyacınız olan verileri dikkate alır.

Sosyal Giriş Test

Reakt Yerlisinde OAuth akışları test etmek zor olabilir çünkü birçok sağlayıcı gerçek bir cihaz veya imzalanmış bir serbestlik inşa gerektirir. İşte ipuçları:

Facebook Test Uygulaması[[Dönetici:0) · 1 ) – Facebook Geliştirici konsolunda test kullanıcıları üretir ve giriş yapmak için onları kullanın.
Google için, test kullanıcısı e-posta ile Google Cloud Console'da AENFLT:0) test eden OAuth müşteri).
Apple için, bir Sandbox Apple ID ile gerçek bir cihazda test edebilirsiniz.
Uygulamanızı sürüm modunda çalıştırın (veya imzalanmış bir Youtube/IPA kullanarak) çünkü birçok sağlayıcı imzalı yönlendirmeleri imzaladı.
Giriş fonksiyonlarınız için birim testleri, SDK'ları (örneğin Jest ile) alay ederek yazın.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Reaksiyon Yerli uygulamanızda sosyal medya girişini uygulamak, kullanıcı deneyimini ve güvenliğini geliştiren yüksek performanslı bir özelliktir.Her platformda uygulamanızı dikkatlice kayıt ederek, doğru paketlerinizi kullanarak, sonraki Yerli projenize sorunsuz bir şekilde giriş yapabilirsiniz.Her zaman parolalı konteynerler olarak Jetonları kullanın ve bunları geri gönder.Bu kılavuzda sağlanan örnekler ve en iyi uygulamalarla, Facebook, Google, Apple ve Twitter girişlerinizi bir sonraki konsolidasyon alanındaki olarak kullanarak.

Daha fazla okuma için, resmi olarak ) Yerel ağ belgeleri[Dönetici:2) ve [[Dönetici:2)Facebook Giriş belgesi[[Döneticileri güncelle, gerçek cihazlarda test edin ve her zaman kullanıcı verilerini güvenlik ilk önce koyun.