Здесь мы обсудим, как реализовать вход в Google с помощью собственного приложения Google+ на вашем Android или устройстве iOS в приложении Cordova / Phonegap.

Мы будем использовать официальный плагин для Cordova для входа в Google от Эдди Вербруггена (https://github.com/EddyVerbruggen/cordova-plugin-googleplus)

Настроить для общения с Google+

  1. Создайте консоль Google API.
  2. Для этого войдите на https://console.developers.google.com со своей учетной записью Gmail.
  3. В раскрывающемся списке проекта выберите существующий проект или создайте новый, выбрав Создать новый проект.
  4. На боковой панели в разделе «Диспетчер API» выберите Учетные данные, затем перейдите на вкладку Экран согласия OAuth.
  5. Выберите адрес электронной почты, укажите Название продукта и нажмите Сохранить.
  6. На вкладке Учетные данные выберите раскрывающийся список Создать учетные данные и выберите Идентификатор клиента OAuth.
  7. В разделе Тип приложения выберите Веб-приложение.
  8. В поле Авторизованные источники JavaScript введите источник для вашего приложения. Пример: http: // localhost: 8080.
  9. Поле URI авторизованного перенаправления не требует значения. Нажмите кнопку Создать.
  10. В открывшемся диалоговом окне клиента OAuth скопируйте идентификатор клиента. Идентификатор клиента позволяет вашему приложению получать доступ к включенным API Google.
  11. Перейдите в меню боковой панели библиотеки , перейдите в API Google+ - ›нажмите Включить.
  12. Для настройки Android сгенерируйте конфигурационный файл здесь. После включения входа в Google Google автоматически создаст необходимые учетные данные в консоли разработчика.
  13. Создайте файл конфигурации. Выберите имя проекта приложения, которое вы создали в консоли Google API, и имя вашего пакета Android будет идентификатором вашего виджета приложения (который находится в файле config.xml). Включите службу Google Plus и получите файл конфигурации.
  14. Нет необходимости добавлять сгенерированный файл google-services.json в ваш проект cordova.
  15. Для включения службы входа в Google Plus вам понадобится ключ SHA 1, который вы получите, просто выполнив эту команду:
For MAC/Linux :
$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list –v
Enter keystore password: Type "android" if using debug.keystore
For Windows , run this command :
$ keytool -exportcert -list -v \ -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

14. Вы получите свой SHA-ключ, и вы успешно включили Google Sign in.

15. На шаге выше, о keytool, показаны 2 типа отпечатков сертификатов, Release и Debug, при создании файла конфигурации лучше использовать отпечаток сертификата Debug, после этого вам необходимо перейдите в Диспетчер учетных данных Google и вручную создайте учетные данные для клиента OAuth2 с помощью отпечатка вашего сертификата выпуска. Это необходимо для того, чтобы ваше приложение работало как в разрабатываемой, так и в производственной версиях.

16. Убедитесь, что вы используете правильный псевдоним при создании отпечатка пальца.

Установите плагин в свой проект Cordova

После того, как вы выполнили все указанные выше настройки, пора установить плагин в ваше приложение. Выполните следующие действия, чтобы сделать это СОВЕРШЕННО:

Используя Cordova CLI и npm:

$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid
$ cordova prepare

Использование Cordova CLI для получения последней версии с GitHub:

$ cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid
$ cordova prepare

ВАЖНЫЙ:

  • Вам необходимо заменить myreversedclientid на обратное значение идентификатора клиента в ваших учетных данных выпуска, созданных в Консоли разработчика Google, это будет: 'com.googleusercontent.apps.uniqueId', без кавычек.

Установка (сборка PhoneGap)

Добавьте это в свой config.xml:

Для версии NPM:

<gap:plugin name="cordova-plugin-googleplus" source="npm">
  <param name="REVERSED_CLIENT_ID" value="myreversedclientid" />
</gap:plugin>

Для версии Git:

<gap:plugin spec="https://github.com/EddyVerbruggen/cordova-plugin-googleplus.git" source="git">
    <param name="REVERSED_CLIENT_ID" value="myreversedclientid" />
</gap:plugin>

Добавление функции входа в ваш код

  1. Добавьте в свой HTML кнопку, которая вызывает следующую функцию
window.plugins.googleplus.login(
    {
      'scopes': '... ', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
      'webClientId': 'client id of the web app/server side', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
      'offline': true, // optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
    },
    function (obj) {
      alert(JSON.stringify(obj)); // do something useful instead of alerting
    },
    function (msg) {
      alert('error: ' + msg);
    }
);

Обратный вызов успеха (второй аргумент) получает объект JSON со следующим содержимым с примерами данных моей учетной записи Google:

obj.email          // '[email protected]'
obj.userId         // user id
obj.displayName    // 'Test User'
obj.familyName     // 'User'
obj.givenName      // 'Test'
obj.imageUrl       // 'http://link-to-my-profilepic.google.com'
obj.idToken        // idToken that can be exchanged to verify user identity.
obj.serverAuthCode // Auth code that can be exchanged for an access token and refresh token for offline access
obj.accessToken    // OAuth2 access token

В Android обратный вызов ошибки (третий аргумент) получает код состояния ошибки, если аутентификация не была успешной. Описание этих кодов состояния можно найти на веб-сайте разработчика Android Google по адресу GoogleSignInStatusCodes.

В iOS обратный вызов ошибки будет включать NSError localizedDescription.

Попробуйте тихий вход

Вы можете позвонить trySilentLogin, чтобы проверить, вошли ли они уже в приложение, и беззвучно выполнить вход, если они есть.

Если это удастся, вы получите тот же объект, что и функция login, но если это не удастся, она не покажет пользователю диалоговое окно аутентификации.

Вызов trySilentLogin выполняется так же, как login, за исключением имени функции.

window.plugins.googleplus.trySilentLogin(
    {
      'scopes': '... ', // optional - space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
      'webClientId': 'client id of the web app/server side', // optional - clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
      'offline': true, // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
    },
    function (obj) {
      alert(JSON.stringify(obj)); // do something useful instead of alerting
    },
    function (msg) {
      alert('error: ' + msg);
    }
);

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

Спасибо за прочтение; Надеюсь, это вам поможет.