جستجو برای:
سبد خرید 0
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
perm_identity
سبد خرید 0
  • درباره ما
  • تماس با ما
0
آموزش های کاربردی جاوا اسکریپت
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
ورود و ثبت نام

وبلاگ

آموزش های کاربردی جاوا اسکریپت > بلاگ > آموزش متنی > ورود با فیسبوک در React Native

ورود با فیسبوک در React Native

ورود با فیسبوک در هزاران اپلیکیشن Android و IOS مورد استفاده قرار میگیره و یک روش پیاده سازی ساده برای ورود هست.فیسبوک بیش از 2.73 میلیارد کاربر در سراسر جهان در حال حاضر داره.در react native با استفاده از ورود با فیسبوک ما یک روش ساده برای ورود کاربر به اپلیکیشن بدون نیاز به ثبت نام فراهم می کنیم.این عملکرد برای همه ایمن است و نیازی به نگرانی در مورد امنیت نام کاربری و رمز عبور وجود ندارد.فیسبوک SDK خودش رو دراختیار ما قرار داده که برای استفاده خیلی باحاله.

1.ابتدا دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه react-native-fbsdk اجرا کنید

1
npm install react-native-fbsdk --save

2.مرحله بعدی link کردن کتابخانه به پروژه با استفاده از دستور زیر است.این دستور باعث می شود تا پروژه شما کاملا refresh شود و تمامی فایل های مورد نیاز تغییر پیدا کنند.

1
react-native link react-native-fbsdk

3.بعد از لینک کردن کتابخانه مطمئن شوید که تمامی تغییرات مورد نیاز اعمال شده است.بنابراین فایل build.gradle رو در مسیر Your_React_Native_Project -> android -> app  با یک ویرایشگر کد باز کنید و کدهای زیر رو به اون اضافه کنید

1
2
implementation project(':react-native-fbsdk')
implementation 'com.facebook.android:facebook-android-sdk:4.34.0'

Source code فایل build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
apply plugin: "com.android.application"
import com.android.build.OutputFile
project.ext.react = [
    entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    defaultConfig {
        applicationId "com.project3"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}
dependencies {
    implementation project(':react-native-fbsdk')
    implementation 'com.facebook.android:facebook-android-sdk:4.34.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

4.فایل settings.gradle رو در مسیر Your_React_Native_Project -> android با یک ویرایشگر کد اضافه کنید و کد های زیر رو به اون اضافه کنید

1
2
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

5.فایل MainApplication.java رو در مسیر Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project با یک ویرایشگر کد باز کنید و کد های زیر را اضافه کنید.

1
2
3
4
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.appevents.AppEventsLogger;

6.در کلاس MainApplication یک متغیر instance از نوع CallbackManager اضافه کنید.

1
2
3
4
private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
     protected static CallbackManager getCallbackManager() {
     return mCallbackManager;
     }

7.بعد از ایمپورت کردن پکیج های بالا ما نیاز داریم تا FBSDKPackage(mCallbackManager) رو در ()getPackages فراخوانی کنیم.

1
new FBSDKPackage(mCallbackManager)

source code کامل فایل MainApplication.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
package com.project3;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.appevents.AppEventsLogger;
public class MainApplication extends Application implements ReactApplication {
private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
     protected static CallbackManager getCallbackManager() {
     return mCallbackManager;
     }
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    }
    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

8.فایل MainActivity.java رو در مسیر Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project با یک ویرایشگر کد باز کنید و intent  رو در اون ایمپورت کنید.

1
import android.content.Intent;

9.حالا ما نیاز داریم ()onActivityResult رو برای امکان دریافت event ها بازنویسی کنیم.

1
2
3
4
5
@Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }

source code کامل فایل MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.project3;
import com.facebook.react.ReactActivity;
import android.content.Intent;
public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "project3";
    }
@Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
}

پروژه شما الان آماده استفاده است.حالا باید پروژه خودمون رو در کنسول فیسبوک register کنیم.

10.وب سایت Facebook Console رو در مرورگر باز کنید.

11.با Facebook ID خودتون login کنید.

12.بر روی دکمه Add a new App کلیک کنید.

ورود با فیسبوک در react native

13.در مرحله بعدی نیاز داریم نام اپلیکیشن که به کاربر نمایش داده می شود و ایمیل خودمون رو وارد کنیم.

