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

31 Январь

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

Google, oAuth, Авторизация, Перевод Android, Прочее Leave a Comment

Введение

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

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

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

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

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

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

Что такое oAuth?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Войдите в консоль разработчиков Google и выберите Create an empty project (Создать пустой проект), напишите название проекта и нажмите на кнопку Create.

А затем нажмите на библиотеку на левой боковой панели и выберите Google+ Api из Social Apis, как показано ниже:
Теперь мы можем видеть окно Google+ API, которое имеет опцию ENABLE, нажмите на нее, чтобы включить Google+ API.

Опять же из меню слева выберите Credential и нажмите CREATE CREDENTIALS, и затем выберите oAuthClientId, как показано ниже:

Сейчас мы видим кнопку Configure consent screen (Настройка экрана подтверждения) . Нажмите ее.

Описанные выше действия откроют Экран подтверждения. Введите название продукта (оно может быть каким угодно), и нажмите на кнопку save (сохранить).

После этого снова откроется следующий экран, на котором Вы увидите зависимую кнопку с просьбой выбрать тип приложения. Выберите веб-приложение и укажите его название в поле Name, скажем, к примеру, Веб-клиент 1, и затем предоставите AuthorizedRedirectURi’s в качестве https://www.googleapis.com/plus/v1/people/me. Оставьте поле авторизации JavaScript origins пустым, и после того нажмите на кнопку Create (Создать), как показано ниже:

Если мы зарегистрировали в консоли разработчика приложение для Android, после создания запроса OAuth2Authenticator покажется окно с сообщением: Please copy this code switch to your application and paste it there («Пожалуйста, скопируйте эту смену кода в приложение и вставить ее туда»). Таким образом, мы должны вручную закрыть окно и перейти к авторизации. Чтобы избавиться от этого, мы выбрали тип — веб-приложение.
Далее, появится всплывающее окно, на котором будет отображаться Client Id и Client secret. Сохраните их для использования в коде приложения и нажмите на кнопку OK.
Отлично! Мы успешно интегрировали приложение с помощью консоли разработчиков Google.

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

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

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

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

<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/buttonPanel"
     android:layout_width="match_parent"
     android:layout_centerVertical="true"
     android:layout_height="wrap_content">
     <Button
        android:id="@+id/GoogleButton"
        android:text="Login using Google"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/buttonPanel"

android:layout_width="match_parent"

android:layout_centerVertical="true"

android:layout_height="wrap_content">

<Button

android:id="@+id/GoogleButton"

android:text="Login using Google"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

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

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

Добавьте расположенное ниже выражение, чтобы найти представление (которое было идентифицировано с помощью атрибута идентификатора т.е. Resource.Id.GoogleButton из XML, который был обработан в Activity.OnCreate(Bundle). ) и присвойте его googleBtn внутри OnCreate().
C#
Button googleBtn = FindViewById<Button>(Resource.Id.GoogleButton);
1
Button googleBtn = FindViewById<Button>(Resource.Id.GoogleButton);

Приложение использует классы OAuth2Authenticator и OAuth2Request, предоставляемые Xamarin.Auth, для реализации приложения на стороне потока аутентификации.

Реализация аутентификации внутри обработчика события нажатия кнопки.

// you can find following readonly strings in Constants.cs file in the 
//github project
// Pasted it here for ease of reference with the code
public static readonly string GOOGLE_ID = 
                          "***********.apps.googleusercontent.com";
public static readonly string GOOGLE_SCOPE =
                         "https://www.googleapis.com/auth/userinfo.email";
public static readonly string GOOGLE_AUTH =
                           "https://accounts.google.com/o/oauth2/auth";
public static readonly string GOOGLE_REDIRECTURL = 
                          "https://www.googleapis.com/plus/v1/people/me";
public static readonly string GOOGLE_REQUESTURL = 
                          "https://www.googleapis.com/oauth2/v2/userinfo"; 


googleBtn.Click += GoogleAuthentication;
private void GoogleAuthentication(object sender, EventArgs e)
{
       var auth = new OAuth2Authenticator
                  (
                    GOOGLE_ID,
                    GOOGLE_SCOPE,
                    new Uri(GOOGLE_AUTH),
                    new Uri(GOOGLE_REDIRECTURL)
                   );

         //Allowing user to cancel authentication if he want to..
         auth.AllowCancel = true;

         //Used to launch the corresponding social Login page
         StartActivity(auth.GetUI(this));

         //It will fire Once we are done with authentication
         auth.Completed += async (sender, e) =>
         {
            //Fires when authentication is cancelled
             if (!e.IsAuthenticated)
             {
                 //Authentication failed Do something
                 return;
              }
             //Make request to get the parameters access
             var request = new OAuth2Request
                           (
                              "GET",
                               new Uri(GOOGLE_REQUESTURL),
                               null, 
                               e.Account
                           );
             //Get response here
             var response = await request.GetResponseAsync();
             if (response != null)
             {
                //Get the user data here
                var userData = response.GetResponseText();
              }
         };
}

// you can find following readonly strings in Constants.cs file in the

//github project

// Pasted it here for ease of reference with the code

public static readonly string GOOGLE_ID =

"***********.apps.googleusercontent.com";

public static readonly string GOOGLE_SCOPE =

"https://www.googleapis.com/auth/userinfo.email";

public static readonly string GOOGLE_AUTH =

"https://accounts.google.com/o/oauth2/auth";

public static readonly string GOOGLE_REDIRECTURL =

"https://www.googleapis.com/plus/v1/people/me";

public static readonly string GOOGLE_REQUESTURL =

"https://www.googleapis.com/oauth2/v2/userinfo";

googleBtn.Click += GoogleAuthentication;

private void GoogleAuthentication(object sender, EventArgs e)

{

var auth = new OAuth2Authenticator

(

GOOGLE_ID,

GOOGLE_SCOPE,

new Uri(GOOGLE_AUTH),

new Uri(GOOGLE_REDIRECTURL)

);

//Allowing user to cancel authentication if he want to..

auth.AllowCancel = true;

//Used to launch the corresponding social Login page

StartActivity(auth.GetUI(this));

//It will fire Once we are done with authentication

auth.Completed += async (sender, e) =>

{

//Fires when authentication is cancelled

if (!e.IsAuthenticated)

{

//Authentication failed Do something

return;

}

//Make request to get the parameters access

var request = new OAuth2Request

(

"GET",

new Uri(GOOGLE_REQUESTURL),

null,

e.Account

);

//Get response here

var response = await request.GetResponseAsync();

if (response != null)

{

//Get the user data here

var userData = response.GetResponseText();

}

};

}

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

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

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

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

Service ID

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

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

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

Account account = new Account();
AccountStore.Create(this).Save(account, "Google");

1 2	Account account = new Account(); AccountStore.Create(this).Save(account, "Google");

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

var cache =  AccountStore.Create().FindAccountsForService("Google").FirstOrDefault();

1	var cache = AccountStore.Create().FindAccountsForService("Google").FirstOrDefault();

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

AccountStore.Create(this).Delete(cache, "Google");

1	AccountStore.Create(this).Delete(cache, "Google");

Итог

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

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

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

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

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

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

Xamarin Developers

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

Введение

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

Что такое oAuth?

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

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

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

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

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

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

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

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

Service ID

Итог

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

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

Related Posts

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