Мы использовали пакет Meteor Accounts-Password для регистрации новых пользователей в нашей системе с использованием адреса электронной почты, имени пользователя и пароля, но этот опыт регистрации требует немного времени, поскольку пользователю необходимо ввести данные, а затем проверить электронная почта и т. д.
Поэтому, когда мы начали работать над новым проектом, мы подумали о реализации механизма входа через Google, который значительно облегчит работу пользователя, поскольку для начала работы с системой требуется всего 2 нажатия кнопки, и мы можем получить пользователя. данные из профиля Google, поэтому пользователям не нужно вводить свои данные.
В этой истории я расскажу, как мы реализовали Google OAuth в Meteor.
Что такое Google OAuth
Во-первых, давайте разберемся, что такое система аутентификации Google или Oauth.
Google API используют протокол OAuth 2.0 для аутентификации и авторизации. Google поддерживает распространенные сценарии OAuth 2.0, например, для веб-сервера, клиентской части, установленных приложений и приложений с ограниченным вводом данных. — Платформа идентификации Google
По сути, это дает нам систему аутентификации, основанную на учетных записях Google. Поэтому, если мы реализуем OAuth API Google для аутентификации, это позволит нам получить некоторые основные сведения о вошедшем в систему пользователе и токен, который мы можем использовать для аутентификации пользователя на нашей платформе.
Используя этот механизм аутентификации, нам не нужно обрабатывать идентификацию пользователя и авторизацию на уровне нашего приложения; вместо этого эта часть будет регулироваться самим Google.
Проблемы при реализации
Приняв решение, я начал искать официальную документацию OAuth по аутентификации Meteor.
Но это не работает так, как ожидалось, поскольку документация устарела, и с тех пор многое изменилось. Поэтому я немного покопался здесь и там и наткнулся на множество проблем, поднятых другими инженерами, использующими Meteor, но нигде не мог найти правильного пути.
Вот некоторые из проблем:
В любом случае, затем мы попытались исправить проблемы, так как они возникали с нашей реализацией, и мы могли завершить работу от начала до конца после долгих головоломок.
Кроме того, ознакомьтесь с моим руководством по Meteor + Vue + Storybook, опубликованным в официальном издании Meteor.
Пошаговое руководство по реализации входа через Google в Meteor Js Framework
Для начала вам обязательно понадобится Meteor Project, и я использую его с версией:
meteor v2.7.3
Прежде всего, нам нужно установить пакет конфигурации службы, который необходим для сторонних входов в систему:
meteor add service-configuration Затем мы должны добавить пакет account-google для Google OAuth:
meteor add accounts-google
Вот версии пакетов, которые я сейчас использую:
[email protected] [email protected] [email protected]
У нас есть готовые пакеты, теперь нам нужно создать пользовательский интерфейс. Для этого ниже приведен очень простой код шаблона для экрана входа в систему в Vue js:
Если вы используете Blaze или любую другую среду пользовательского интерфейса, отличную от Vue, просто используйте приведенный ниже вызов метода для входа в систему —
Meteor.loginWithGoogle(err => {
if (!err) alert('Successfully Logged In');
else alert(err.reason || 'Unknown Error');
});
Еще одна очень важная вещь: нам нужно немного подождать, пока OAuth ServiceConfiguration загрузится в клиенте, поэтому строка:
configurationExists() {
return ServiceConfiguration.configurations.findOne({
service: 'google'
});
}
В приведенной выше строке мы создали вычисляемое свойство в компоненте Vue, которое проверяет, загружена ли ServiceConfiguration или нет, а затем в пользовательском интерфейсе кнопка отключена, а текст «Пожалуйста, подождите»:
<button
:disabled="loading || !configurationExists"
@click="login"
>
{{
( loading || !configurationExists ) ?
'Please wait' : 'Continue with Google'
}}
</button>
То же самое можно сделать в blaze, заключенном в обработчик шаблона, например:
Template.personalDetailsScreen.helpers({
configurationExists() {
return ServiceConfiguration.configurations.findOne({
service: 'google'
});
}
});
И в файле шаблона
{{#if configurationExists}}
<button
disabled="{{#if configurationExists}} disabled {{/if}}"
>
{{#if configurationExists}}
Please wait
{{else}}
Continue with Google
{{/if}}
</button>
{{/if}}
Но просто код пользовательского интерфейса не поможет, мы должны указать учетные данные Google OAuth для проекта.
Для этого нам нужно войти в Google Cloud Console, создать проект, а затем перейти на страницу Учетные данные и создать идентификатор клиента OAuth 2.0. Например, для приведенного ниже изображения мы создали его с именем project-eson-dev:
Кроме того, щелкните имя вновь созданного идентификатора клиента и добавьте авторизованные источники javascript и перенаправьте URI, как показано ниже (для локального тестирования):
После этого мы получим две вещи: Идентификатор клиента и Секретный ключ. Оба они очень особенные, и нам нужно сохранить их в файле settings.json нашего приложения, как показано ниже:
Теперь мы должны использовать эти две вещи в нашем приложении, чтобы иметь возможность войти в систему с помощью Google. Для этого мы будем обращаться к настройкам службы из main.js при запуске сервера приложений:
Теперь, когда мы пытаемся запустить его локально, и он работает правильно, и если мы развернем его на сервере, нам придется добавить домен в авторизованные источники javascript и авторизованные URI перенаправления.
Но один очень важный аспект Meteor JS заключается в том, что он также предоставляет нам приложения для смартфонов, и наша реализация не будет работать на смартфонах прямо сейчас. Чтобы заставить его работать, нам придется внести некоторые изменения.
Заставляем Meteor Google OAuth работать на Android
Наша веб-версия аутентификации Google работает правильно, теперь, чтобы она работала в приложении для Android, нам нужно создать еще один клиент для Android в облачной консоли Google.
Мы добавим имя пакета, которое у нас есть для нашего приложения, в mobile-config.js, и мы должны добавить отпечаток сертификата SHA-1 файла keystone, который мы использовали для создания apk приложения.
Теперь, несмотря на то, что в облаке Google есть команда, с помощью которой вы можете создать сертификат, не используйте ее, потому что она не будет работать.
Мы должны сгенерировать сертификат из Android Studio, как показано ниже:
Мы должны перейти к опции Gradle вашего проекта в студии Android, а затем (учитывая, что мы уже открыли наш проект в студии Android и в разделе сборки выбрано наше хранилище ключей), мы должны выполнить следующую команду:
gradle signingreport
Он будет обрабатываться в течение некоторого времени, а затем сгенерирует необходимый сертификат SHA-1, и мы сможем использовать его в нашем вновь созданном идентификаторе клиента Android в облачной консоли Google.
Вот и все; мы успешно реализовали регистрацию/вход в Google OAuth в нашем приложении.
Несколько очень полезных статей о Meteor JS от наших инженеров —
Удачного кодирования.