14.حالا در منو Facebook Login بر روی دکمه Setup کلیک می کنیم.

ورود با فیسبوک در react native

15.پلتفرم را android انتخاب کنید.

ورود با فیسبوک در اپلیکیشن های react native

16.در اینجا نیازی به دانلود sdk فیسبوک ندارید پس بر روی Next  کلیک کنید.

ورود با فیسبوک در react native

17.در صفحه Import the Facebook SDK شما نیاز به انجام کار خاصی ندارید پس بر روی دکمه Next کلیک کنید.

ورود با فیسبوک در react native

18.در پنجره Tell us about your android project ما نیاز داریم که Package name و نام default activity class  رو قرار بدهیم.شما میتوانید package name رو در فایل Android Manifest پیدا کنید.

ورود با فیسبوک در react native

19.حالا زمانی که بر روی دکمه SAVE کلیک می کنید،مجددا پرسیده می شود که شما قصد دارید از همین package name   استفاده کنید که با دکمه this package name این عملیات رو تایید می کنید.

ورود با فیسبوک در react native

20.مرحله بعدی وارد کردن key hashes است.شما می توانید آموزش متنی قبلی یعنی گرفتن key hash code در ویندوز رو بخونید.بعد از generate کردن Key hash code و وارد کردن کد بر روی دکمه Save کلیک کنید.

ورود با فیسبوک در react native

21.مرحله بعدی فعال کردن Single sign در اپلیکیشن است.

ورود با فیسبوک در react native

22.تا اینجا ما تمامی تنظیمات مربوط به کنسول فیسبوک رو به صورت کامل انجام دادیم.حالا ما نیاز داریم Facebook App ID  رو در پروژه react native خودمون قرار بدیم.در پنجره کنسول فیسبوک شما می توانید Facebook App ID رو پیدا و کپی کنید.

ورود با فیسبوک در react native

23. فایل Your_React_Native_Project -> android -> app -> src -> main -> res -> values -> strings.xml را باز کنید و یک string named با عنوان facebook_app_id  ایجاد کنید و Facebook App Id کپی شده رو اونجا قرار بدید.

Source code فایل strings.xml

1
2
3
4
<resources>
    <string name="app_name">project3</string>
    <string name="facebook_app_id">Put your Facebook APP ID Here</string>
</resources>

24.فایل Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml  را باز کنید.ما نیاز داریم یک meta data جدید با Facebook app id که در مرحله قبل اضافه کردیم،ایجاد کنیم.کد زیر را در بلاک application قرار دهید.

1
2
<meta-data android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/facebook_app_id"/>

Source code فایل AndroidManifest.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.project3">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
  
   <meta-data android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/facebook_app_id"/>
  
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

با انجام تمامی مراحل فوق ما تنظیمات مربوط به پروژه رو انجام دادیم و پروژه ما آماده کدنویسی است.

25.فایل App.js را باز کنید و کامپوننت های View, StyleSheet, Text, Alert و Image رو ایمپورت کنید.

1
2
3
import React, { Component } from 'react';
import { View, StyleSheet, Text, Alert, Image } from 'react-native';

26.کامپوننت های LoginButton, AccessToken, GraphRequest و GraphRequestManager  از کتابخانه react-native-fbsdk ایمپورت کنید.

1
import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';

27. در کلاس اصلی ()constructor رو تعریف کنید.درون سازنده 3state به نام های ser_name, avatar_url و avatar_show تعریف کنید.

1
2
3
4
5
6
7
8
9
constructor() {
    super();
    this.state = {
      user_name: '',
      avatar_url: '',
      avatar_show: false
    }
  }

28.تعریف یک تابع به نام ()get_Response_Info با دو پارامتر error و result .در این تابع ما مقادیر دریافتی را در state ها ذخیره می کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
get_Response_Info = (error, result) => {
    if (error) {
      Alert.alert('Error fetching data: ' + error.toString());
    } else {
      this.setState({ user_name: 'Welcome' + ' ' + result.name });
      this.setState({ avatar_url: result.picture.data.url });
      this.setState({ avatar_show: true })
      console.log(result);
    }
  }

29.ایجاد یک تابع به نام ()onLogout و قرار دادن تمامی مقادیر state ها با null.این تابع زمانی که کابر قصد خروج را داشته باشد فراخوانی می شود.

