Социальная аутентификация гибридного приложения: Google Dev Console и конфигурация Facebook

— Путаница с именами в консоли Google. Зачем нужна консоль разработчика Google.

— Настройка социальной аутентификации Google (облачная консоль)

— Настройте социальную аутентификацию Google (в мобильном приложении)

— Настроить Facebook Social Auth (в Facebook Developers)

— Настроить Facebook Social Auth (в мобильном приложении)

— Как создать хранилище ключей релиза.

Начнем

Неразбериха с именами в консоли Google Dev

На самом деле, возможно, есть путаница в именах, потому что есть консоль разработчика для API Google (https://console.developers.google.com) и консоль разработчика для разработчиков Play Store. (https://play.google.com/apps). Оба называют себя консолью разработчиков. Из-за этого Google изменил имя на свою платформу API, и теперь вы можете получить доступ к последнему имени под именем Google Cloud Console (https://console.cloud.google.com).

Почему консоль разработчика Google (API)?

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

На языке Google ваше приложение называется «Проект», и вы «создаете» (то есть регистрируете) свой проект в Google Cloud Console.

Настройте социальную аутентификацию Google: идентификатор клиента и идентификатор веб-клиента в облачной консоли

В этом уроке мы будем использовать новую консоль. https://console.cloud.google.com

1- Войдите в систему, создайте свой проект и перейдите к панели управления (приборной панели).

Приборная доска

2- Откройте боковую навигацию в левом верхнем углу и нажмите «Администрирование API». Затем нажмите «Учетные данные».

Экран учетных данных

3 — Добавить новый идентификатор клиента OAuth

4 — Полный тип приложения (Android), имя (my_android_release_client_id), SHA-1 из хранилища ключей выпуска и имя пакета мобильного приложения (fr.shopmycourses.www)

Получите SHA-1 из хранилища ключей выпуска, используя следующую команду:

keytool -exportcert -keystore [KEYSTORE_PATH] -list -v

5 — Обратите внимание на сгенерированный ClientId (вы также можете скачать json). Этот идентификатор необходим нативным компонентам (java) во время процесса аутентификации. Специально для IOS.

6. Теперь, чтобы заставить социальную аутентификацию Google работать в Android, нам нужно предоставить приложению идентификатор webClientId. Вернитесь назад и создайте второй идентификатор клиента OAuth, но на этот раз выберите Web.

7 — Наконец, обратите внимание на идентификатор веб-клиента или сохраните JSON (который содержит ключ).

Настройте Google Social Auth в мобильном приложении

Теперь у вас уже есть ClientId и Web Client Id для релизной версии мобильного приложения. Пришло время записать эти ключи в какие-нибудь файлы внутри проекта.

Идентификатор клиента требуется только в файле с именем config.xml.

Обычно этот файл существует только в корневой папке проекта, но с включением Adobe Phonegap Build в качестве дополнительного способа компиляции приложения мы клонируем файл (также модифицированный) и копируем в www/config.xml.

Поэтому откройте этот файл дважды, если это необходимо, и найдите следующий тег:

‹имя плагина="cordova-plugin-googleplus" spec="https://github.com/EddyVerbruggen/cordova-plugin-googleplus›

‹имя переменной=”REVERSED_CLIENT_ID” значение=”com.googleusercontent.apps.331970775169-qmmj5tm0lsjgsge30rpju7hmg1l8do621' /› ‹/plugin›

Обратите внимание: идентификатор клиента, предоставленный Google, необходимо поменять местами, как в приведенном выше примере.

Теперь давайте вставим webClientId.

Обычно вам нужно вставить webClientId в разные файлы в исходном коде javascript, но с последними внесенными изменениями мы перемещаем эти данные в один файл с именем config.json и расположенный в www/config.json. Этот файл загружается во время инициализации приложения.

Файл выглядит так:

{

«API_ENDPOINT»: «https://smc-dev-server.herokuapp.com/,

«GOOGLE_API_KEY»: «626641878895-g9cr85f6k0pkmduabpmnago4imn486sh.apps.googleusercontent.com»

}

Замените GOOGLE_API_KEY идентификатором веб-клиента выпуска.

Важное примечание: не отправляйте измененный файл config.json с производственными данными ни в какие репозитории git. Просто измените его для сборки релиза. Обычно он должен содержать только тестовую конфигурацию.

Это все для Гугла. Он должен работать нормально.

Настроить социальную аутентификацию Facebook

Чтобы настроить мобильное приложение для входа в систему с помощью facebook, сначала необходимо создать и настроить приложение в консоли разработчика facebook.

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

Теперь вы можете создать свое приложение или выбрать его. Сделайте это и перейдите к приборной панели.

Дашборды выглядят так:

На экране конфигурации прокрутите вниз и добавьте новую платформу (Android). Укажите имя вашего пакета и хранилище ключей SHA-1 HASH (sha-1 base64)

Чтобы получить хранилище ключей SHA-1 base64 (HASH), выполните следующие действия.

keytool -exportcert -псевдоним [KEYSTORE_ALIAS]-хранилище ключей [KEYSTORE_PATH]| openssl sha1-binary | база 64 OpenSSL

Настройте Facebook Social Auth в мобильном приложении

Вам необходимо вставить идентификатор идентификатора приложения Facebook (вы можете увидеть его непосредственно на панели инструментов приложения) в файл с именем config.xml.

Откройте файл дважды, если это необходимо, и найдите раздел

‹имя плагина=”cordova-plugin-facebook4 источник=”npm” спецификация=”1.7.3›

‹имя параметра=”APP_ID” значение=”XXXXXXXXXXXXX” /›

‹param name="APP_NAME" value="Shopmycourses" /›

‹/плагин›

Вставьте туда свой идентификатор приложения. Вы сделали!.

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

Чтобы сгенерировать хранилище ключей, вам нужно выполнить следующую команду. (Лучше на linux или с помощью эмулятора windows unix).

keytool -genkey -v -keystore [OUTPUT_PATH] -alias [ALIAS_NAME] -keyalg RSA -keysize 2048 -validity 90000

Пример хранилища ключей для выпуска shopmycourses:

keytool -genkey -v -keystore smc-release.keystore -alias smc-release -keyalg RSA -keysize 2048 -validity 90000

Совет. Назовите псевдоним именем файла, чтобы избежать путаницы.

Ответьте на заданные вопросы, введите yes для подтверждения и нажмите ENTER.

Совет. Нажмите ENTER, чтобы использовать тот же пароль, что и раньше, и избежать путаницы.

Не теряйте хранилище ключей.