Создание пользовательской кнопки входа в Facebook в Swift

И сделать его многоразовым в вашем следующем проекте.

Добавить кнопку входа в Facebook в свое приложение можно так же просто, как использовать FBLoginButton, который включен в SDK Facebook. Однако внешний вид FBLoginButton не может быть изменен.

Если вам нужна кнопка входа в Facebook, которая соответствует внешнему виду вашего приложения, вам нужно будет создать свою собственную кнопку входа в Facebook. Кроме того, вам также необходимо самостоятельно реализовать все необходимые вызовы API.

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

Обратите внимание, что я не буду углубляться в то, как настроить проект Xcode для использования Facebook SDK. Если вы неправильно настроили свой проект Xcode, я рекомендую вам пройти процесс настройки, обратившись к моей предыдущей статье, прежде чем продолжить эту статью.

🔗 Пошаговая инструкция: интеграция входа в Facebook в Swift

Обзор

В демонстрационных целях я создам настраиваемую кнопку входа в систему, которая показывает текст с эмодзи, реализует все необходимые функции входа / выхода и показывает другое сообщение заголовка в зависимости от текущего статуса входа.

Следующий анимированный GIF демонстрирует, чего мы добьемся в этой статье.

После всего сказанного давайте запустим ваш Xcode и приступим. 🔨

Добавление настраиваемой кнопки входа в Facebook

Прежде чем мы начнем работать над настраиваемой кнопкой входа, давайте импортируем FBSDKLoginKit в ваш контроллер представления.

import FBSDKLoginKit

Мы будем использовать раскадровку для нашей реализации пользовательского интерфейса.

Сначала добавьте кнопку и пометьте ее в контроллере представления. Создайте 2 IBOutlet loginButton и messageLabel и соедините их с меткой и кнопкой, которые вы только что добавили.

Затем добавьте «ретушь внутри» IBAction с именем loginButtonTapped(_:) и подключите его к loginButton.

После этого нам понадобятся 2 приватные функции, которые будут обновлять loginButton и messageLabel текст в зависимости от текущего статуса входа.

1. В качестве текста настраиваемой кнопки входа в систему отображайте «Войти 👍🏻», когда пользователь вышел из системы, в противном случае - «Выход 👋🏻».
2. Для заголовка сообщения покажите «Пожалуйста, войдите с помощью Facebook», когда пользователь вышел из системы, иначе покажите приветственное сообщение с именем пользователя.

Чтобы и loginButton, и messageLabel отображали правильную информацию при запуске экрана, нам нужно вызвать обе эти функции в viewDidLoad().

1. Используйте наличие токена доступа, чтобы определить текущий статус входа в систему и передать его в функцию updateButton(isLoggedIn:). Когда AccessToken.current равно nil, это означает, что пользователь в данный момент вышел из системы.
2. Извлеките имя пользователя из статической переменной класса Profile в Facebook SDK и передайте его в функцию updateMessage(with:), чтобы соответствующим образом отобразить заголовок.

Наконец, нам нужно будет реализовать основные функции этого контроллера представления - вход и выход. Ниже приводится реализация loginButtonTapped(_:) IBAction.

1. Создайте экземпляр класса LoginManager Facebook SDK для обработки операций входа и выхода.
2. Когда токен доступа доступен, выполните операцию выхода и обновите текст loginButton и messageLabel.
3. Маркер доступа недоступен, выполните операцию входа в систему. Обратите внимание, что параметр permissions не требуется, когда мы получаем доступ только к базовой информации профиля Facebook. Следовательно, нам нужно передать только пустой массив.
4. Проверьте наличие ошибок после завершения операции входа в систему. Если произошла ошибка, мы ее распечатаем и вернемся.
5. Проверьте, не отменил ли пользователь операцию входа в систему. Если это так, ничего больше делать не нужно, поэтому просто вернитесь.
6. Успешный вход в систему, поэтому обновите текст пользовательской кнопки входа в систему.
7. Используйте метод loadCurrentProfile(completion:) класса Profile, чтобы получить информацию о профиле пользователя, выполнившего вход в систему, и обновить заголовок сообщения.

После завершения реализации loginButtonTapped(_:) пора протестировать операции входа и выхода.

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

Ознакомьтесь с разделом Тестирование интеграции входа в Facebook с использованием тестовых пользователей в Пошаговой инструкции: интеграция входа в Facebook в Swift, чтобы узнать, как настроить тестового пользователя.

Создав тестового пользователя, соберите и запустите приложение. Если вы правильно выполнили всю реализацию, вы сможете без проблем выполнять вход и выход из системы.

Создание многоразовой пользовательской кнопки входа в Facebook

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

В нашем случае настраиваемая кнопка входа в Facebook - очень хороший кандидат для рефакторинга, чтобы сделать ее многоразовой.

Вот чего мы пытаемся добиться с помощью рефакторинга:

1. Создайте подкласс UIButton.
2. Определите обработчики завершения входа и выхода.
3. Инкапсулируйте логику входа и выхода в кнопку входа в систему.

Создайте подкласс UIButton

Давайте продолжим и создадим UIButton подкласс, назовите его MYFacebookLoginButton ' и обязательно импортируйте FBSDKLoginKit в MYFacebookLoginButton.

