ورود با فیسبوک در 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 کلیک کنید.
13.در مرحله بعدی نیاز داریم نام اپلیکیشن که به کاربر نمایش داده می شود و ایمیل خودمون رو وارد کنیم.
14.حالا در منو Facebook Login بر روی دکمه Setup کلیک می کنیم.
15.پلتفرم را android انتخاب کنید.
16.در اینجا نیازی به دانلود sdk فیسبوک ندارید پس بر روی Next کلیک کنید.
17.در صفحه Import the Facebook SDK شما نیاز به انجام کار خاصی ندارید پس بر روی دکمه Next کلیک کنید.
18.در پنجره Tell us about your android project ما نیاز داریم که Package name و نام default activity class رو قرار بدهیم.شما میتوانید package name رو در فایل Android Manifest پیدا کنید.
19.حالا زمانی که بر روی دکمه SAVE کلیک می کنید،مجددا پرسیده می شود که شما قصد دارید از همین package name استفاده کنید که با دکمه this package name این عملیات رو تایید می کنید.
20.مرحله بعدی وارد کردن key hashes است.شما می توانید آموزش متنی قبلی یعنی گرفتن key hash code در ویندوز رو بخونید.بعد از generate کردن Key hash code و وارد کردن کد بر روی دکمه Save کلیک کنید.
21.مرحله بعدی فعال کردن Single sign در اپلیکیشن است.
22.تا اینجا ما تمامی تنظیمات مربوط به کنسول فیسبوک رو به صورت کامل انجام دادیم.حالا ما نیاز داریم Facebook App ID رو در پروژه react native خودمون قرار بدیم.در پنجره کنسول فیسبوک شما می توانید Facebook App ID رو پیدا و کپی کنید.
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' } }); |
اسکرین شات:
پاسخی بگذارید