כניסה חברתית ב React Native

כניסה במדיה החברתית – המאפשרת למשתמשים לאמת את פייסבוק הקיימת שלהם, גוגל, אפל או חשבונות טוויטר - הפכה לציפייה סטנדרטית ביישומים ניידים מודרניים.עבור מפתח Native React, שילוב ספקי אימות אלה יכול להפחית באופן דרמטי את החיכוך במהלך לוח הזמנים, להגדיל את שיעורי ההמרה ולשפר את שימור המשתמשים במקום לכפות על מנת ליצור עוד משתמש וסיסמה, כניסה חברתית פלטפורמות זהות ידועות, לעתים קרובות לספק נתונים נוספים כי הם מעשירים את חוויית המשתמש.

מדריך זה עובר אותך באמצעות יישום מלא של תכונות כניסה חברתיות ביישום React Native.We מכסה רישום פלטפורמה, בחירת חבילה, יישום קוד, טיפול אסימונים, ושיטות אבטחה הטובות ביותר - כל המותאמים לאפליקציות ברמת הייצור.

למה לא צריך כניסה חברתית?

לפני צלילה לתוך הקוד, כדאי להבין את היתרונות העיקריים כי כניסה חברתית מביאה את האפליקציה הניידת שלך:

  • (FLT:0) ,Faster Sign-up ו- Sign-inventFLT) 1 משתמשים יכולים לאמת עם ברז אחד, לחסל טפסים ארוכים לרישום.
  • (ב) ,0) שיעור המרה גבוה יותר (ב"ג) 1:1: זרם כניסה מפלט מקטין את הנטישה במהלך תהליך ההרשמה.
  • (FLT:0) גישה לנתונים של משתמשים אותנטיים.FLT:1 עם רשות משתמשים, אתה מקבל הודעת דואר אלקטרוני, שם ותמונה פרופיל, אשר יכול להתאים אישית את החוויה.
  • (FLT:0) שיפור האבטחה.FLT:1 Authentication מטופל על ידי ספקים אמינים אשר ליישם את OAuth 2.0 ו- OpenID Connect, צמצום הסיכון לשימוש חוזר סיסמה או אישורים חלשים.
  • (FLT:0Cross-platform עקביות.BuildFLT:1) משתמשים שכבר משתמשים בחשבונות חברתיים מצפים לאותה חוויה חסרת חיכוך הן ב- iOS והן באנדרואיד.

Prerequisites

כדי לעקוב אחר המדריך הזה, אתה צריך:

  • סביבת פיתוח Native React (גם iOS ו- Android).
  • חשבונות מפתחים בפלטפורמות החברתיות שאתה מתכנן לשלב (פייסבוק, Google, Apple, Twitter).
  • ידע (ב) או (ב) ו-"התגובה" (בלטינית: ⁇ ⁇ ).
  • הבנה בסיסית של זרימת OAuth 2.0.

שלב 1: לרשום את האפליקציה שלך על כל פלטפורמה חברתית

כל ספק דורש ממך לרשום את היישום שלך ולקבל אישורים ייחודיים - בדרך כלל מזהה App או מזהה הלקוח.צעד זה חיוני כי זרימת האימות מסתמכת על המזהים האלה כדי לאמת את האפליקציה שלך.

Facebook כניסה

  1. (ב) ל"החלל" (בתרגום חופשי:0) ו"המפתחים של פייסבוק" (בתרגום חופשי:0) ו"היוצרים" (בתרגום חופשי: ).
  2. בחרו "Consumer" או "עסקים" סוג אפליקציה המתאים.
  3. "התקדשות וגביע" (שמות כ"ד, ט"ז): "הראו את ה' אלקיכם" (בראשית כ"ד, ט"ז)
  4. הוסף את ה- iOS ו- Android פלטפורמות. עבור iOS, לספק את המזהה החבילה שלך; עבור Android, שם החבילה שלך ואת הישבן של מפתח הפיתוח שלך.
  5. ניתן לתוכנת "הכנסה של פייסבוק" ולהגדיר את ה-URIs של הפניית ה-OAuth.

Google Sign-In

  1. ביקור ב-[[1924]] ו[[1924]], [[1924]], [[1924]]]] ו[[1924]]
  2. ניתן ל-Google Sign-in" API תחת "APIs & שירותים >"; ספריית "Google Sign-In"
  3. עבור "Credentials" וליצור מזהה לקוח OAuth 2.0 עבור סוג היישום שלך (iOS או Android) עבור iOS, הזן מזהה החבילה שלך ואת מזהה App Store (אם רלוונטי) עבור Android, הזן את שם החבילה שלך ו- SHA-1 חתימה טביעת אצבע.
  4. (ב) , עיין ב[[1924]] ו[[1924]] ו[[1924]]

