В помощь мобильному разработчику
Sing In With Google

Аутентификация пользователя через Google аккаунт при помощи Xamarin.Auth

Александр Алексеев

Введение

Почти в каждом мобильном приложении есть возможности для входа в существующий аккаунт  или регистрации нового пользователя. Для регистрации пользователю, как правило, приходится вводить личные данные в специальную форму (это может быть, к примеру, имя, номер телефона или адрес электронной почты). При этом получаемые данные сохраняются в пользовательской базе данных. В случае слабой заинтересованности пользователя в предлагаемом ему сервисе необходимость заполнять форму регистрации может показаться ему обременительной. И он отложит знакомство с Вашим продуктом до лучших времен. Следовательно, вопрос обеспечения пользователя альтернативными вариантами для авторизации является принципиально важным. И это может быть успешно достигнуто при помощи таких сторонних сервисов, как Google, Facebook и т.д.

Мобильные приложения, разработанные при помощи Xamarin, могут использовать преимущества компонента Xamarin.Auth, дабы прибегнуть к механизму регистрации путем направления пользователя на форму выхода в аккаунты таких социальных сетей, как Google, Facebook, Microsoft и Twitter. Будучи уже аутентифицированными при помощи компонента Xamarin.Auth пользователи смогут с легкостью размещать в соответствующих социальных сетях связанный с приложениями контент или обмениваться им между собой.

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

 

Необходимые условия

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

  1. Visual studio с компонентами Xamarin или Xamarin Studio
  2. Android SDK
  3. Эмулятор Android

 

Что такое oAuth?

oAuth 2.0 — это открытый стандарт для аутентификации, который, обычно, используется в качестве способа авторизации приложений для доступа к информации пользователя, размещенной на других приложениях/сайтах без необходимости делиться паролями от них. К примеру, Facebook, Google, LinkedIn, Twitter и т. д. позволяют пользователю разрешить приложению получить доступ к его (пользователя) данным, которые хранятся на соответствующих серверах.

На диаграмме ниже показан процесс аутентификации oAuth

oauth авторизация

 

Описание приведенной выше схемы

Давайте кратко рассмотрим приведенную выше схему.

  1. Когда пользователь вводит свои учетные данные на соответствующей странице (как показано на рисунке ниже), он может предоставить приложению доступ к своим данным.
  2. Приложение запросит у владельца ресурса (например, сервера Google) предоставления доступа к соответствующим данным пользователя, как только тот войдет в систему.
  3. На этом этапе владелец ресурса посредством представленного ниже диалогового окна поинтересуется у пользователя тем, дает ли тот свое согласие на предоставление доступа этому приложению или нет?
  4. Если пользователь нажимает на Allow (Разрешить), тогда владелец ресурса получает Grant Access, и, таким образом, приложение может получить доступ к данным пользователя через соответствующий аккаунт в социальной сети.
  5. Таким образом, после получения Grant access, аккаунт обеспечивает приложение токеном авторизации.
  6. С помощью токена авторизации приложение будет запрашивать необходимую ему информацию о пользователе из аккаунта соцсети.
  7. И, наконец, аккаунт соцсети представит необходимые пользовательские данные. И после получения этих данных приложение может продолжить свою работу.

 

Что такое Xamarin.Auth?

Xamarin.Auth — это кросс-платформенный API, который поможет вам реализовать аутентификацию через соцсети, основанную на oAuth. С помощью него мы можем выполнять аутентификацию пользователей посредством аккаунтов в таких соцсетях, как Google, Microsoft, Facebook и Twitter. Кроме того, мы можем хранить некоторые детали авторизованных аккаунтов.

 

Как интегрировать Xamarin.Auth в мобильное приложение?

Для того чтобы интегрировать компонент Xamarin.Auth в приложение, нужно сделать следующее:

  • Приложение должно быть зарегистрировано на серверах аккаунтов соцсетей (к примеру, на серверах Google и Facebook), с тем чтобы получить токен доступа.
  • Нужно аутентифицировать пользователей путем использования токена доступа и получить основную информацию о них, например, электронный идентификатор, имя, фото профиля и т. д.
    xamarin авторизация потоки

 

Xamarin.Auth — интеграция компонента с аккаунтом Google

В первой части этой статьи мы создадим мобильное приложение и проведем аутентификацию пользователей с аккаунтом Google при помощи компонента Xamarin.Auth.

 

