Я хочу аутентифицировать свое приложение Vue.js в API Календаря Google.
Я могу легко подключиться к API с примером кода в https://developers.google.com/calendar/quickstart/js, как показано здесь:
<!DOCTYPE html>
Google Calendar API Quickstart
Google Calendar API Quickstart
<!--Add buttons to initiate auth sequence and sign out-->
// Идентификатор клиента и ключ API из консоли разработчика
var CLIENT_ID = '';
var API_KEY = '';
// Массив URL-адресов документов для обнаружения API для API, используемых при быстром запуске
var DISCOVERY_DOCS = ["
https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
// Области авторизации, требуемые API; несколько областей могут быть
// включено, разделено пробелами.
var SCOPES = "
https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton = document.getElementById ('authorize_button');
var signoutButton = document.getElementById ('signout_button');
/ **
* При загрузке вызывается для загрузки библиотеки auth2 и клиентской библиотеки API.
* /
function handleClientLoad () {
gapi.load ('client: auth2', initClient);
}
/ **
* Инициализирует клиентскую библиотеку API и устанавливает состояние входа
* слушатели.
* /
function initClient () {
gapi.client.init ({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
область применения: ОБЛАСТИ ПРИМЕНЕНИЯ
}). then (function () {
// Прослушивание изменений состояния входа.
. Gapi.auth2.getAuthInstance () isSignedIn.listen (updateSigninStatus);
// Обработка начального состояния входа.
updateSigninStatus (gapi.auth2.getAuthInstance () isSignedIn.get ().);
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, функция (ошибка) {
appendPre (JSON.stringify (error, null, 2));
});
}
/ **
* Вызывается при изменении статуса входа в систему для обновления пользовательского интерфейса.
* соответственно. После входа вызывается API.
* /
function updateSigninStatus (isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listUpcomingEvents ();
} еще {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/ **
* Войдите в систему после нажатия кнопки.
* /
function handleAuthClick (event) {
. Gapi.auth2.getAuthInstance () зарегистрировались ();
}
/ **
* Выход пользователя после нажатия кнопки.
* /
function handleSignoutClick (event) {
. Gapi.auth2.getAuthInstance () SignOut ();
}
/ **
* Добавить элемент pre к телу, содержащему данное сообщение
* как его текстовый узел. Используется для отображения результатов вызова API.
*
* @param {string} message Текст для размещения в предварительном элементе.
* /
function appendPre (message) {
var pre = document.getElementById ('content');
var textContent = document.createTextNode (message + '\ n');
pre.appendChild (TextContent);
}
/ **
* Распечатайте сводку и начните дату / время следующих десяти событий в
* календарь авторизованного пользователя. Если события не найдены,
* соответствующее сообщение напечатано.
* /
function listUpcomingEvents () {
gapi.client.calendar.events.list ({
'calendarId': 'primary',
'timeMin': (new Date ()). toISOString (),
'showDeleted': ложь,
'singleEvents': правда,
'maxResults': 10,
'orderBy': 'startTime'
}). then (function (response) {
var events = response.result.items;
appendPre ('Предстоящие события:');
if (events.length> 0) {
for (i = 0; i
Моя проблема в том, что я хочу, чтобы пользователи оставались аутентифицированными даже после истечения срока действия токена доступа. Я предполагаю, что должен запросить токены доступа и обновления на стороне сервера, используя googleapis (https://www.npmjs.com/package/googleapis) вместо сценария, показанного выше.
Итак, на стороне клиента я хочу отправить запрос на конечную точку моего сервера /authenticate-google-api, где я запускаю этот код:
const {google} = require('googleapis');
const oauth2Client = new google.auth.OAuth2(
YOUR_CLIENT_ID,
YOUR_CLIENT_SECRET,
YOUR_REDIRECT_URL
);
// Generate a url that asks permissions for Google Calendar scopes
const url = oauth2Client.generateAuthUrl({
access_type: 'offline',
scope: 'https://www.googleapis.com/auth/calendar'
});
Затем я верну URL-адрес клиенту, чтобы я мог отправить пользователя по правильному URL-адресу, где он / она может дать согласие на область действия в браузере.
Получив согласие, я хочу, чтобы пользователь отправил обратно code, созданный Google, когда пользователь дает согласие. На стороне сервера я могу обмениваться code с набором доступа и обновлять токены, используя этот скрипт:
const {tokens} = await oauth2Client.getToken(code)
Два токена будут храниться в базе данных, поэтому я всегда могу получить их для пользователя на тот случай, если мне понадобится сгенерировать новый токен доступа из токена обновления.
Однако я сталкиваюсь с некоторыми проблемами. Я хочу отправить пользователя на клиентскую сторону вместо того, чтобы отправлять его на серверную сторону и тем самым выставлять пользователю API. Кроме того, кажется, что библиотека автоматически генерирует новые маркеры обновления, поэтому я не знаю, как это сделать с помощью комбинации приложения Vue.js и серверного API.
Может ли кто-нибудь позволить мне в правильном направлении? Могу ли я получить токены обновления на стороне клиента и просто отправить их в API, чтобы они могли быть сохранены в базе данных? Я не могу найти какие-либо учебные пособия о том, как заставить клиентскую и серверную стороны работать вместе, чтобы гарантировать, что пользователи всегда проходят аутентификацию.
Я видел множество веб-сайтов, постоянно подключенных к Google API на уровне аккаунта, поэтому это должно быть относительно просто, но я просто не могу заставить его работать.