Morioh
Login
Флорентина Сергеевна Захарова

Флорентина Сергеевна Захарова

7 months ago

Вход в Facebook Flutter: как добавить аутентификацию Facebook

Узнайте, как добавить вход в Facebook в ваше приложение Flutter, в этом простом руководстве. Вы будете использовать Facebook SDK и пакет Flutter Login для реализации аутентификации Facebook.

Настройка проекта Flutter

Сначала нам нужно создать новый проект Flutter. Для этого убедитесь, что Flutter SDK и другие требования, связанные с разработкой приложений Flutter, установлены правильно. Если все настроено правильно, то для создания проекта мы можем просто запустить следующую команду в нужном локальном каталоге:

flutter create fb_login_example

После настройки проекта мы можем перейти в каталог проекта и выполнить следующую команду в терминале, чтобы запустить проект либо в доступном эмуляторе, либо на реальном устройстве:

flutter run

Строительные леса проекта

Теперь мы собираемся создать проект по умолчанию и превратить пользовательский интерфейс в то, что мы хотим. Мы собираемся удалить код проекта Flutter по умолчанию и заменить его нашим собственным кодом пользовательского интерфейса. Здесь у нас будет кнопка входа в систему, которая поможет нам запустить вход в Facebook. После успешного входа в систему мы отобразим кнопку выхода из системы. Все изменения необходимо внести в сам файл main.dart. Общий код пользовательского интерфейса представлен во фрагменте кода ниже:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FB login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  bool _isLoggedIn = false;
  Map _user;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Facbook login example"),
      ),
      body: Container(
        child: _isLoggedIn
            ? Column(
mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  TextButton(
                      onPressed: () {
                      },
                      child: Text("Logout"))
                ],
              )
            : Center(
                child: ElevatedButton(
                  child: Text("Login with Facebook"),
                  onPressed: () async {
                    
                  },
                ),
              ),
      ),
    );
  }
}

Здесь у нас есть полный код файла main.dart. Мы создали виджет MyHomePage, который возвращает виджет Scaffold с панелью приложений и свойством body, имеющим виджет Container в качестве родительского. Дочерний элемент виджета Container оснащен условной отрисовкой. Состояние _isLoggedIn используется для обработки состояния входа в систему. Если это ложь, мы отображаем кнопку входа в систему, иначе мы показываем кнопку выхода из системы. Объект _user Map используется для хранения результата ответа после успешного входа в систему. Эта переменная карты будет хранить пользовательские данные из Facebook.

Следовательно, мы получим следующий результат пользовательского интерфейса в эмуляторе:

 

Создать приложение Facebook

Теперь нам нужно создать и настроить приложение Facebook, которое позволит нам активировать функцию входа в Facebook. Метод заключается в том, чтобы связать наше приложение Flutter с приложением Facebook, в котором включена функция входа в Facebook.

Сначала нам нужно войти в консоль разработчиков Facebook. После успешного входа в систему мы получим следующий экран в браузере:

Теперь нам нужно нажать «Мои приложения», что приведет нас к Приложениям. консоль, как показано на снимке экрана ниже:

Здесь нам нужно нажать кнопку «Создать приложение» в соответствии с указаниями, после чего откроется диалоговое окно, как показано на снимке экрана ниже. :

В диалоговом окне нам нужно выбрать тип приложения и нажать кнопку «Продолжить». Это приведет нас к другому диалоговому окну, в котором нам нужно будет ввести отображаемое имя нашего приложения Facebook, как показано в фрагменте кода ниже:

После ввода названия приложения нам нужно нажать кнопку «Создать приложение».

 

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

На информационной панели отображаются

идентификатор приложения, тип приложения а также другие продукты, которые мы можем включить.

Настройка службы входа в Facebook

Теперь наша главная цель — настроить функцию входа в Facebook. Следовательно, нам нужно нажать кнопку «Настроить» на странице Вход в Facebook

Затем мы будем перенаправлены на экран, где сможем выбрать платформу приложения для включения службы входа в Facebook, как показано на снимке экрана ниже:

Поскольку мы собираемся настроить платформу Android, нам нужно нажать «Android».

После этого откроется страница, на которой нам необходимо выполнить ряд шагов, чтобы включить службу входа в Facebook. Все этапы также снабжены подробной инструкцией.

Здесь нам нужно сразу перейти к шагу 3, где нам нужно добавить имя пакета приложения Flutter и имя основного действия. Это мы можем получить из файла AndroidManifest.xml в расположении ./android/app/src/main/ . Затем мы можем ввести имя пакета и имя класса активности, как показано на снимке экрана ниже:

Затем нам нужно нажать кнопку «Сохранить» и нажать «Продолжить'.

Теперь следующим шагом будет создание хеш-ключа для включения службы. Все необходимые инструкции будут уже предоставлены на этом конкретном этапе.

Нам нужно посмотреть инструкцию для платформы Windows, как показано на скриншоте ниже:

Теперь, чтобы сгенерировать хэш-ключ, в нашей системе Windows есть следующие требования.

  • Инструмент управления ключами и сертификатами (keytool) из Java Development Kit.
  • openssl-for-windows Библиотека OpenSSL для Windows, которую можно загрузить из Архива кода Google. Обязательно скачайте эту библиотеку и распакуйте ее на диск C:\.

Теперь, чтобы сгенерировать хэш ключа разработки, нам нужно запустить следующую команду в командной строке в папке Java SDK (C:\Program Files\Java\jdk\bin):

keytool -exportcert -alias androiddebugkey -keystore "C:\\Users\\USERNAME\\.android\\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\\bin\\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\\bin\\openssl" base64

В приведенной выше команде нам нужно изменить местоположение в зависимости от установленных файлов в нашей системе.