Сначала добавьте метод updateButton(isLoggedIn:), который мы ранее реализовали как частную функцию. Кроме того, определите commonSetup() метод, который мы скоро реализуем.

Затем нам нужно будет реализовать 2 метода init для MYFacebookLoginButton.

1. init(frame:) → Требуется для инициализации с помощью кода.
2. init?(coder:) → Требуется для инициализации с использованием раскадровки.

Как видите, мы будем вызывать commonSetup() каждый раз при инициализации MYFacebookLoginButton для выполнения любой необходимой конфигурации.

Вот реализация commonSetup().

1. Обновите текст MYFacebookLoginButton в соответствии с текущим статусом входа.
2. Используйте findResponsibleViewController(), чтобы получить ссылку на контроллер представления, который отвечает за (владеет) экземпляром MYFacebookLoginButton, нам понадобится ответственный контроллер представления, когда мы реализуем логику входа в систему позже. Обратите внимание, что этот метод еще не реализован, мы поговорим об этом позже.
3. Добавьте MYFacebookLoginButton в качестве цели для обработки его события «касание внутри».

Вы могли заметить, что мы не определили переменную responsibleViewController. Давайте продолжим и определим это. Обратите внимание, что мы определим его как weak переменную, чтобы избежать цикла сохранения.

private weak var responsibleViewController: UIViewController!

Теперь давайте рассмотрим реализацию метода findResponsibleViewController().

Как показано в приведенном выше фрагменте кода, это расширение UIView, которое рекурсивно просматривает стек представления в поисках своего ответственного контроллера представления. Для получения дополнительной информации вы можете обратиться к этой статье.

Поскольку UIButton является подклассом UIView, поэтому в нашем случае мы можем использовать метод findResponsibleViewController().

Определение обработчиков завершения входа и выхода из системы

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

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

Для обработчика завершения входа в систему будет еще один дополнительный параметр, который представляет собой результат входа, возвращаемый Facebook SDK. Здесь мы будем использовать тип Result, представленный в Swift 5, для передачи либо экземпляра LoginManagerLoginResult, либо экземпляра Error.

Если вы хотите узнать больше о типе результата, ознакомьтесь с этой статьей.

Инкапсулируйте логику входа и выхода из системы с помощью кнопки входа

Чтобы инкапсулировать логику входа и выхода из системы в кнопку входа, мы реализуем обработчик событий «внутри» внутри MYFacebookLoginButton. Логика очень похожа на реализованную нами ранее loginButtonTapped(_:) IBAction.

Здесь нужно обратить внимание на несколько моментов:

1. Запуск обработчика завершения выхода из системы после завершения выхода.
2. Передайте responsibleViewController при вызове login() метода loginManager.
3. Запускать обработчик завершения входа в систему после завершения входа в систему с ошибкой. Здесь нужно обратить внимание на 2 вещи. Поскольку мы слабо захватываем self в обработчике завершения loginManager, поэтому мы будем использовать необязательную привязку для проверки доступности self. Еще одна вещь, на которую следует обратить внимание, - это то, что мы передаем объект ошибки как failure случай типа Result.
4. Запуск обработчика завершения входа в систему после успешного входа в систему. Здесь мы передаем объект результата как success регистр типа Result.

На этом мы завершили реализацию многоразовой пользовательской кнопки входа в Facebook.

Использование многоразовой настраиваемой кнопки входа в Facebook

Есть два способа добавить многоразовую кнопку в контроллер представления:

1. Использование кода (программно)
2. Использование раскадровки

Чтобы программно добавить кнопку в контроллер представления, вставьте приведенный ниже фрагмент кода в viewDidLoad() метод контроллера представления.

Если вы предпочитаете использовать раскадровку, просто добавьте UIButton в контроллер представления и установите для него класс MYFacebookLoginButton. Затем установите IBOutlet соединение с вашим контроллером представления.

Наконец, давайте посмотрим, как использовать обработчик завершения входа и выхода для обновления messageLabel. Добавьте следующий код в метод viewDidLoad() вашего контроллера представления.

1. Обрабатывать success футляр типа Result. Используйте метод loadCurrentProfile(completion:) класса Profile, чтобы получить информацию о профиле пользователя, выполнившего вход в систему, и обновить заголовок сообщения.
2. Обрабатывать failure футляр типа Result.
3. Обновите заголовок сообщения после успешного выхода пользователя из системы.

Обратите внимание, что вызываемый здесь метод updateMessage(with:) в точности совпадает с тем, который мы реализовали ранее.

Вот и все! Теперь вы можете создать и запустить свое приложение, чтобы увидеть в действии многоразовую настраиваемую кнопку входа в Facebook. 🤟🏻

Заключение

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

Не стесняйтесь загружать полный образец проекта на Github и добавлять желаемые функции.

Дальнейшее чтение

• Пошаговое описание: интеграция входа в Facebook в Swift
• Возможности типов результатов в Swift
• Как найти контроллер представления, отвечающий за представление

Надеюсь, эта статья окажется для вас полезной. Если вам понравилась эта статья, не стесняйтесь поделиться ею с друзьями и оставить мне комментарий.

Вы можете подписаться на меня в Twitter, чтобы увидеть больше статей, связанных с разработкой для iOS.

Спасибо за чтение! 👨🏼‍💻

Первоначально опубликовано на https://swiftsenpai.com 13 января 2020 г.