Реализация входа в Google Plus с помощью OAuth 2.0 в Ionic 2
- Прежде чем мы начнем
- 1. Создайте новое приложение Ionic 2
- 2. Настройка iOS и Android
- 2.1 Настройка Google Sign-In для iOS
- 2.2 Настройка входа в Google для Android
- 3. Установка плагина Google Plus
- 4. Реализовать код аутентификации
- Резюме
Первоначально я планировал создать учебное пособие по интеграции приложения Ionic 2 с пользовательским Календарем Google, но потом подумал, что было бы целесообразно сначала рассказать об аутентификации в Google. Я столкнулся с несколькими проблемами, пытаясь запустить его и запустить, поэтому я хотел предоставить свое собственное пошаговое руководство по интеграции аутентификации с Google в приложение Ionic 2.
Если вы уже играли с OAuth в гибридных приложениях, возможно, вы привыкли использовать InAppBrowser для обработки этих запросов аутентификации. Общий процесс состоит в том, что вы запускаете какой-то URL-адрес в InAppBrowser, чтобы запустить процесс аутентификации, сервер, на который вы нажимаете, обрабатывает аутентификацию и перенаправляет браузер обратно в ваше приложение, а вы прослушиваете это перенаправление и получаете возвращенный токен. ,
С октября 2016 года Google начал блокировать запросы аутентификации, использующие этот метод. Вместо этого нам теперь нужно использовать родной плагин обрабатывать аутентификацию (которая была любезно создана суперзвездой Cordova Эдди Вербругген ). Хотя требуется немного конфигурации, конечный результат кажется гораздо более плавным и хорошо интегрированным.
В этом руководстве мы расскажем, как настроить базовую аутентификацию OAuth 2.0 с помощью Google в приложении Ionic 2. Мы рассмотрим пример для iOS, но мы также рассмотрим шаги, чтобы заставить его работать и на Android.
Прежде чем мы начнем
Прежде чем вы пройдете этот урок, вы должны иметь хотя бы базовое понимание концепций Ionic 2. На вашем компьютере также должен быть установлен Ionic 2.
Если вы уже не знакомы с Ionic 2, я рекомендую прочитать мой Ionic 2 Руководство для начинающих Сначала встать и запустить и понять основные понятия. Если вы хотите гораздо более подробное руководство по изучению Ionic 2, то взгляните на Создание мобильных приложений с Ionic 2 ,
1. Создайте новое приложение Ionic 2
Давайте начнем с создания нового приложения Ionic 2 с помощью следующей команды:
ionic start ionic2 -google -auth blank - v2
После завершения генерации вы должны сделать его текущим рабочим каталогом, выполнив следующую команду:
Мы собираемся реализовать очень простой пример для этого приложения, поэтому мы не будем требовать каких-либо дополнительных страниц или поставщиков. На следующем шаге нам нужно будет указать идентификатор пакета приложения. По умолчанию это будет некоторый общий идентификатор пакета Ionic Framework, подобный следующему:
<widget id = "com.ionicframework.ionic2googleoauth573066" version = "0.0.1" xmlns = "http://www.w3.org/ns/widgets" xmlns: cdv = "http://cordova.apache.org/ нс / 1,0 ">
если хотите, вы можете изменить это на что-то более подходящее для вашего приложения, например:
<widget id = "com.mycompany.somecoolapp" version = "0.0.1" xmlns = "http://www.w3.org/ns/widgets" xmlns: cdv = "http://cordova.apache.org/ нс / 1,0 ">
отредактировав файл config.xml . Важно, чтобы вы сделали это сейчас, потому что будет труднее изменить это позже.
2. Настройка iOS и Android
Прежде чем мы сможем запустить процесс аутентификации внутри приложения, нам нужно сначала немного настроить - это на самом деле самая сложная часть всего процесса.
2.1 Настройка Google Sign-In для iOS
Чтобы начать процесс установки iOS, вам необходимо иди сюда и создать новый проект.
Вы должны указать имя проекта и идентификатор пакета, который вы добавили в файл config.xml . После того, как вы создали проект, вы должны выбрать Включить вход в Google .
Затем вам нужно будет нажать « Создать файлы конфигурации» . Теперь вы сможете загрузить файл GoogleService-Info.plist , но вам не следует хранить его где-либо внутри вашего проекта. Это все, что нам нужно сделать сейчас.
2.2 Настройка входа в Google для Android
При редком изменении темпа настройка для Android на самом деле немного сложнее, чем для iOS. Нам нужно будет создать сертификат подписи (файл хранилища ключей) для приложения, а затем нам нужно будет сгенерировать отпечаток SHA-1 этого сертификата подписи, который нам нужно будет передать в консоль разработчика Google.
Чтобы создать файл хранилища ключей, вам нужно будет выполнить следующую команду:
keytool -genkey -v -keystore my-key.keystore -alias myalias -keyalg RSA -keysize 2048 -действительность 10000
Вы можете заменить my-key.keystore и myalias на что угодно. При запуске команды вам будет предложено ввести различные значения. Обязательно запомните свой пароль хранилища ключей и НЕ ПОТЕРЯЙТЕ ЕГО! Если вы потеряете файл хранилища ключей или пароль, вы не сможете обновить свое приложение в магазине приложений.
Получив файл хранилища ключей, вам нужно будет выполнить следующую команду, чтобы сгенерировать отпечаток SHA-1 :
keytool -exportcert -list -v \ -alias myalias -keystore my-key.keystore
ПРИМЕЧАНИЕ. Это создаст отпечаток сертификата DEBUG, что означает, что вы можете использовать его только для разработки. Пожалуйста иди Вот для команды для выпуска сертификата отпечатка пальца.
Как только вы запустите эту команду, вы увидите вывод, подобный этому:
Имя псевдонима: myalias Дата создания: 05.02.2017 Тип записи: PrivateKeyEntry Длина цепочки сертификатов: 1 Сертификат [1]: Владелец: CN = Неизвестно, OU = Неизвестно, O = Неизвестно, L = Неизвестно, ST = Неизвестно, C = Неизвестный эмитент: CN = Неизвестно, OU = Неизвестно, O = Неизвестно, L = Неизвестно, ST = Неизвестно, C = Неизвестно Серийный номер: 19909eb Действителен с: Вс. 05 февраля 12:26:55 ACDT 2017 до: Чт. 23 июня 11: 26:55 ACST 2044 Сертификаты отпечатков пальцев: MD5: **************************** SHA1: ********** ****************** SHA256: **************************** Алгоритм подписи имя: SHA256 с RSA версия: 3
Запишите значение SHA1 , поскольку это отпечаток, который нам нужно будет предоставить в консоли разработчика. Теперь вам просто нужно пройти тот же процесс, что и раньше для приложения iOS.
Вам нужно будет иди сюда настроить приложение Android. Убедитесь, что вы не создаете новый проект, а вместо этого используете существующий проект, который вы создали в настройке iOS. Вам также нужно будет предоставить отпечаток SHA1 (в поле, показанном ниже).
3. Установка плагина Google Plus
Теперь мы готовы установить плагин Cordova, необходимый для аутентификации, но перед этим важно сначала выполнить эту команду:
Это выполнит сборку для приложения в первый раз. Важно сделать это перед установкой плагина, потому что плагин настраивает разрешения для обмена ключами в iOS, и если вы еще не создали приложение, оно не будет работать правильно.
Для установки плагина вам нужно будет выполнить следующую команду:
добавить плагин cordova https://github.com/EddyVerbruggen/cordova-plugin-googleplus --variable REVERSED_CLIENT_ID = myreversedclientid
Вам нужно будет заменить myreversedclientid значением, полученным из консоли разработчика Google. Вам нужно будет иди сюда и затем перейдите к проекту, который вы создали ранее. Вам нужно будет перейти в раздел « Учетные данные » и нажать кнопку «Изменить» на идентификаторе клиента iOS . Откроется схема URL iOS , это значение, которое вы хотите использовать вместо myreversedclientid.
4. Реализовать код аутентификации
После того, как вы установили плагин, вам нужно будет реализовать код в вашем приложении Ionic 2. К счастью, это довольно просто!
Измените src / pages / home / home.ts, чтобы отразить следующее:
import {Component} из '@ angular / core'; import {NavController} из 'ионно-угловой'; импортировать {GooglePlus} из 'ionic-native'; @ Component ({selector: 'page-home', templateUrl: 'home.html'}) класс экспорта HomePage {constructor (public navCtrl: NavController) {} login () {GooglePlus. логин ({'webClientId': '*************************'}). then ((res) => {console. log (res);}, (err) => {console. log (err);}); } logout () {GooglePlus. выйти ( ) . then (() => {console. log («logged out»);}); }}
Это запустит процесс аутентификации через плагин. Вы можете найти webClientId в разделе « Учетные данные» в консоли разработчика Google (там же, где вы получили схему URL для iOS).
Наконец, нам просто нужно реализовать несколько кнопок для запуска процесса входа и выхода из системы:
<ion-header> <ion-navbar color = "danger"> <ion-title> Google GCal </ ion-title> </ ion-navbar> </ ion-header> <ion-content> <кнопка ion-button full (click) = "login ()"> Login </ button> <button ion-button full (click) = "logout ()"> Выход </ button> </ ion-content>
Теперь вы сможете запустить приложение (на устройстве, а не через браузер) и завершить процесс Google OAuth.
Резюме
Реализация этого собственного процесса OAuth немного более сложна, но конечный результат гораздо более удобен и гладок. После успешной аутентификации пользователя вы сможете получить доступ ко многим другим API Google (если вы добавили их и получили разрешение от пользователя). В следующем уроке я расскажу, как использовать некоторые из них (например, API Календаря Google).