Здесь мы обсудим, как реализовать вход в Google с помощью собственного приложения Google+ на вашем Android или устройстве iOS в приложении Cordova / Phonegap.
Мы будем использовать официальный плагин для Cordova для входа в Google от Эдди Вербруггена (https://github.com/EddyVerbruggen/cordova-plugin-googleplus)
Настроить для общения с Google+
- Создайте консоль Google API.
- Для этого войдите на https://console.developers.google.com со своей учетной записью Gmail.
- В раскрывающемся списке проекта выберите существующий проект или создайте новый, выбрав Создать новый проект.
- На боковой панели в разделе «Диспетчер API» выберите Учетные данные, затем перейдите на вкладку Экран согласия OAuth.
- Выберите адрес электронной почты, укажите Название продукта и нажмите Сохранить.
- На вкладке Учетные данные выберите раскрывающийся список Создать учетные данные и выберите Идентификатор клиента OAuth.
- В разделе Тип приложения выберите Веб-приложение.
- В поле Авторизованные источники JavaScript введите источник для вашего приложения. Пример: http: // localhost: 8080.
- Поле URI авторизованного перенаправления не требует значения. Нажмите кнопку Создать.
- В открывшемся диалоговом окне клиента OAuth скопируйте идентификатор клиента. Идентификатор клиента позволяет вашему приложению получать доступ к включенным API Google.
- Перейдите в меню боковой панели библиотеки , перейдите в API Google+ - ›нажмите Включить.
- Для настройки Android сгенерируйте конфигурационный файл здесь. После включения входа в Google Google автоматически создаст необходимые учетные данные в консоли разработчика.
- Создайте файл конфигурации. Выберите имя проекта приложения, которое вы создали в консоли Google API, и имя вашего пакета Android будет идентификатором вашего виджета приложения (который находится в файле config.xml). Включите службу Google Plus и получите файл конфигурации.
- Нет необходимости добавлять сгенерированный файл google-services.json в ваш проект cordova.
- Для включения службы входа в 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>
Добавление функции входа в ваш код
- Добавьте в свой 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 с теми же параметрами, что и вход в систему, чтобы избежать любых возможных осложнений.
Спасибо за прочтение; Надеюсь, это вам поможет.