Регистрация на портале для разработчиков Google

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

  • Войдите в консоль разработчиков Google и выберите Create an empty project (Создать пустой проект), напишите название проекта и нажмите на кнопку Create.Создать проект в консоли Google
  • А затем нажмите на библиотеку на левой боковой панели и выберите Google+ Api из Social Apis, как показано ниже:Google API
  • Теперь мы можем видеть окно Google+ API, которое имеет опцию ENABLE, нажмите на нее, чтобы включить Google+ API.Включаем Google API
  • Опять же из меню слева выберите Credential и нажмите CREATE CREDENTIALS, и затем выберите oAuthClientId, как показано ниже:Доступа к Google
  • Сейчас мы видим кнопку Configure consent screen (Настройка экрана подтверждения) . Нажмите ее.Настройка
  • Описанные выше действия откроют Экран подтверждения. Введите название продукта (оно может быть каким угодно), и нажмите на кнопку save (сохранить).Google экран
  • После этого снова откроется следующий экран, на котором Вы увидите зависимую кнопку с просьбой выбрать тип приложения. Выберите веб-приложение и укажите его название в поле Name, скажем, к примеру, Веб-клиент 1, и затем предоставите AuthorizedRedirectURis в качестве https://www.googleapis.com/plus/v1/people/me. Оставьте поле авторизации JavaScript origins пустым, и после того нажмите на кнопку Create (Создать), как показано ниже:
    Google перенаправление
  • Если мы зарегистрировали в консоли разработчика приложение для Android, после создания запроса OAuth2Authenticator покажется окно с сообщением: Please copy this code switch to your application and paste it there («Пожалуйста, скопируйте эту смену кода в приложение и вставить ее туда»). Таким образом, мы должны вручную закрыть окно и перейти к авторизации. Чтобы избавиться от этого, мы выбрали тип — веб-приложение.
  • Далее, появится всплывающее окно, на котором будет отображаться Client Id и Client secret. Сохраните их для использования в коде приложения и нажмите на кнопку OK.
  • Отлично! Мы успешно интегрировали приложение с помощью консоли разработчиков Google.

 

Добавление экрана входа в приложение

Для аутентификации пользователя при помощи различных соцсетей мы должны создать кнопки для каждой из них. А затем связать нажатие на кнопки с соответствующим процессом аутентификации.

Для этого откройте для редактирования файл Main.axml, как показано ниже:

Обзр решения в Visual Studio

В Main.axml нужно написать следующий код AXML для реализации кнопки Google.

 

Сбор информации о пользователе из Google

После создания приложения в консоли разработчика мы получили client ID (идентификатор клиента) для приложения, и это означает, что мы получили разрешение на доступ к информации о пользователе. Давайте используем этот идентификатор в нашем приложении и реализуем следующий код в MainActivity.cs:

  • Добавьте расположенное ниже выражение, чтобы найти представление (которое было идентифицировано с помощью атрибута идентификатора т.е. Resource.Id.GoogleButton из XML, который был обработан в Activity.OnCreate(Bundle). ) и присвойте его googleBtn внутри OnCreate().
  • Приложение использует классы OAuth2Authenticator и OAuth2Request, предоставляемые Xamarin.Auth, для реализации приложения на стороне потока аутентификации.
  • Реализация аутентификации внутри обработчика события нажатия кнопки.

     
  • Когда указанный выше код будет размещен, мы сможем аутентифицировать пользователя с аккаунтом Google, а также получить из него информацию о пользователе.

 

Кэширование данных пользователя

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

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

 

Service ID

Сохраненные аккаунты однозначно определены с помощью ключа, состоящего из свойства аккаунта Username и Service ID. Этот самый Service ID — это любая строка, которая используется при сохранении и извлечении аккаунтов из хранилища.

Вот пример кода для использования Service ID при сохранении, извлечение и удаление данных из хранилища.

Сохранение данных в хранилище

Извлечение сохраненных данных из хранилища

Удаление данных из хранилища

 

Итог

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

В этой статье мы рассмотрели вопрос того, как аутентифицировать пользователей Google при помощи компонента Xamarin.Auth.

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

 

Источники информации

  • Для получения дополнительной информации о OAuth2Authenticator & OAuth2Request APIs перейдите по этой ссылке
  • Для получения дополнительной информации о Scope параметре OAuth2Authenticator API перейдите по этой ссылке.

АвторVenkataramana
ИсточникСтатья в блоге автора

Александр Алексеев
Александр Алексеев

Xamarin - разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#. За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

Azure Facebook
xamarin 2017

Написать ответ