1
2
3
4
5
onLogout = () => {
    this.setState({ user_name: null, avatar_url: null, avatar_show: false });
  }

30.اضافه کردن کامپوننت های Image, Text و Facebook Login button  در بلاک render’s return.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
render() {
    return (
      <View style={styles.container}>
        {this.state.avatar_url ?
          <Image
            source={{ uri: this.state.avatar_url }}
            style={styles.imageStyle} /> : null}
        <Text style={styles.text}> {this.state.user_name} </Text>
        <LoginButton
          readPermissions={['public_profile']}
          onLoginFinished={(error, result) => {
            if (error) {
              console.log(error.message);
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
                const processRequest = new GraphRequest(
                  '/me?fields=name,picture.type(large)',
                  null,
                  this.get_Response_Info
                );
                // Start the graph request.
                new GraphRequestManager().addRequest(processRequest).start();
              });
            }
          }}
          onLogoutFinished={this.onLogout}
        />
      </View>
    );
  }

31.ایجاد استایل سفارشی

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: '#000',
    textAlign: 'center',
    padding: 20
  },
  imageStyle: {
    width: 200,
    height: 300,
    resizeMode: 'contain'
  }
});

32.کد کامل برنامه در فایل App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { Component } from 'react';
import { View, StyleSheet, Text, Alert, Image } from 'react-native';
import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      user_name: '',
      avatar_url: '',
      avatar_show: false
    }
  }
  get_Response_Info = (error, result) => {
    if (error) {
      Alert.alert('Error fetching data: ' + error.toString());
    } else {
      this.setState({ user_name: 'Welcome' + ' ' + result.name });
      this.setState({ avatar_url: result.picture.data.url });
      this.setState({ avatar_show: true })
      console.log(result);
    }
  }
  onLogout = () => {
    this.setState({ user_name: null, avatar_url: null, avatar_show: false });
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.avatar_url ?
          <Image
            source={{ uri: this.state.avatar_url }}
            style={styles.imageStyle} /> : null}
        <Text style={styles.text}> {this.state.user_name} </Text>
        <LoginButton
          readPermissions={['public_profile']}
          onLoginFinished={(error, result) => {
            if (error) {
              console.log(error.message);
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
                const processRequest = new GraphRequest(
                  '/me?fields=name,picture.type(large)',
                  null,
                  this.get_Response_Info
                );
                // Start the graph request.
                new GraphRequestManager().addRequest(processRequest).start();
              });
            }
          }}
          onLogoutFinished={this.onLogout}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: '#000',
    textAlign: 'center',
    padding: 20
  },
  imageStyle: {
    width: 200,
    height: 300,
    resizeMode: 'contain'
  }
});

اسکرین شات:

 

 

 

 

اشتراک گذاری:
برچسب ها: آموزش react nativeآموزش فارسی react native
مطالب زیر را حتما بخوانید
  • آموزش react native
    رمزگذاری و رمزگشایی password در react native

    91 بازدید

  • پیاده سازی reacaptcha در react native
    پیاده سازی reCaptcha در react native

    115 بازدید

  • اموزش فارسی react native
    کتابخانه react-native-draggable-flatlist

    247 بازدید

  • ساخت منوی دایره ای (circular-action-menu)

    349 بازدید

  • آموزش react native
    Style در react native

    251 بازدید

جدید تر ایجاد Release key hash در ویندوز برای ورود با فیسبوک در react native
قدیمی تر آشنایی با Type Script و نحوه نصب آن

پاسخی بگذارید لغو پاسخ

جستجو
جستجو برای:
دسته‌ها
  • Material UI
  • NodeJS
  • React
  • React Native
  • Vue Js
  • آموزش متنی
  • استارت آپ و آموزش
  • برنامه نویسی
  • جاوااسکریپت
  • گپ و گفت
reactapp-logo
  • phone_android
    09150274110
  • email
    contact@reactapp.ir
  • بلاگ
  • تله فیلم آموزشی
  • قوانین
  • سوالات متداول
  • آموزش متنی
کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.
keyboard_arrow_up
کاربران عزیز وب سایت reactapp، اختلالاتی در دانلود دوره ها به دلیل بروزرسانی سایت به وجود آمده است. ضمن پوزش از مشکل به وجود آمده از صبر و شکیبایی شما سپاسگذاریم.