Эта инструкция показывает, как с помощью методов SDK реализовать:

• регистрацию пользователя;
• запрос пользователем повторной отправки письма с подтверждением регистрации;
• авторизацию пользователя;
• сброс пароля пользователя.

Исходный код

Исходный код этих примеров приведен на GitHub.

Для аутентификации пользователя может использоваться имя пользователя или email-адрес. В приведенных ниже примерах применяется имя пользователя, а email-адрес используется для подтверждения регистрации пользователя и для сброса пароля.

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

Реализация регистрации пользователя

Создание виджета

1. В Content Browser создайте директорию UI. В контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя;
   • поле для ввода email-адреса пользователя;
   • поле для ввода пароля;
   • кнопка регистрации.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку повторной отправки письма.
2. В панели Details нажмите на значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK RegisterUser на объекте XsollaLoginSubsystem и добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова:
   • OnRegistered — вызывается в случае успешной регистрации пользователя;
   • OnError — вызывается в случае ошибки.

6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

Настройка письма о подтверждении регистрации

При успешной регистрации пользователю приложения отправляется письмо для подтверждения регистрации на указанный email-адрес. Вы можете кастомизировать письма для пользователей в Личном кабинете.

Если вы разрабатываете Android-приложение, настройте внешние ссылки, чтобы возвращать пользователя в приложение после подтверждения регистрации.

Реализация запроса повторной отправки письма с подтверждением регистрации

Создание виджета

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя или email-адреса;
   • кнопка повторной отправки письма.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку повторной отправки письма.
2. В панели Details нажмите на значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK ResendAccountConfirmationEmail на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnEmailResent и OnError.
6. Для отладки работы виджета запустите уровень.

При успешном запросе пользователю отправляется письмо для подтверждения регистрации на указанный при регистрации email-адрес.

Пример реализации обработки события:

Реализация авторизации пользователя

Создание виджета

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя;
   • поле для ввода пароля;
   • флажок для запоминания учетной записи;
   • кнопка авторизации.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browserr выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку авторизации.
2. В панели Details нажмите на значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK AuthenticateUser на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnAuthenticated и OnError.

6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

Реализация сброса пароля

Создание виджета

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя или email-адреса;
   • кнопка сброса пароля.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browserr выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку сброса пароля.
2. В панели Details нажмите на значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK ResetUserPassword на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnEmailSent и OnError.
6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

При успешном запросе сброса пароля пользователю отправляется письмо со ссылкой для изменения пароля. В Личном кабинете в настройках варианта авторизации (Общие настройки > URL > Callback URL) вы можете настроить URL-адрес, на который пользователь будет перенаправлен после успешной авторизации (аутентификации, подтверждения электронной почты или сброса пароля).

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

В отличие от аутентификации пользователя с помощью имени пользователя/email-адреса и пароля, реализация отдельной логики для регистрации пользователя не нужна. Если пользователь входит в систему впервые через аккаунт социальной сети, новая учетная запись создается автоматически.

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

• Зарегистрированный с помощью имени пользователя или email-адреса пользователь вошел в приложение через аккаунт социальной сети.
• Социальная сеть возвращает email-адрес.
• Email-адрес из социальной сети совпадает с email-адресом, указанными пользователем при регистрации в вашем приложении.

Исходный код

Исходный код этих примеров приведен на GitHub.

Примеры приведены для аутентификации пользователя с помощью аккаунта в Twitter, настройка других социальных сетей выполняется аналогично.

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

Создание виджета

1. В Content Browser создайте директорию UI.
2. В контекстном меню выберите пункт User Interface > Widget Blueprint.
3. В блупринте виджета добавьте кнопку для авторизации через социальную сеть.

На рисунке ниже приведен пример структуры страницы.

4. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
5. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку авторизации.
2. В панели Details нажмите на значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. Реализуйте открытие страницы авторизации во встроенном браузере:

1. 1. К ноде OnClicked привяжите вызов метода SDK GetSocialAuthenticationUrl на объекте XsollaLoginSubsystem. В параметр ProviderName передайте значение Twitter.
   2. Добавьте функции обратного вызова:
      • OnUrlReceived — вызывается, если успешно получен URL страницы авторизации. Полученный URL передается в параметре Url;
      • OnError — вызывается в случае ошибки.

5. Реализуйте авторизацию пользователя:
   1. Вызовите метод SDK LaunchSocialAuthentication на объекте XsollaLoginSubsystem.
   2. Передайте URL страницы авторизации.

6. Для получения токена отследите изменение URL страницы после успешной авторизации пользователя:
   1. Реализуйте закрытие браузера при успешной авторизации.
   2. Вызовите метод OnSocialAuthCompleted и подпишитесь на событие BrowserClosed.

Пример реализации обработки события: