Tangituru.com - Login Account kit dengan react native. apa itu account kit ? account kit adalah sebuah layanan yang membantu Anda mendaftarkan aplikasi secara cepat dengan hanya menggunakan nomor telepon atau alamat email - tanpa memerlukan kata sandi. Ini merupakan cara yang andal, mudah digunakan dan memberi Anda pilihan tentang bagaimana mendaftarkan aplikasi.

Image of account kit

Instalasi

npm install --save react-native-facebook-account-kit  
react-native link react-native-facebook-account-kit  

Configurasi

IOS

  1. Pertama, menghubungkan Akun Kit SDK untuk proyek Anda mengikuti langkah-langkah.
    • Buka project anda dengan XCode
    • Buka dengan finder node_modules/react-native-facebook-account-kit/ios
    • Drag and drop AccountKit.framework dan AccountKitStrings.bundle
  2. Tambahkan kredensial Facebook Anda untuk proyek Anda pada file Info.plist
    <plist version="1.0">
      <dict>
        ...
        <key>FacebookAppID</key>
        <string>{your-app-id}</string>
        <key>AccountKitClientToken</key>
        <string>{your-account-kit-client-token}</string>
        <key>CFBundleURLTypes</key>
        <array>
          <dict>
            <key>CFBundleURLSchemes</key>
            <array>
              <string>ak{your-app-id}</string>
            </array>
          </dict>
        </array>
        ...
      </dict>
    </plist>

jika sudah sekarang jalanakan aplikasi anda dari XCode atau dengan react-native run-ios

Android

  • edit di file android/app/src/main/res/values/strings.xml
<string name="fb_app_id">YOUR_FACEBOOK_APP_ID</string>  
<string name="ak_client_token">YOUR_CLIENT_TOKEN</string>  
  • edit file android/app/src/main/AndroidManifest.xml
...
<application>

    ...
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/fb_app_id" />
    <meta-data
        android:name="com.facebook.accountkit.ApplicationName"
        android:value="@string/app_name" />
    <meta-data
        android:name="com.facebook.accountkit.ClientToken"
        android:value="@string/ak_client_token" />
</application>  
...

Cara Menggunakan

import RNAccountKit from 'react-native-facebook-account-kit'

// Tampilkan login akun dengan sms
RNAccountKit.loginWithPhone()  
  .then((token) => {
    if (!token) {
      console.log('Login cancelled')
    } else {
      console.log(`Logged with phone. Token: ${token}`)
    }
  })

Login Dengan Email

RNAccountKit.loginWithEmail()  
  .then((token) => {
    if (!token) {
      console.log('Login cancelled')
    } else {
      console.log(`Logged with email. Token: ${token}`)
    }
  })

Logout

RNAccountKit.logout()  
  .then(() => {
    console.log('Logged out')
  })

Ambil Token User TerLogin

RNAccountKit.getCurrentAccessToken()  
  .then((token) => {
    console.log(`Current access token: ${token}`)
  })

Ambil Info User Terlogin

RNAccountKit.getCurrentAccount()  
  .then((account) => {
    console.log(`Current account: ${account}`)
  })

Configurasi SDK

RNAccountKit.configure({  
  responseType: 'token'|'code' // 'token' by default,
  titleType: 'login',
  initialAuthState: '',
  facebookNotificationsEnabled: true|false, // true by default
  readPhoneStateEnabled: true|false, // true by default,
  receiveSMS: true|false, // true by default,
  countryWhitelist: ['AR'], // [] by default
  countryBlacklist: ['US'], // [] by default
  defaultCountry: 'AR',
  theme: {...} // for iOS only, see the Theme section
})

jika anda tidak ingin menggunakan konfigurasi SDK anda harus menggunakan code ini

RNAccountKit.configure({})  

sekian tutorial dari saya, bila ada kesalahan silahkan comment biar cepat saya perbaiki ,.. terimkasih :)