Как должна работать интеграция VK ID в SPA в описанном случае?

Question

[Vocler]

Пытаясь интегрировать вход по VK ID в своё приложение затупил на казалось бы очевидном действии.

У меня есть SPA приложение (здесь и далее - фронтенд).
Есть серверное приложение (здесь и далее - бекенд).

Сейчас аутентификация реализована следующим образом: после того как пользователь вводит в форму свои данные и нажимает кнопку "Login" SPA из JS кода (при помощи fetch()) отправляет эту информацию на эндпоинт бекенда и получает в ответ Bearer token. Далее SPA добавляет этот токен в хедер каждого запроса.

Я хочу интегрировать VK ID в своё приложение что-бы пользователи могли входить в него через ВК.

Судя по доке VK ID работает следующим образом:

1. Я создаю в VK своё приложение, указываю там домен моего сайта и Redirect URI для переадресации после успешного логина.
Допустим в моём случае это mysite.com/redirect
2. Я подключаю JS-библиотеку с VK ID и указываю где отрендерить кнопку "Войти через ВК"
3. Пользователь кликает на кнопку и его переадресовывает на страницу логина ВК.
4. Он вводит свои данные и если они верные ВК переадресовывает его на Redirect URI (mysite.com/redirect) с silent token в GET параметрах.
5. Бекенд принимает коннект на Redirect URI, использует silent token для получения access token, производит необходимые манипуляции с таблицей пользователей (В контексте вопроса это не особо важно) и... Что дальше? Что должен возвращать mysite.com/redirect пользователю?

Вопрос глупый, но раньше при разработке SPA я всегда отправлял запрос аутентификации из JS скриптов и никуда пользователя не редиректил, поэтому не знаю как будет поступить правильно в моём случае.

Диаграмма запросов что-бы было проще понять о чём я говорю:

sequenceDiagram
    User->>+mysite.com: GET mysite.com/auth (запрашивает страницу логина);
    mysite.com-->>-User: 200 OK (возвращает страницу логина где есть кнопка "Войти через VK ID");
    User->>+id.vk.com: GET id.vk.com (Пользователь нажимает на кнопку и открывает страницу логина VK ID);
    id.vk.com-->>-User: 200 OK (ВК возвращает страницу с формой логина)
    User->>+id.vk.com: POST id.vk.com (пользователь логинится);
    id.vk.com-->>-User: 301 mysite.com/redirect (ВК редиректит на страницу моего сайта которую я указал для редиректа)
    User->>+mysite.com: GET mysite.com/redirect (Браузер пользователя автоматически переходит на эту страницу);
    mysite.com-->>-User: ??? Что отдавать пользователю?;

Answer 1

[Василий Банников]

Что должен возвращать mysite.com/redirect пользователю?

Тот же самый токен, который бы твой сайт вернул при обычной аутентификации и отправить пользователя дальше

Comments

[Vocler]

Тот же самый токен

Если mysite.com/redirect просто вернёт токен то пользователь просто увидит перед собой этот самый токен и всё:


Это очевидно не то чего я хочу. Я хочу что-бы после логина пользователь увидел перед собой приложение.

при обычной аутентификации

При обычной аутентификации я из JS скрипта отправляю запрос на получение токена, бекенд возвращает этот токен и я могу в том-же самом JS скрипте обработать полученный ответ. А в случае с VK ID я перенаправляю сам браузер пользователя на путь mysite.com/redirect.

Я коряво объяснил разницу потому что не знаю как с терминологической точки зрения правильно описать различие между запросом который отправляется из скрипта через fetch() и запросом который отправляет браузер при переходе на какую-либо страницу.

и отправить пользователя дальше

Насколько я знаю протокол HTTP не позволяет мне отправить ответ "Вернуть данные и перенаправить". Можно вернуть либо редирект с кодом 301 либо данные, но не данные с редиректом.

[Василий Банников]

Vocler,

Если mysite.com/redirect просто вернёт токен то пользователь просто увидит перед собой этот самый токен и всё:

А Set-Cookie с последующим редиректом тебе на что?

Насколько я знаю протокол HTTP не позволяет мне отправить ответ "Вернуть данные и перенаправить". Можно вернуть либо редирект с кодом 301 либо данные, но не данные с редиректом.

1. 301 тут будет не корректным.
2. А кто тебе запрещает отдать в ответе страничку с сообщением типа "аутентификация прошла успешно" с последующим редиректом через js?

[Vocler]

Василий Банников, Спасибо, про куки я забыл. Сделал передачу токена через них.

А кто тебе запрещает отдать в ответе страничку с сообщением типа "аутентификация прошла успешно" с последующим редиректом через js?

JS-страница для редиректа показалась мне лишней поэтому я просто возвращаю 302 код с заголовком `Set-cookie`:

HTTP/1.1 302
Server: nginx/1.23.2
Date: Wed, 20 Mar 2024 18:48:06 GMT
Content-Length: 0
Connection: keep-alive
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Set-Cookie: BearerToken=*ТУТ ТОКЕН*; Path=/
Location: /
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY

Answer 2

[Валентин Бируля]

Еще как вариант редиректить пользователя с QUERY параметром

Наипростейшая реализация на GO

func YandexRedirectHandler(w http.ResponseWriter, r *http.Request) {
	url := configs.OauthConfig.AuthCodeURL("state", oauth2.AccessTypeOffline)
	http.Redirect(w, r, url, http.StatusTemporaryRedirect)
}

func YandexCallbackHandler(w http.ResponseWriter, r *http.Request) {
	code := r.FormValue("code")

	token, err := configs.OauthConfig.Exchange(r.Context(), code)
	if err != nil {
		http.Error(w, "Failed to exchange token", http.StatusInternalServerError)
		return
	}

	resp, err := http.Get("https://login.yandex.ru/info?format=json&oauth_token=" + token.AccessToken)
	if err != nil {
		http.Error(w, "Failed to get user info", http.StatusInternalServerError)
		return
	}
	defer resp.Body.Close()

	var userinfo struct {
		ID        string `json:"id"`
		FirstName string `json:"first_name"`
		LastName  string `json:"last_name"`
		Email     string `json:"default_email"`
	}

	err = json.NewDecoder(resp.Body).Decode(&userinfo)
	if err != nil {
		http.Error(w, "Failed to decode user info", http.StatusInternalServerError)
		return
	}

	// 1 означает яндекс
	userID := store.GetUserID(r.Context(), userinfo.ID, 1)

	println(userID)
	// Если не найден
	if userID == "" {
		// Register the user in the database
		err = store.CreateUser(r.Context(), userinfo.ID, userinfo.FirstName, userinfo.LastName, userinfo.Email, 1)
		if err != nil {
			http.Error(w, "Failed to register user", http.StatusInternalServerError)
			return
		}
	}

	// Генерация JWT токена
	tokenString, err := oauth.GenerateToken(userID)
	if err != nil {
		http.Error(w, "Failed to generate JWT token", http.StatusInternalServerError)
		return
	}

	http.Redirect(w, r, "http://localhost:3000/login?token="+tokenString, http.StatusTemporaryRedirect)
}

Ну положить токен в куки из QUERY на SPA думаю справишься

Comments

[Vocler]

Думал об этом, но в итоге отказался т.к. мне кажется неправильным использовать QUERY параметры для передачи данных от сервера к клиенту. Они же были созданы для передачи данных от клиента к серверу.