Apple Sign-In (iOS בלבד)

  1. תוכנית פיתוח:0 (הראשונה ל-Apple Developer Program)
  2. בפורטל Apple Developer, לרשום את מזהה האפליקציה שלך ולאפשר את היכולת "להתראות עם Apple"
  3. (אם אתה צריך לאמת את האנדרואיד או את האינטרנט) ולקבל תעודת זהות שירות (FLT:0) ,5 ,5 ).
  4. עבור iOS, אתה רק צריך להוסיף את היכולת ב Xcode - המערכת תטפל בשאר.

Twitter (X) כניסה

  1. ניווט ל-FLT:0) פלטפורמת ה-Twitter Developer PlatformFLT:1 ותיצור פרויקט חדש.
  2. (ב) "הבא" (ב) "וַיָּעָשֶׂה לְךָ" (בראשית כ"ד, כ"ד).
  3. ניתן "OAuth 1.0a" או "OAuth 2.0" (הופנה מהדף צורכיך; OAuth 1.0a הוא נפוץ יותר עבור כניסה בטוויטר).
  4. הגדר את כתובת ה-URL של תוכנית אישית שאפליקציית React Native יכולה לטפל בה, למשל, .

שלב 2: התקנת החבילות הדרושות

בהתאם אם אתה משתמש ב-Samsung או ב-Expo, החבילות שונות. להלן הן הספריות הנפוצות ביותר עבור כל ספק.

פייסבוק

(ב) ל-iOS: (ב-FLT 3: 3) ו-(ב) ל-iOS. for Expo: השתמש בפיתוח עם מודול FLT:5.

Google Google

עבור תגובה חשוף: (FLT:6 עבור חשיפה: להשתמש ב-FLT 7) או זרימה חשוף עם אותה החבילה.

Apple Apple Apple Apple Apple

עבור React Native: (FLT:8 חבילה זו עובדת על iOS בלבד; על אנדרואיד אתה צריך להשתמש בגישה מבוססת אינטרנט. עבור אקספו, להשתמש ב-FLT:9.

Twitter (X)

בחירה פופולרית היא (הראשונה ל-FLT:10), לאחר ההתקנה, לרוץ (FLT:11), עליך להוסיף את מפתח הצרכנים ואת הסוד לקובץ שלך (FLT:12 ו-FLT:13).

שלב 3: הגדרות של פלטפורמה-Specific Settings

iOS Configuration

  • פתח (FLT:14) ולהוסיף את FLT:0CFBundleURLT 1 עבור כל ספק (למשל, את ה-p: עבור טוויטר, fb {APP ID}> עבור Facebook, וכו '.
  • עבור Google Sign-In, הוסף את ה-FLT:0 ,Läent CLIENT IDigital 1 (הנמצא ב-FLT:15) כתוכנית כתובת URL.
  • עבור Apple Sign-In, לאפשר את היכולת "Sign In with Apple" ב- Xcode תחת "Signing &" של המטרה שלך, Capabilities.
  • (ב) רוץ (FLT:16) כדי לקשר בין תלות ילידית.

אנדרואיד Configuration

  • (ב) ב[[1924]], [[1924]]]], [[1924]]]]
  • [22: 22]
  • עבור Google, במקום קובץ ה-FLT:23 (הורד מ- Firebase Console) ל-FLT:24.
  • (ב) לטוויטר, להוסיף את ה-FLT:0 (TWITTER CONSUMER KEYFIR KEYFIR) ו-FLT:2TWITTER conSUMER SECRETIRLT 3 ב-FLT:25 כ- meta-data.
  • (ה) , (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

שלב 4: יישום זרם הכניסה

עכשיו אנחנו כותבים את קוד הליבה של React Native, הדוגמאות להלן מציגות יישום טיפוסי עבור כל ספק.כל הדוגמאות מניחות שכבר הגדרתם כראוי את הצדדים הילידים.

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;

Google Sign-In-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;

Apple Sign-In-i-

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) כניסה לדוגמה

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;

