Cara koding aplikasi login facebook di react native

Facebook Login untuk React Native

Panduan ini memberikan contoh untuk menggunakan komponen Tombol Masuk dan Login Pengguna dalam aplikasi React Native Anda.

Untuk membaca lebih lanjut tentang fitur yang tersedia dengan login Facebook, lihat Facebook Login for Apps.

Tombol masuk
Cara termudah untuk menambahkan fungsi login Facebook ke aplikasi Anda adalah dengan menggunakan LoginButton objek dari SDK. Bila menggunakan, semua kerumitan membuat antarmuka pengguna masuk akan ditangani untuk Anda. Anda menentukan izin yang dibutuhkan aplikasi Anda dan objek tersebut memberi tahu Anda tentang tindakan pengguna melalui fungsi atribut-terikat.

Untuk mempelajari lebih lanjut tentang perizinan, lihat Permissions Overview.

Kelas LoginButton dimuat dari modul react-native-fbsdk. Gunakan kode berikut untuk membuat custom login untuk aplikasi Anda.

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
} = FBSDK;
      
var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + result.error);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}/>
      </View>
    );
  }
});

Untuk mengubah izin penerbitan, ubah atribut publishPermissions dari tag LoginButton. Untuk daftar izin yang tersedia, lihat Referensi Perizinan.

Saat login selesai, fungsi yang Anda berikan untuk atribut onLoginFinished dijalankan. Seperti yang dapat Anda lihat dari contoh, kondisi kesalahan dilewatkan pada parameter pertama, dan hasilnya kedua. Status kesalahan nol tidak menunjukkan login yang berhasil. Ketika sebuah login telah selesai dengan sukses, artinya pengguna memiliki akun Facebook dan memberi wewenang pada aplikasi Anda untuk mengaksesnya, maka hak akses yang diberikan aplikasi tersebut akan terpapar melalui properti yang diberikanPermissions.

Setelah login yang berhasil, tampilan teks tombol login berubah menjadi "Log out" untuk menunjukkan bahwa mengkliknya akan memutuskan aplikasi Anda dari akun Facebook mereka.

Untuk menambahkan kelas Login ke tampilan yang diberikan, tambahkan tag Login ke fungsi render Anda.

class MyApplication extends Component {
  render() {
    return (
      <View>
        <Text>Welcome to the Facebook SDK for React Native!</Text>
        <Login />
      </View>
    );
  }
}

Manajer Login
Kelas LoginManager digunakan untuk meminta izin tambahan untuk sesi atau untuk menyediakan fungsionalitas login menggunakan UI khusus. Seperti LoginButton, kelas LoginManager dimuat dari modul react-native-fbsdk. Contoh di bawah melakukan login dengan izin minimal.

const FBSDK = require('react-native-fbsdk');
const {
  LoginManager,
} = FBSDK;
    
// ...

// Attempt a login using the Facebook login dialog,
// asking for default permissions.
LoginManager.logInWithReadPermissions(['public_profile']).then(
  function(result) {
    if (result.isCancelled) {
      alert('Login was cancelled');
    } else {
      alert('Login was successful with permissions: '
        + result.grantedPermissions.toString());
    }
  },
  function(error) {
    alert('Login failed with error: ' + error);
  }
);