ทำ Facebook Login สำหรับ React Native ง่ายๆ ด้วย Expo SDK

ทำ Facebook Login สำหรับ React Native ง่ายๆ ด้วย Expo SDK
18/04/19   |   4.1k   |  

ในปัจจุบัน React Native ได้รับความนิยมการนำมาใช้พัฒนาแอพเพราะเราสามารถเขียนโค้ดแค่ภาษาเดียวก็จะได้แอพทั้ง iOS และ Android และที่ทำให้ React Native พัฒนาง่ายขึ้นมาอีกขั้นก็คือ Expo ครับ และในบทความนี้เราจะมาพูดถึง SDK ของ Expo ตัวหนึ่งนั่นก็คือ Facebook Login ครับ ซึ่งแอพส่วนมากนิยมนำ Facebook มาเป็นทางเลือกในการเข้าสู่ระบบ ซึ่งหากใช้แพ็คเกจ Facebook SDK นั้นค่อนข้างยุ่งยากครับ แต่เจ้า Expo นั้นมีให้เราใช้งานได้ง่ายๆ เลย มาลองทำกันดูดีกว่าครับ

สร้างแอพด้วย Expo

ก่อนอื่นต้องสร้างแอพด้วย Expo ครับ เพราะว่าจะได้ Folder ที่มี Config ของ Expo มาด้วย

expo init myApp

ตั้งค่าสำหรับ Android และ iOS

เมื่อสร้างโปรเจคแล้วเราต้องกำหนด bundleIdentifier สำหรับ iOS และกำหนด package สำหรับ Android ครับ โดยเข้าไปเพิ่มในไฟล์ app.json ดังนี้เลย

{
  "expo": {
    "name": "Facebook Login",
    "slug": "myApp",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.test.myapp"
    },
    "android": {
      "package": "com.test.myapp"
    }
  }
}

สังเกตุตรง iOS และ Android จะมีโค้ด bundleIdentifier และ package เพิ่มมาครับ

ฺทำการ Build Android

เมื่อเพิ่ม Config แล้วให้ทำการ Build แอพ สำหรับ Android คำสั่งดังนี้

expo build:android

รอสักครู่ครับ Expo จะทำการ Build Android ใหม่และอัพขึ้น Server ครับ

เมื่อได้แล้วก็ลองพิมพ์ดามนี้

expo fetch:android:hashes

จะได้ Key ที่เรา Build มา ซึ่งที่เราต้องการใช้ก็คือ Facebook Key Hash เพราะเราจะต้องนำไป Register กับแอพใน Facebook ครับ


ทำการ Build iOS

เมื่อ Build Android แล้วก็ต้อง Build iOS ด้วยครับให้พิมพ์ตามนี้เลยครับ

expo build:ios

สำหรับ iOS เราจะต้องกรอก apple id ให้ทำการกรอก apple id ของเราเลยครับ

สร้างแอพใน Facebook

ก่อนที่เราจะมาทำฝั่ง React Native ให้เราเข้าไปสร้าง App ของเราใน Facebook ก่อนครับ เข้าไปที่ https://developers.facebook.com และทำการ Login ให้เรียบร้อย จากนั้นให้คลิกที่ "แอพของฉัน" -> "เพิ่มแอพใหม่"

จากนั้นกรอกข้อมูลให้ครบและกด "สร้าง ID ของแอพ"

สร้างแอพ Facebook

สร้างแอพ Facebook

เมื่อสร้างแล้วเราก็ต้องตั้งค่าแอพสำหรับ iOS และ Android ครับ โดยทำตามนี้เลยครับ

เข้าไปที่ ตั้งค่า -> ข้อมูลพื้นฐาน

ให้เพิ่มแพลตฟอร์ม iOS และ Android และกรอกข้อมูลตามนี้เลยครับ

ios

ในส่วนของ ตั้งค่าพื้นฐาน บังคับให้กรอก URL นโยบายความเป็นส่วนตัว ครับ ดังนั้นให้เรากรอก URL "example.com" ไปก่อนครับ เพื่อทำการเปิดใช้งานแอพครับ

จากนั้นให้คลิกเปิดแอพได้เลยครับ

เพียงเท่านี้เราก็ตั้งค่าฝั่งแอพของ Facebook เรียบร้อยแล้ว สังเกตุว่าจะมี ID ของแอพอยู่ ซึ่งเราจะนำไปใช้ในโค้ดของเราในฝั่ง React Native ครับ

ทดลองสร้าง Facebook Login ด้วย Expo

เราต้องติดตั้ง expo-facebook ก่อนครับ พิมพ์คำสั่งนี้เลยครับ

npm install --save expo-facebook หรือ yarn add expo-facebook

สร้างไฟล์ FacebookLogin.js สำหรับสร้าง Component ปุ่ม Login With Facebook ให้เพิ่มโค้ดดังนี้ครับ

import React, { Component } from 'react'
import { Button, Alert } from 'react-native'
import { Facebook } from 'expo'

class FacebookLogin extends Component {

  logIn = async () => {
    try {
      const {
        type,
        token,
      } = await Facebook.logInWithReadPermissionsAsync('<--Your Facebook AppID-->', {
        permissions: ['public_profile'],
      });
      if (type === 'success') {
        const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
        Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
      } else {
        Alert.alert('Something is wrong !');
      }
    } catch ({ message }) {
      Alert.alert(`Facebook Login Error: ${message}`);
    }
  }

  render() {
    return (
      
    )
  }
}

export default FacebookLogin

สังเกตโค้ดตรง <--Your Facebook AppID--> ให้เรานำ appID ของ Facebook ที่เราได้สร้างขึ้นมาก่อนหน้านี้มาใส่ครับ

ต่อมาให้เราแก้ไฟล์ app.js ครับ

โดยเราจะเพิ่ม FacebookLogin Component เข้าไปในโค้ด ให้พิมพ์ตามนี้เลยครับ

import React from 'react'
import { StyleSheet, View } from 'react-native'
import FacebookLogin from './FacebookLogin'

export default class App extends React.Component {
  render() {
    return (
      
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

เมื่อได้แล้วก็รันแอพได้เลยครับ

พิมพ์คำสั่ง

expo start

จากนั้นก็สั่งรัน iOS และ Android โล้ด...

จะได้ผลลัพธ์ดังนี้

หน้า Facebook Login

Login With Facebook

ดึงข้อมูลจาก Facebook

เย้...

เพียงเท่านี้แอพเราก็สามารถ Login ด้วย Facebook ได้แล้ว

ง่ายมากๆ เลยใช่มั้ยครับ ก็เพราะว่าการตั้งค่าครึ่งหนึ่งนั้นเจ้า Expo จัดการให้เราแล้ว จึงทำให้เราไม่ต้องตั้งค่าอะไรมากมาย ซึ่งทำให้เราทำ Login ด้วย Facebook สำหรับ React Native ได้ง่ายมากขึ้นครับ

tags : #react native #expo #expo sdk #facebook #facebook login



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email