שלב 5: יד וחנות Tokens Securely

לאחר כניסה מוצלחת, אתה מקבל כרטיס אשראי:0 גישה ל-StueFLT 1 (ולפעמים אסימונים רענון או תעודת זהות) אסימוניים אלה רגישים - לטפל בהם כמו סיסמאות.לעולם אל לאחסן אותם בטקסט רגיל או ב AsyncStorage, אשר אינו ידוע.

  • (ב) (ב) ויקרא י"א): "ה' (ב)" (ב)"ב)" (ב"ד) ו"ה')" (ב) ו"ה') ו"ה' (ב"ב)"ב"ה' (ב"ה)"ה')"ב"ה')"ה' (ה')"ב')"ה')"ה')"ה')"ה')"ה' (ה')"ב')"ה')"ה')"ה')"ה')"ה'"ה', ו"ה'"ה' (ה', כ"ה')"ב')"ב')"ה')"ב' (ה')"ב')"ב')"ב' (ה')"ב')"ה')"ה')"ה')"ה')
  • (ב) ,0) ל-Expo:veFLT:1 (FLT:32) אשר מספק אחסון מוצפן על שתי הפלטפורמות.

דוגמה ל-FLT:33

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;

שלב 6: ניהול נוכחות משתמשים ו Logout

לאחר שהסימון מאוחסן באופן מאובטח, תוכל לבדוק את תוקףו על השקת אפליקציה.אם הסימון קיים ואינו פגום, תוכל לדלג על מסך הכניסה. ליישם פונקציה של קידוד המנקה הן את האחסון מאובטח ואת המפגש 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 });
};

טעויות וצוק איתן

יישומים בעולם האמיתי חייבים להתמודד עם תרחישים כישלונות משותפים בחסד:

  • (ב) שגיאות:0Network: FigFLT:1) מציג הודעה ידידותית למשתמש ומאפשרת לחזר.
  • (ב) ,0 משתמשים מבטלים: 1:1 אל תעשה דבר, או היכנסו לאירוע מבלי להראות טעות.
  • (ב) ,0) שאלות: (ב) 1 (השרת של הספק) יכול להיות למטה; ליישם זמן ונפילה לספק אחר.
  • (ב) ⁇ ⁇ ⁇ :0) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) ⁇ :0) שינוי: אם המשתמש מבטל הרשאות לאחר מכן, האפליקציה שלך צריכה לטפל בכך על ידי דרישה להסכמה.

השתמש במרכיב ייעודי למניעת שגיאות המאגד שגיאות לשירות מרוחק (כמו Sentry) תוך שמירה על ממשק המשתמש מגיב.

אבטחה Best Practices

