React – Nature: аутентификация Google и Facebook

Автор оригинала: Atanda Abdul-Semiu.

Аутентификация – это неотъемлемая часть любого приложения – особенно когда мы хотим добавить некоторые разрешения или ограничивать доступ к определенным представлениям.

Чтобы начать работу, убедитесь, что у вас установлено следующее:

• Oddjs.
• Реагировать
• Сторожевой
• Android-студия
• Xcode.

Если у вас нет ни одного из вышеперечисленного, вы можете установить их на MacOS следующим образом:

• Nodejs: $ Brew Установка узла
• React-Nature CLI: $ NPM I -G React - Nature-CLI
• Watchman: $ Brew Install Watchman
• Android Studio: можно скачать здесь
• Xcode: можно скачать из App Store

NB: У вас должен быть доместитель установлен для использования команды Brew. Предполагается, что читатель использует Mac OSX

Шаг 1 (Инициализация приложения аутентификации и установка FBSDK и Google-Signin)

Теперь, когда мы установили все, что нам нужно, давайте начнем!

Выключите свой терминал и запустите следующие команды:

• inter in inity initucial аутентификация
• $ CD аутентификация
• $ raction-atnation install intercative-fbsdk @ 0.6.0
• $ raction-atnation install install active-google-signin
• $ React - родной run-iOS

У вас должен быть экран, похожий на один ниже после выполнения вышеуказанных команд

Шаг 2 (Настройка FBSDK в нашем приложении)

• Facebook SDK Посетить https://developers.facebook.com и создать новое приложение

  • Конфигурация iOS
    • открыть $. (Это откроет ваш текущий каталог в Finder)
    • Открыть аутентификацию .xCodeProj
    • Следуйте шагу 2-11 здесь
  • Конфигурация Android
    • Откройте вашу папку Android приложения аутентификации в Android Studio
    • Следуйте инструкциям здесь

    • После последующих шагов выше, откройте наш уровень приложения build.gradle и обновить следующее:

      • Compitesdkversion : 25.
      • Цельцдкверсия : 23.
      • Зависимости {compile "com.android.support:appcompat-v7:25.0.0"//меняется с 23.0.1}
  • Обновите свой Android Mainest, как описано здесь Отказ
  • Беги $ React - родной Run-Android

  После того, как вышеуказанные шаги были завершены, давайте напишем наше Вход Компонент и проверьте нашу конфигурацию:

• Создать папку Компоненты В нашем каталоге приложений и добавьте новый файл Login.js.

• Скопируйте код ниже в Login.js.

import React, {Component} from 'react';
import {LoginManager} from 'react-native-fbsdk';
import {TouchableOpacity, Text, View} from 'react-native';

export default class LogIn extends Component {
  fbAuth() {
    LoginManager.logInWithReadPermissions(['public_profile']).then(
      function (result) {
        if (result.isCancelled) {
          console.log('Login was cancelled');
        } else {
          console.log('Login was successful with permissions: '
            + result.grantedPermissions.toString());
        }
      },
      function (error) {
        console.log('Login failed with error: ' + error);
      }
    );
  }
  render() {
    return (
      
        
          Login with Facebook
        
      
    );
  }
}

• Импортируйте наш новый компонент в App.js В корневом каталоге нашего приложения. Его содержимое должно выглядеть похоже на код ниже:

import React, {Component} from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

import LogIn from './components/LogIn';

export default class App extends Component<{}> {
  render() {
    return (
      
        
      
    );
  }
}

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

Теперь давайте остановимся текущим экземпляром нашего приложения и запустите $ React - родной Run-iOS на терминал снова. Наш экран приложения должен выглядеть похоже на экран ниже

Давайте проверим, что наши логины работает, нажав Войти с Facebook Отказ Мы должны получить экран, аналогичный тем ниже или получить экран, запрашивающий нас ввести наши учетные данные Facebook

Шаг 3 (Настройте аутентификацию Google)

• Конфигурация iOS

  • Давайте откроем наше приложение node_modules папка и найти React - Nature-Google-Signin и открыть его IOS папка. Это должно выглядеть как изображение ниже:

  • Перетащите Rngoooglesignin.xcodeProj в наш проект Xcode Библиотеки Группа, как показано ниже

  • Открыть Googlesdk Папка и перетащите все файлы, которые заканчиваются .framework в Рамки Группа нашего приложения и Убедитесь, что «элементы копирования, если это необходимо».
  • Следуйте шагам 2-3 здесь
• Конфигурация Android
  • Следуйте инструкциям здесь Отказ

После завершения выше шагов добавьте следующие методы нашего компонента входа:

  componentDidMount() {
    this.setupGoogleSignin();
  }

  googleAuth() {
    GoogleSignin.signIn()
      .then((user) => {
        console.log(user);
      })
      .catch((err) => {
        console.log('WRONG SIGNIN', err);
      })
      .done();
  }

  async setupGoogleSignin() {
    try {
      await GoogleSignin.hasPlayServices({ autoResolve: true });
      await GoogleSignin.configure({
        iosClientId: settings.iOSClientId,
        webClientId: settings.webClientId,
        offlineAccess: false
      });

      const user = await GoogleSignin.currentUserAsync();
      console.log(user);
    }
    catch (err) {
      console.log("Google signin error", err.code, err.message);
    }
  }

Кроме того, в нашем методике рендеринга компонента входа в систему добавьте Google Login Кнопка, как показано ниже:

  Login with Google

Теперь давайте остановим наш текущий процесс приложения и запустите $ React - родной Run-iOS очередной раз. Наш экран должен выглядеть следующим образом:

Давайте проверим, что наши логины работает, нажав Войти с Google Отказ Мы должны получить экран, аналогичный этому ниже или получить экран, запрашивающий нас ввести наши учетные данные Google

Резюме

Теперь, когда у нас есть аутентификация, настроенная в нашем приложении, мы можем настроить сохраняющую информацию о пользователе любым способом, которым мы хотим. Исходный код для этой статьи можно найти здесь Отказ