React Native FB Login — это полностью совместимый с IOS и Android компонент без использования Facebook Native/Web SDK, что позволяет интегрировать Facebook Login в приложения React Native, а также поддерживает такие ответы, как username, которые устарели в Facebook. Чтобы использовать этот компонент, разработчикам не нужно устанавливать какие-либо собственные пакеты SDK, а также не нужно импортировать или связывать какие-либо пакеты SDK в IOS и Android с Facebook. Этот компонент полностью совместим и протестирован со всеми версиями React Native, в нем больше нет ошибок, как в других компонентах, и он очень прост в использовании.
Мы используем прямой API Facebook Graph, чтобы предотвратить импорт/связывание шагов Native SDK из Facebook.
🚨Обновление: готова свежая версия 1.0.5 с множеством новых функций 📹 https://bit.ly/33HxQ2J, пожалуйста, обновите сейчас, если вы еще не сделали это через npm or yarn
Предварительная версия iOS/Android
Настроить приложение для входа через Facebook
Вам нужно будет создать Приложение для входа в Facebook для использования с этим компонентом и + добавить Нажмите, чтобы увидеть ссылку в вашем URL-адресе перенаправления. Настройки приложения для входа в Facebook в поле ввода Valid OAuth Redirect URIs, эта ссылка требуется в приложении для входа в Facebook, поскольку она получит использовать, когда перенаправление произойдет, когда пользователь войдет в систему из вашего приложения, также вы можете управлять этим URL-адресом перенаправления из этого компонента в качестве реквизита redirectUrl='YOUR_REDIRECT_URL' для сценариев на стороне сервера, таких как PHP, JSP, nodeJSдля хранения информации о пользователе, например token,first_name,last_name, когда пользователь войдет в систему, но это по желанию. Если вы уже создали приложение для входа в Facebook, вы можете пропустить все шаги, кроме добавления URL-адреса перенаправления в настройках приложения для входа в Facebook в поле ввода Valid OAuth Redirect URIs. Когда все будет готово, вам просто нужно получить clientId и secretKey из приложения для входа в Facebook, этому компоненту понадобятся эти реквизиты позже.
Примечание. Когда вы создаете новый Facebook Login App, по умолчанию для режима приложения всегда установлено значение development, и этот компонент отлично работает с ним, но когда вы будете готовы загрузить свое приложение React Native в магазины приложений, не забудьте отправить свое Facebook Login App на проверку, чтобы изменить его статус. из режима development в режим public.
Установка
установите пакет react-native-fblogin в свой проект или клонируйте проект Пример:
yarn add @fadidev/react-native-fblogin
Или, если используется npm:
npm install @fadidev/react-native-fblogin
использование
логин с разрешениями()
В этом репозитории представлены доступные реквизиты:
Это должно вызываться при нажатии кнопки Login в вашем приложении React Native.
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { loginInWithPermissions } from '@fadidev/react-native-fblogin'
export default class App extends Component {
state = {
login: false
}
/*
runNow: default is TRUE you can skip this prop, (optional)
redirectUrl: default is https://facebook.com/connect/login_success.html, you can skip or replace with your URL, (optional)
getMyInformationsFields: default is id,first_name,last_name,name,email,picture you can skip it or add more, (optional)
clientId: default is null and its required
secretKey: default is null and its required
onLoginSuccess: default returns console.log({...data})
when login success
onLoginFailure: default returns console.log({...error})
when something fails
*/
loginIn = () => {
const { login } = this.state
if (login) {
return loginInWithPermissions({
runNow: true,
redirectUrl: 'https://facebook.com/connect/login_success.html',
getMyInformationsFields:['id,first_name,last_name,name,email,picture'],
clientId: 'REPLACE_WITH_YOUR_APP_ID',
secretKey: 'REPLACE_WITH_YOUR_SECRET_KEY',
onLoginSuccess: data => console.log(data),
onLoginFailure: error => console.log(error)
})
}
}
render() {
const { loginIn } = this
return (
<View style={{
flex: 1,
justifyContent: 'space-evenly',
width: '50%',
alignSelf: 'center',
marginVertical: '10%'}}>
<Button onPress={() => this.setState({ login: true })} title='Login'/>
{loginIn()} // mounting the component when button clicked
</View>
)
}
}
Ответ:
{
access_token: string,
email: string,
expires_in: integer,
first_name: string,
id: string,
isLoggedIn: boolean,
last_name: string,
name: string,
picture: {
data: {
height: integer,
is_silhouette: boolean,
url: string,
width: integer
}
},
token_type: string
}
⚡ получить имя пользователя ()
Это даст вам username, когда пользователь войдет в систему, и это deprecated by Facebook long back, но здесь оно доступно, может получить доступ к любому компоненту
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { getUsername } from '@fadidev/react-native-fblogin'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'space-evenly',
width: '50%',
alignSelf: 'center',
marginVertical: '10%'}}>
<Button
onPress={() => {
getUsername()
.then(username => console.log(username))
.catch(error => console.log(error))
}}
title='getUsername'
/>
</View>
)
}
}
Ответ:
{
username: string
}
получитьтокен доступа()
Это даст вам user_token, когда пользователь войдет в систему, сможет получить доступ к любому компоненту
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { getAccessToken } from '@fadidev/react-native-fblogin'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'space-evenly',
width: '50%',
alignSelf: 'center',
marginVertical: '10%'}}>
<Button onPress={() => alert(JSON.stringify(getAccessToken()))} title='getAccessToken'/>
</View>
)
}
}
Ответ:
{ accessToken: string, expiresIn: string, status: boolean }
получитьмоюинформацию()
Это даст вам first_name,last_name,id,picture подобных деталей, к которым можно получить доступ в любом компоненте
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { getMyInformations } from '@fadidev/react-native-fblogin'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'space-evenly',
width: '50%',
alignSelf: 'center',
marginVertical: '10%'}}>
<Button onPress={() => alert(JSON.stringify(getMyInformations()))} title='getMyInformations'/>
</View>
)
}
}
Ответ:
{
id: double,
first_name: string,
last_name: string,
name: string,
email: string,
picture: object,
token_type: string
}
выйти()
Этого достаточно для сброса пользовательских данных в вашем приложении, доступ к которому возможен из любого компонента.
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { logout } from '@fadidev/react-native-fblogin'
export default class App extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'space-evenly',
width: '50%',
alignSelf: 'center',
marginVertical: '10%'}}>
<Button onPress={() => alert(JSON.stringify(logout()))} title='logout'/>
</View>
)
}
}
Ответ:
{ message: string, status: boolean }
Содействие
Просто отправьте запрос на вытягивание!
Авторское право и лицензия
Авторские права на код и документацию принадлежат @FadiDev, 2019 г. Код выпущен под лицензией MIT.