מעבר לאחסון מאובטח, שקול את אמצעי האבטחה האלה:

  • (ב) [15] כל התקשורת עם ממשקי API ספקיים והגב שלך צריכה להיות מוצפנת.
  • (ב) ויקרא יא"ד: "ה' אלקים" (ב) ב"ה' (ב)" (ב) "ב"ב)" (ב"ב)"ב)" (ב"ב)"ב"ה, "ה')" (ב"ב)"ב"ה', ו"ה'"ה'"ב')"ה'"ה'"ה'"ב'"ה'"ב'"ה'"ה'"ב'"ב'"ב'"ה', ו'"ה' (ב')"ב', ו')"ב', ו', ו' (ב')"ב')"ב')"ב')"ב')"ב' (ב')
  • (ב) [העיקרון]: [ה] אם אתה מבצע את זרימת OAuth ב- WebView, השתמש ב- PKCE כדי למנוע התקפות יירוט.
  • (ב) לא קשה קוד סודות: 10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.10.
  • (בקיצור:0) עדכון באופן קבוע של SDKs: FLT:1 ספריות משוחררות עשוי להכיל פרצות ידועות.
  • (FLT:0) להפיץ את היכולת לחשבונות חברתיים: ⁇ 1 משתמשים עשויים לרצות לנתק ספק חברתי.

בחירת בין מספר ספקים

רוב יישומי הייצור מציעים לפחות שלוש אפשרויות: אפל (הנדרשת עבור אפליקציות iOS המשתמשות בהודעות חברתיות אחרות), גוגל ופייסבוק. Twitter (X) היא פחות נפוצה אך חשובה עבור קהלים ספציפיים.חשבו על הדמוגרפיים של האפליקציה שלכם ועל הנתונים שאתם צריכים. להימנע ממשתמשים מכריעים עם יותר מדי כפתורים; מסך נקי עם שלושה או ארבעה ספקים ידועים עובד הכי טוב.

בדיקה חברתית

בדיקת זרימת OAuth ב React Native יכולה להיות מורכבת כי ספקים רבים דורשים מכשיר אמיתי או בניין שחרור חתום.כאן הם טיפים:

  • השתמש ב-FLT:0) Facebook Test Appeur AppofFLT 1 - ליצור משתמשים ב- Facebook Developer Console ולהשתמש בהם כדי לדמות כניסה.
  • עבור Google, השתמש ב-UFLT:0 (מבחן לקוח של OAuth CustomerveFLT:1) ב-Google Cloud Console עם אימייל למשתמשי מבחן.
  • עבור Apple, אתה יכול לבדוק על מכשיר אמיתי עם מזהה Apple Sandbox.
  • הפעל את האפליקציה שלך במצב שחרור (או באמצעות קידוד / IPA חתום) כי ספקים רבים מגבילים הפניות לחתומה.
  • כתוב בדיקות יחידה עבור פונקציות הכניסה שלך על ידי לעג ל- SDKs (למשל, עם Jest).

מסקנה

יישום מדיה חברתית יישום React Native הוא תכונה גבוהה-act כי משפר את חוויית המשתמש ואת האבטחה. על ידי רישום בקפידה את האפליקציה שלך על כל פלטפורמה, הגדרת קבצים ילידים, ושימוש בחבילות הנכונות, אתה יכול ליצור זרימת אימות חלקה.תמיד לטפל אסימונים כמידע רגיש, לאחסן אותם במכלים מוצפנים, ולהעריך אותם על גבי הגב שלך.עם הדוגמאות ושיטות הטובות ביותר מסופקות זה, אתה מוכן לשלב את Google, להגיב, ולאחר מכן, ל-Facebook, ולשלב את הטוויטר שלך.

לקריאה נוספת, להתייעץ עם ה-FLT הרשמי:0 [React Native NetworkeursFLT]:1 ו- The FLT:2 Facebook Enter DocumentsFLT 3: 3 [המידע על ה- SDKs מעודכנים, בדיקה על מכשירים אמיתיים, ותמיד לשים תחילה אבטחת מידע על משתמשים.