Я особо не считал, но похоже, что в каждом другом мобильном приложении, с которым я сталкиваюсь в настоящее время, есть функция входа в Facebook. В последнее время я много изучаю react-native и считаю его чертовски удивительным с точки зрения не такой уж крутой кривой обучения. Вместо того, чтобы писать традиционное «Учебное пособие Hello World для react-native», я решил написать руководство о том, как с нуля интегрировать Facebook Login в приложение для react native.
Давайте начнем с базовой, очень простой схемы / каркаса приложения, которое мы попытаемся создать:
В процессе этого, к концу этого поста, вы изучите следующие концепции:
- обработка навигации в приложении, поддерживающем реакцию
- как интегрировать сторонний плагин в приложение, поддерживающее реакцию (для реализации входа в facebook)
- выполнение вызова api графика (для получения информации из профиля facebook)
Я не буду здесь подробно останавливаться на каждой строчке кода, но постараюсь выделить суть изложенных выше концепций. Для справки вы можете открыть / клонировать / форкнуть следующий репозиторий git для примера проекта:
Создание приложения с поддержкой React и настройка навигатора
Сначала убедитесь, что среда настроена. Обратитесь к этому документу для настройки среды. Перейдите в командную строку и создайте новое собственное приложение React, используя простую команду:
react-native init FacebookLoginProject
Это создаст новый проект с заданным именем.
Настроим навигатор для нашего приложения. Откройте index.ios.js и внутри функции рендеринга основного компонента вместо представления по умолчанию мы возвращаем следующий код:
render() {
return (
<Navigator
initialRoute={{id: 'FirstScreen', name: 'Index'}}
renderScene={this.renderScene.bind(this)}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}} />
);
}
renderScene(route, navigator) {
var routeId = route.id;
if (routeId === 'FirstScreen') {
return (
<FacebookLoginScreen
navigator={navigator} />
);
}
if (routeId === 'Homepage') {
return (
<Homepage
navigator={navigator} />
);
}
}
- в компоненте Navigator (из модуля response-native) маршрут обозначается простым объектом javascript с идентификатором и именем (вы можете добавлять дополнительные параметры в качестве объектов в маршрут).
- initialRoute - это объект, обозначающий маршрут, который будет отображаться первым.
- renderScene ожидает, что функция (в данном примере renderScene) будет описывать, какой маршрут какой компонент должен выполнять.
- configureScene - это просто функция, которая возвращает конфигурацию того, как мы хотим отображать компонент в маршруте.
Интеграция сторонних плагинов (react-native-fbsdk)
Мы будем использовать следующую оболочку с открытым исходным кодом, чтобы добавить в наше приложение функцию входа в facebook:
После установки плагина (желательно с помощью rnpm) вам необходимо создать приложение на панели управления Facebook, чтобы начать использовать facebook apis. Этот процесс может быть немного обременительным, если вы делаете это впервые. Просто обратитесь к этим шагам, чтобы создать приложение. Теперь давайте создадим компонент FacebookLoginScreen.
componentWillMount () {
console.log(AccessToken)
AccessToken.getCurrentAccessToken().then(
(data) => {
if(data) {
this.goToHomePage();
}
}
)
}
- Этот конкретный код в компоненте проверяет, вошел ли пользователь уже в систему. Если он вошел в систему, мы получим токен доступа, и в этом случае мы вызываем функцию, которая вызывает определенный маршрут для домашней страницы, просто заменяя маршрут в навигатор следующим образом:
goToHomePage(accessToken) {
this.props.navigator.replace({id: 'Homepage'});
}
- Теперь мы визуализируем кнопку входа в систему следующим образом (LoginButton доступен из модуля response-native-fbsdk, установленного выше):
render() {
return (
<View style={styles.container}>
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
this.goToHomePage();
}
)
}
}
}
/>
</View>
);
}
- onLoginFinished ожидает функцию обратного вызова, которая описывает поведение приложения после входа в систему. В текущем примере мы хотим перенаправить пользователя на домашнюю страницу в соответствии с каркасами.
Выполнение вызова api графика
Теперь давайте попробуем определить целевой экран после входа в систему (компонент Homepage в нашем примере).
constructor() {
super();
this.state = {
name : '',
pic : ''
}
}
- Этот конструктор просто устанавливает начальное состояние для компонента домашней страницы.
render() {
return (
<View style={styles.container}>
<Text style={styles.welcomeMsg}>Welcome</Text>
<Text style={styles.name}>{this.state.name}</Text>
<Image source={{uri:this.state.pic}} style={styles.image} />
<LoginButton
onLogoutFinished = {() => {
this.props.navigator.replace({id:'FirstScreen'})
}}
/>
</View>
);
}
- Вышеупомянутый метод рендеринга компонента Homepage возвращает представление, содержащее два текстовых узла и изображение. Обратите внимание, что все символы внутри "{}" означают, что это javascript, а не jsx. (JSX используется для придания компонентам вида структуры html, к которой мы все так привыкли. Прочтите this, чтобы узнать больше о JSX)
{this.state.name}
- приведенный выше оператор просто заменит выражение значением выражения javascript.
//Create response callback.
_responseInfoCallback = (error, result) => {
if (error) {
alert('Error fetching data: ' + error.toString());
} else {
this.setState({name: result.name, pic: result.picture.data.url});
}
}
componentWillMount() {
// Create a graph request asking for user information with a callback to handle the response.
const infoRequest = new GraphRequest(
'/me?fields=name,picture',
null,
this._responseInfoCallback
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
}
- Вышеупомянутый блок кода отвечает за вызов api графа. Для этого мы используем модуль GraphRequest, который также предоставляется «react-native-fbsdk», например LoginButton.
- this.setState - важный метод (здесь часто случаются ошибки), который гарантирует, что компоненты будут повторно отрисованы при получении ответа от API.
- ** Обратите внимание, что следующий код НЕ РАБОТАЕТ вместо this.setState
this.state = {name: result.name, pic: result.picture.data.url}
Окончательное приложение теперь должно выглядеть примерно так:
Не стесняйтесь, присылайте мне любые вопросы относительно проекта по адресу [email protected].
Удачного кодирования.
Ваше здоровье !!!
