Представим, что у вас есть веб-сайт или вы хотите использовать общедоступный API, и вы хотите разработать новое настольное приложение на основе Electron (хорошо, в наши дни в этом нет ничего оригинального…). Один из самых простых способов аутентификации пользователя на Веб-сайте - использовать рабочий процесс OAuth, если Веб-сайт является поставщиком OAuth. Если нет, то это отдельная история, но, чтобы повеселиться, в этой статье показано, как реализовать весь этот OAuth-материал на стороне приложения Electron. Он использует GitHub в качестве провайдера OAuth (ведь мы же разработчики). Конечно, его можно обновить, чтобы он соответствовал вашему любимому провайдеру OAuth.

Давайте теперь поиграем с Electron (и с Vue.js, но об этом будет в другой статье). Я не буду вдаваться в подробности о том, что такое Electron или OAuth (ну, на самом деле, немного), потому что об этом много говорится в Интернете.
Наша цель здесь - иметь возможность аутентифицировать пользователя на GitHub из настольного приложения, не предоставляя и не сохраняя учетные данные в самом приложении. В стандартных веб-приложениях, когда пользователь щелкает знаменитый Войти с помощью XXX, запускается рабочий процесс, открывающий новую веб-страницу, чтобы пользователь разрешил веб-приложению доступ к своим данным или нет. Затем происходит несколько обменов между веб-приложением и поставщиком OAuth, в результате чего создается токен. Затем этот токен может использоваться веб-приложением для выполнения вызовов API (HTTP). Когда провайдер обрабатывает запросы, он знает, кто их выполняет, и ему больше не нужно запрашивать пользователя или пароль, пока не истечет срок действия токена.

Фактически, это то же самое, что будет происходить в нашем настольном приложении Electron: когда пользователь нажимает кнопку входа в систему, открывается новое окно с запросом учетных данных, запросом авторизации для доступа к пользовательским данным, тогда все обмены будут выполнены. в фоновом режиме без необходимости иметь дело ни с чем, кроме получения токена в конце.

На стороне средства визуализации, когда пользователь нажимает кнопку Login with GitHubbutton, мы должны отправить событие в основной процесс с помощью модуля ipcRenderermodule.

На стороне основного процесса мы будем использовать модуль chamerling / electronics-oauth2 (который является форком mawie81 / electronics-oauth2, ожидающим слияния PR). Этот модуль создает новое BrowserWindow, отображает данные OAuth, обрабатывает все обмены и разрешает с помощью токена.

В приведенном выше фрагменте кода функция githubAuth.getAccessToken вызывается из события, полученного прослушивателем ipcMainevent. ipcMainmodule используется для асинхронной связи между основным процессом и процессами рендеринга. Этот вызов откроет новое окно BrowserWindow, ориентированное на страницу аутентификации Github. Как только пользователь аутентифицируется как обычно на GitHub, он закроется и отправит обратно токен в качестве результата обещания. Затем это зависит от вашего приложения, но в текущем случае токен отправляется обратно в процесс браузера и сохраняется в localStorage в конце.

В следующем фрагменте показано, как это делается в приложении с помощью Vuex, модуля управления состоянием Vue.js.

В приведенном выше фрагменте мы получаем токен от github-oauth-replyevent, фиксируем его в хранилище Vuex, а затем отправляем getUseraction, который вызовет API пользователя GitHub для получения информации о текущем пользователе. На данный момент он не делает ничего, кроме обновления заголовка приложения, устанавливая текущий аватар пользователя, но я почти уверен, что вы чувствуете всю мощь.

Если вы хотите поиграть с ним, клонируйте репозиторий https://github.com/chamerling/electron-oauth-github-vue.

git clone https://github.com/chamerling/electron-oauth-github-vue.git

Затем вам нужно будет создать собственное приложение OAuth на GitHub. Перейдите на страницу приложений GitHub OAuth в настройках разработчика, затем создайте новое приложение, нажав Зарегистрировать новое приложение, заполните поля и обязательно установите http: // localhost в качестве URL-адреса обратного вызова авторизации.

Вы должны увидеть страницу своего нового приложения с вашими «Идентификатором клиента» и «Секретом клиента». Скопируйте и вставьте значения в main/config.jsfile

Затем вам «просто» нужно установить все зависимости и запустить приложение, чтобы оно было таким же, как на видео вверху:

yarn # or npm install
./node_modules/.bin/electron . # or npm start

В следующей статье я более подробно расскажу о том, как играть с потрясающим фреймворком Vue.js. В ожидании, если вы хотите повеселиться на работе, приходите поработать с нами, мы также делаем приложение Electron и многое другое: ознакомьтесь с нашими предложениями о работе на https://jobs.linagora.com, напишите нам строчку в Twitter, Facebook или отправьте вопрос на GitHub.

(Вы также можете нажать на этот красивый значок ❤️ ниже, оставить комментарии и т. Д.)