เป็นเรื่องที่ยอดเยี่ยมเสมอที่ได้เห็นว่าแอพยอดนิยมอย่าง Quora, Medium ใช้ Facebook ในการเข้าสู่ระบบอย่างไร และมันทำให้ฉันคิดว่าจะทำแบบเดียวกันได้หรือไม่ โชคดีที่ได้รับความช่วยเหลือจาก Facebook ก็สามารถทำได้ Facebook มี SDK (ชุดพัฒนาซอฟต์แวร์) ซึ่งช่วยเรารวมเข้ากับแอพของเรา ชื่อของ SDK ที่ระบุคือ react-native-fbsdk เป็นห้องสมุดที่ทรงพลังมากที่ช่วยให้เราได้รับรายละเอียดจาก Facebook และจัดการตามนั้นในแอพของเรา

ขั้นตอนต่อไปนี้ช่วยให้เรารวม Facebook เข้ากับแอพต่างๆ ได้อย่างง่ายดาย

  1. ดำเนินการคำสั่ง npm install react-native-fbsdk ภายในโฟลเดอร์โปรเจ็กต์โดยใช้ git bash ซึ่งจะติดตั้งไลบรารีลงในโปรเจ็กต์ของคุณ คุณสามารถตรวจสอบข้ามได้โดยค้นหาชื่อแพ็คเกจภายใน package.json
  2. ตอนนี้รวมขั้นตอนถัดไปภายใต้ android/app/src/main/res/values ​​/strings.xml

‹string name=”facebook_app_id”›รหัสแอป Facebook‹/string›

3. ตอนนี้รวมสิ่งต่อไปนี้ภายใต้ android/build.gradle

*โปรดทราบว่าจะมีไฟล์ build.gradle สองไฟล์ตรวจสอบเส้นทางด้านบนและรวมโค้ดด้านล่าง

mavenCentral()

โค้ดข้างต้นจะต้องรวมอยู่ใน

buildscript{
…
ที่เก็บข้อมูล {
…
mavenCentral()
}}

4. ตอนนี้รวมการพึ่งพาต่อไปนี้ภายใต้ android/app/build.gradle

การใช้งาน 'com.facebook.android:facebook-android-sdk:[5,6)'

โค้ดด้านบนควรรวมอยู่ใน การอ้างอิง

5. ตรวจสอบสิทธิ์ผู้ใช้ต่อไปนี้ภายใต้ android/app/src/AndroidManifest.xml

‹uses-permission android:name=”android.permission.INTERNET”/›

6. ตอนนี้รวมข้อมูลเมตาต่อไปนี้

‹ข้อมูลเมตา android:name=”com.facebook.sdk.ApplicationId” android:value=”@string/facebook_app_id”/›

ภายใต้ android/app/src/AndroidManifest.xml ภายใน AndroidManisfest ให้วางไว้ด้านล่าง ‹application>tag ดังตัวอย่างต่อไปนี้

‹application›
…
‹meta-data android:name=”com.facebook.sdk.ApplicationId” android:value=”@string/facebook_app_id”/›
….
‹/แอปพลิเคชัน›

7. สุดท้ายแทนที่โค้ดต่อไปนี้ภายใต้ App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          onLoginFinished={
            (error, result) => {
              if (error) {
                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())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => console.log("logout.")}/>
      </View>
    );
  }
};
  • ทุกอย่างได้รับการตั้งค่าจากฝั่งไคลเอ็นต์ ตอนนี้เราต้องเชื่อมต่อแอปของเรากับ Facebook

8. ไปที่ https://developers.facebook.com/ และเข้าสู่ระบบด้วยบัญชี Facebook ของคุณ หากมีอยู่ ให้สร้างบัญชี Facebook ใหม่

9. เมื่อคุณเข้าสู่ระบบแล้ว คุณจะพบแท็บแอปของฉันทางด้านขวามือ เลือกสร้างแอป ตั้งชื่อให้กับแอป

10. เมื่อสร้างแอปแล้ว คุณจะพบ APP ID ถัดจากแถบด้านข้าง คัดลอกหมายเลขและแทนที่ข้อความใต้ android/app/src/main/res/values ​​/strings.xml ด้านล่างนี้ ฉันแค่แทนที่ข้อความที่มีอยู่ด้วยตัวเลขจำลองแบบสุ่ม

‹ชื่อสตริง=”facebook_app_id”›1234567890‹/string›

11 ตอนนี้เลือก การตั้งค่า -> พื้นฐาน ใต้คอนโซลนักพัฒนาซอฟต์แวร์ของ Facebook และไปที่ด้านล่างของหน้าจอ คุณจะพบ เพิ่มแพลตฟอร์ม เลือกสิ่งนั้น ภายใต้นั้นให้เลือก Android .

12. ตอนนี้สิ่งที่เราต้องทำคือเชื่อมโยงแอพและ Facebook ด้วยคีย์ความปลอดภัย เปิด git bash ค้นหา git bash ไปยังโฟลเดอร์ที่มีโปรเจ็กต์และวางโค้ดต่อไปนี้

keytool -exportcert -นามแฝง androiddebugkey -keystore android/app/debug.keystore | openssl sha1 -ไบนารี | ฐาน openssl64

โดยพื้นฐานแล้วหมายความว่า เรากำลังบอกให้ gitbash สร้างไฟล์ debug.keystore ภายใต้ android/app/ ภายในซึ่งมีคีย์ความปลอดภัยที่สร้างในรูปแบบ openssl sha1 และ openssl base64

13. คัดลอกโค้ดที่สร้างขึ้น เปิดคอนโซลนักพัฒนาของ Facebook ไปที่การตั้งค่า -> พื้นฐาน -> แพลตฟอร์ม Android ที่สร้างขึ้นในขั้นตอนก่อนหน้า และวางในส่วนแฮชคีย์

  • โปรดทราบว่ารหัสจะเป็นตัวเลข 28 หลัก

นั่นคือการเชื่อมโยงแอพ Facebook และ React Native (Android) คุณสามารถใช้เพื่อวัตถุประสงค์ในการเข้าสู่ระบบ แต่หากคุณต้องการใช้ข้อมูลอื่น เช่น เพศ หมายเลขโทรศัพท์ Facebook จะต้องตรวจสอบแอพของคุณ จากนั้นมีเพียงคุณเท่านั้นที่จะได้รับรายละเอียดเหล่านั้น

ขอบคุณ หวังว่าขั้นตอนข้างต้นจะได้ผลตามที่อธิบายไว้ โปรดอย่าลังเลที่จะแสดงความคิดเห็นหากบทความมีการเปลี่ยนแปลงและปรบมือถ้าคุณชอบ