После успешного выполнения команды мы получим строку из 28 символов, которая является хэш-ключом. Нам нужно скопировать этот хэш-ключ и вставить его в место, указанное на скриншоте ниже:

Затем нам нужно нажать «Сохранить» и «Продолжить<». кнопки i=4>'.

Это успешно активирует службу входа в Facebook в нашем приложении Facebook.

Теперь нам нужно соединить наше приложение Facebook с нашим приложением Flutter. Следовательно, нам нужно вернуться к нашему проекту флаттера.

Установка плагина Flutter

Чтобы связать наше приложение Facebook и его сервисы с проектом Flutter, мы собираемся использовать плагин flutter_facebook_auth. Этот пакет позволяет нам добавить учетную запись Facebook в наше приложение Flutter, получить информацию о пользователе, изображение профиля и многое другое. Подробную информацию о плагине, а также этапы настройки можно найти в его официальной документации..

Теперь, чтобы установить пакет, нам нужно добавить плагин в наш файл pubspec.yaml, как показано в фрагменте кода ниже:

dependencies:
  flutter:
    sdk: flutter
  flutter_facebook_auth: ^3.3.3+1

Теперь нам нужно внести некоторые настройки в собственные файлы Android, чтобы этот плагин правильно работал в нашем проекте.

Во-первых, нам нужно отредактировать наши ресурсы и манифест и добавить следующую конфигурацию в наш проект Android:

  • Нам нужно открыть наш ./android/app/src/main/res/values/strings.xml или создать его. если его не существует.
  • Затем нам нужно добавить следующий фрагмент кода (замените {your-app-id} на идентификатор вашего приложения Facebook) в файл strings.xml:
<string name="facebook_app_id">{your-app-id}</string>
<string name="fb_login_protocol_scheme">fb{your-app-id}</string>

Пример кода файла strings.xml показан во фрагменте кода ниже:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Flutter Facebook Auth Example</string>
<string name="facebook_app_id">000000000000000</string>
<string name="fb_login_protocol_scheme">fb0000000000000</string>
</resources>

Здесь нам нужно отредактировать название приложения и идентификатор приложения на основе приложения Android в консоли разработчиков Facebook.

Теперь нам нужно перейти к файлу ./android/app/src/main/AndroidManifest.xml и добавить следующий Элемент /span>:uses-permission после элемента application

<uses-permission android:name="android.permission.INTERNET"/>

Затем нам нужно добавить следующий элемент meta-data, activity для Facebook, а также ctivity и < /span> в файле AndroidManifest.xml:intent-filter для пользовательских вкладок Chrome внутри элемента application

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>

После всех настроек нам необходимо еще раз установить приложение в эмуляторе. Для этого мы можем удалить приложение из эмулятора и запустить его снова.

Реализация входа в Facebook в приложении Flutter

Теперь мы собираемся реализовать функции для входа в Facebook в нашем приложении Flutter. Для этого мы собираемся использоватьFacebookAuth из пакета flutter_facebook_auth.

Теперь мы собираемся создать функцию с именем _performLogin внутри класса MyHomePageState main.dart< /span>, как показано во фрагменте кода ниже:

_performLogin() async{
FacebookAuth.instance.login(
permissions: ["public_profile", "email"]).then((value) {
FacebookAuth.instance.getUserData().then((result) {
setState(() {
_isLoggedIn = true;
_user = result;
});
});
});

В функции мы использовали метод login, предоставленный экземпляром FacebookAuth. Мы запросили permissions для изображения public_profile и email. Затем мы использовали метод getUserData() для получения пользовательских данных и установки пользовательских данных в _user объект карты и установки _isLoggedIn состояния. значение true с помощью setState.

Теперь нам нужно вызвать функцию _performLogin() для события onPressed виджета ElevatedButton, как показано на рисунке фрагмент кода ниже:

Center(
child: ElevatedButton(
child: Text("Login with Facebook"),
onPressed: () async {
_performLogin();
},
),
),

После входа в систему мы также получим информацию о пользователе в объекте карты _user. Мы также можем отобразить эту информацию на экране после входа в систему. Для этого мы можем использовать код из следующего фрагмента кода:

body: Container(
child: _isLoggedIn
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(_user["picture"]["data"]["url"]),
Text(_user["name"]),
Text(_user["email"]),
TextButton(
onPressed: () {
_performLogout();
},
child: Text("Logout")
)
],
),
)
:

Реализация функции выхода из системы

Теперь мы собираемся реализовать функцию выхода из системы. Для этого нам нужно создать функцию с именем _performLogout и использовать код из следующего фрагмента кода:

_performLogout() async{
FacebookAuth.instance.logOut().then((value) {
setState(() {
_isLoggedIn = false;
_user = null;
});
});
}

Здесь мы использовали метод logOut, предоставленный экземпляром FacebookAuth, и после его успеха мы установили _isLoggedIn на false и _user object на ноль.

Наконец, нам нужно вызвать функцию в событии onPressed виджета выхода из системы TextButton, как показано в фрагменте кода ниже:

TextButton(
onPressed: () {
_performLogout();
},
child: Text("Logout")
)

Таким образом, окончательная демонстрация нашей реализации входа в Facebook показана ниже:

Таким образом, мы успешно интегрировали функцию входа в Facebook в наше приложение Flutter для платформы Android.

Нижняя граница

Основной целью этого руководства было продемонстрировать интеграцию службы входа в Facebook в приложение Flutter. В руководстве представлены подробные пошаговые инструкции по созданию приложения Facebook, включению службы входа в Facebook и подключению ее к среде Flutter. Соединение между приложением Facebook и службой входа в Facebook со средой flutter стало возможным благодаря наличию пакета flutter_facebook_auth.

#flutter 

Вход в Facebook Flutter: как добавить аутентификацию Facebook
1.55 GEEK