Для чего нужна авторизация в игре через социальную сеть?
На этот вопрос довольно просто ответить. С каждым годом технологии развиваются всё стремительнее, это касается и интернета. Интернет позволяет хранить множество информации и обрабатывать её "партией" на устройстве значительно проще. Кроме этого в 2018 году распространен такой термин, как многоплатформенность.
Многоплатформенность — это способность программы работать под управлением различных операционных систем.
Проще говоря, авторизация через социальную сеть позволит игрокам играть на разных платформах, будь то десктопная игра или мобильная. Кроме этого, это значительно упрощает процесс регистраций, который большинство пользователей считают рутинным.
Алгоритм авторизации через социальную сеть.
Для начала я бы хотел, чтобы вы поняли, как происходит авторизация через социальную сеть. Алгоритм достаточно прост.
- Пользователь нажимает кнопочку "Авторизация через социальную сеть";
- Подтверждает доступ к данным своей страницы;
- Программа получает данные и обрабатывает их.
В нашем примере авторизация будет проходить в три этапа. В первую очередь мы будем вызывать браузер. Браузер будет загружать нужную нам страницу на сервере. после прохождения авторизации Unity получит эти данные и с ними можно делать всё что угодно (сохранить локально или же отправить в базу данных на сервер).
И так, преступим.
Встраиваем нативный браузер.
Здесь всё просто, можно пойти трудным путём и создать собственный плагин для Unity или же посмотреть, что есть в AssetStore. Я как самый ленивый человек на планете выбираю достаточно простое решение и иду в AssetStore.
Из всего перечня что был в магазине, я выбрал In App Web Browser. Его стоимость составляет 5$. Но мир не без хороших людей, поэтому его можно свободно найти в сети. Покупать или пиратить решать вам, лично я за то, чтобы купить.
Как заявляет разработчик данное чуда работает и на Android и на IOS. Я же лично проверил работу только на Android.
После того как вы импортируете unitypackage то в Project'е увидите нечто следующее:
В плагине есть несколько демо-сцен а так же документация по данному браузеру.
Следующим шагом станет выбор сервера. Объясню для чего это нужно. Поскольку Unity Вконтакте это социальная сеть и находиться она непосредственно на удалённых серверах, нам необходимо будет обрабатывать некоторые запросы в php файле, то есть на сервере.
Здесь можно выбрать абсолютно любой бесплатный хостинг, который существует в интернете, я же выбрал вот этот: 000webhost.
После того как проходите авторизацию/регистрацию и получаете доступ к FTP, можно переходить к следующему пункту.
Стоп, нельзя. Забыл сказать, что я бы настоятельно рекомендовал ознакомиться с документацией Вконтакте.
Делаем регистрацию в игре через социальную сеть ВКонтакте.
Для начала перейдём на сцену "ExampleJavaScriptCommunicationScene", которая находиться в плагине.
Данная сцена содержит в себе две кнопки открыть браузер и очистить кэш. Скрипт, который обрабатывает открытие браузера и загрузку страницы, скрипт, который обрабатывает event события нативного браузера, в данном случае ответ от страницы и скрипт, который собственно принимает эти самые ответы.
Создадим свой собственный скрипт, я назову его SocialManager. Суть данного скрипта будет заключаться в том, чтобы открыть браузер с нужной нам страницей и нужными нам настройками браузера, которые вы можете посмотреть в документации.
И так, скрипт:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class SocialManager : MonoBehaviour
{
[Header("Настройки для авторизации Вконтакте")]
[SerializeField]
private string vkID = "6663517"; // ID приложения (указываете своё)
[SerializeField]
private string vkRedirectURL = "https://landaxer.000webhostapp.com/social/vk/vk.php"; // ссылка на перенаправленную страницу
[Header("Настройки для браузера")]
[SerializeField]
private bool displayURLAsPageTitle = false;
[SerializeField]
private string pageTitle = "Авторизация";
[SerializeField]
private string barBackgroundColor = "#FF2C2C";
[SerializeField]
private string textColor = "#FFFFFF";
private string urlLogin = "";
private InAppBrowser.DisplayOptions optionsBrowser;
void Start () { // собираем ссылку для авторизации в вк
urlLogin = "https://oauth.vk.com/authorize?client_id=" + vkID + "&display=page&redirect_uri=" + vkRedirectURL + "&response_type=code&v=5.52";
optionsBrowser = new InAppBrowser.DisplayOptions();
optionsBrowser.displayURLAsPageTitle = displayURLAsPageTitle;
optionsBrowser.pageTitle = pageTitle;
optionsBrowser.barBackgroundColor = barBackgroundColor;
optionsBrowser.textColor = textColor;
}
public void OnVKontakte()
{
InAppBrowser.OpenURL(urlLogin, optionsBrowser);
}
}Разберёмся что здесь происходит. В первую очередь мы задаём ID приложения в контакте, как это сделать, описано ниже. Далее задаётся переменная, в которой указана ссылка на страницу, на которую будет перенаправлен наш пользователь после успешной авторизации. Эта самая страница и вернёт там ответ в Unity.
Следующие переменные необходимы для настройки браузера:
- displayURLAsPageTitle - отображение адреса загружаемой страницы
- pageTitle - название браузера
- barBackgroundColor - фон верхней панели у браузера
- textColor - цвет текста в верхней панели браузера
- urlLogin - переменная для хранения адреса, который будет открываться в нативном браузере.
Далее функция старта. В ней собирается строка авторизации, состоящая из постоянной страницы и параметров ID приложения и ссылки перенаправления. Так же здесь происходит применение настроек для браузера.
Функция OnVKontakte вызывает нативыный браузер и открывает в нём страницу авторизации в социальной сети Вконтакте.
Перейдём к настройке сцены.
На сцене существует кнопка, изображение, и текст. В изображение у нас будет загружаться фотография профиля, в текст имя и фамилия пользователя, а кнопка будет вызывать открытие браузера. Не забудьте указать для кнопки на событие нажатия метод OnVKontakte() из скрипта SocialManager.
Создание приложение ВКонтакте.
На тему как создать приложение в контакте существует невероятно огромное количество статей и методов, но, чтобы вам не отвлекаться от чтения данной статьи, расскажу вам как это делается.
Необходимо перейти по ссылке: API VK
Далее перейти в пункт "Мои приложения".
Далее "Создать новое приложение".
Указать название приложения, выбрать платформу "Веб-сайт", ввести адрес вашего сайта, а лучше странички, на которую будет происходить перенаправление после регистрации, и указать домен сайта.
Подтверждаем создание приложения путём подтверждения через смс.
Вводим пришедший код на телефон.
И наше тестовое приложение создано.
Теперь нужно перейти в "Настройки" и записать на листочек некоторое параметры, которые нам понадобятся в последующем. Записываем или запоминаем ID приложения, а также Защищённый ключ. не забудьте в Unity указать ID приложения.
Для полной работы авторизации осталось сделать несколько шагов.
Пишем скрипт для обработки данных Вконтакте.
Открываем любой редактор, позволяющий работать с текстовыми файлами. И прописываем следующий код:
<?php
$appID = ""; // ID приложения (указываем свой)
$redirectURL = ""; // ссылка на редирект (указываем свою)
$appSecret = ""; // секретный ключ (указываем свой)
// собираем ссылку
$url_token = "https://oauth.vk.com/access_token?client_id=" . $appID . "&redirect_uri=" . $redirectURL . "&client_secret=" . $appSecret . "&code=" . $_GET['code'];
$token = file_get_contents($url_token); // получаем токен
if ($token) { // если получили токен
$data_access_token = explode("access_token", $token); // делим полученный ответ
$access_token = ""; // собираем токен
for ($i = 0; $i < strlen($data_access_token[1]); $i++) {
if ($data_access_token[1][$i] != '"') {
$access_token = $access_token . $data_access_token[1][$i];
} else
break;
}
$data_userid = explode("user_id", $token); // получаем клиента
$userId = ""; // создаём клиента
for ($i = 2; $i < strlen($data_userid[1]); $i++) {
if ($data_userid[1][$i] != '}') { //
$userId = $userId . $data_userid[1][$i];
} else
break;
}
// собираем строку
$url_data = "https://api.vk.com/method/users.get?user_id=" . $userId . "&access_token=" . $access_token . "&fields=uid,first_name,last_name,bdate,country,city,contacts,sex,photo_big&v=5.52";
$data = file_get_contents($url_data); // получаем данные о клиенте
}
?>
<html>
<head>
<script>
// скрипт для отправки данных в Unity
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
function isIOS() {
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return true;
} else {
return false;
}
}
function isAndroid() {
return (/android/i.test(userAgent));
}
function appendIframeWithURL(url) {
var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", url);
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
}
function sendMessageToUnity(message) {
if (isIOS()) {
appendIframeWithURL('inappbrowserbridge://' + message);
} else if (isAndroid()){
UnityInAppBrowser.sendMessageFromJS(message);
}
}
<?php
echo "
sendPing();
function sendPing() {
sendMessageToUnity('" . $data . "');
}";
?>
</script>
</head>
<body>
</body>
</html> Не забудьте указать $appID, $redirectURL, $appSecret иначе ничего не будет работать. Немного разберёмся что здесь происходит. Первым делом мы получаем токен и код от страницы пользователя который проходит авторизацию, после чего происходит получение нужных нам данных. И последним шагом становиться отправка этих самых данных обратно в приложение.
Не забудьте залить скрипт на сервер и указать на него ссылку в приложении.
Возвращаемся к приложению и пишем ещё один скрипт, который будет принимать данные от php скрипта. Я назову его JSExecute.
Код данного крипта:
using UnityEngine;
using System.Collections;
using Network.Helpers;
using UnityEngine.UI;
using Social.Entites;
using System.Collections.Generic;
public class JSExecute : MonoBehaviour {
void Start() {
InAppBrowserBridge bridge = FindObjectOfType<InAppBrowserBridge>();
bridge.onJSCallback.AddListener(OnMessageFromJS);
}
void OnMessageFromJS(string jsMessage)
{
Debug.Log(jsMessage);
}
}JSExecute необходимо разместить следующим образом:
Если вы всё правильно сделали, то после того как сбилдите и запустите приложение, по нажатию на кнопку у вас откроется нативный браузер и попросит вас авторизоваться Вконтакте для приложения. После того как авторизация будет пройдена. В функцию OnMessageFromJS вернётся Json данных. Который отобразиться в console Unity. Если же у вас что-то не получилось, рекомендую вам перейти к началу статьи =)
Автор статьи: Александр Каримов.