На сервере Express.js как я могу отправить HTML (со стилем и js), полученный из HTTP-запроса, в качестве ответа?

Question

Это сервер Express.js.Я пытаюсь аутентифицировать мой Instagram API.

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const axios = require('axios');
const ejs = require('ejs');
var app = express();

//  bodyparser middleware setup
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());



var instagramClientId = '123123';

app.get('/instagram', (req, res) => {
    axios({
        method: 'post',
        url: `https://api.instagram.com/oauth/authorize/?client_id=${instagramClientId}&redirect_uri=REDIRECT-URI&response_type=code`,
      }).then((response) => {

    res.send(response.data);
    console.log(response.data);


        }).catch((e) => {
              console.log(e);
          });
});

// port set-up
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`app fired up on port ${port}`);
});

Это ошибка, которую я получил.Похоже, что HTML-файл был отправлен просто отлично, но CSS и JS не были выполнены.Вы можете видеть, что сообщения об ошибках были все о стиле, и js не оправдывался.

Это потому, что мне нужно включитьнекоторые опции в моем коде res.send ()?

Answer 1

Я собираюсь ответить на два вопроса здесь: во-первых, я думаю, что у вас действительно есть проблемы, а во-вторых, что технически может быть ответом на этот вопрос.

ЧтоЯ думаю, что ваша настоящая проблема заключается в следующем: неправильное понимание OAuth2.0

Глядя на ваш код, похоже, что вы пытаетесь заставить пользователя пройти аутентификацию в Instagram.Это замечательно, OAuth2.0 - это фантастика и хороший способ для аутентификации в данный момент, но вы неправильно поняли, как его реализовать.OAuth2.0 - это перенаправления, а не проксирование HTML пользователю.В этом случае выглядит так, как будто вы используете axios для вызова на стороне сервера конечной точки instagram OAuth, а затем отправляете пользователю этот HTML.На самом деле вы должны перенаправить пользователя на созданный вами URL-адрес в Instagram.

Высокий уровень «танца», через который вы проходите, следующий:

1. Пользователь запрашивает вход в систему с помощью Instagram, нажав кнопку на вашем веб-сайте.
2. Вы отправляете пользователя по URL-адресу Instagram, который содержит ваш токен приложений и «утвержденный» URL-адрес перенаправления.После того как пользователь вошел в Instagram, Instagram перенаправит пользователя на ваш утвержденный URL-адрес перенаправления.
3. Браузер пользователей теперь перенаправлен на вторую конечную точку на вашем сервере, эта конечная точка получает одноразовый токен изInstagram.Вы берете этот токен на стороне своего сервера и используете axios (или аналогичный), чтобы сделать запрос на стороне сервера для получения некоторой пользовательской информации, такой как их профиль.Получив эти данные, вы можете при необходимости создать пользователя в базе данных и выдать им новый маркер сеанса.Наряду с вызовом в профиле вы также получите токен, данный вам непосредственно (в отличие от того, который вам дал браузер пользователей), который позволит вам отправлять запросы в API Instagram на привилегии, которые вы запрашивали у пользователя изначально..

Это означает, что у вас есть 2 конечных точки в вашем сервисе: «привет, я хотел бы войти в систему с помощью Instagram, перенаправьте меня на страницу входа в Instagram», а затем «привет, сказал InstagramУ меня все хорошо, и дал мне этот токен, чтобы доказать это, теперь вы можете проверить их напрямую "(это конечная точка обратного вызова).

Вы можете управлять всем этим процессом вручную, что отлично подходит для понимания OAuth,или вы можете использовать что-то вроде Passport.js, чтобы абстрагироваться для вас.Это позволяет вам вводить свою собственную логику в нескольких местах и ​​обрабатывает много танцев вперед и назад для вас.В этом случае, я бы, вероятно, предложил разобраться с этим самостоятельно, чтобы узнать, как все это работает.

В конечном счете, вы не отправляете пользователю какой-либо HTML через res.send или что-то подобное.Вместо этого ваша первая конечная точка просто использует res.redirect(instagramUrl).Таким образом, вы также не делаете никаких HTTP-запросов во время этой части, вы делаете это по «обратному вызову» после того, как они ввели свое имя пользователя и пароль в Instagram.

Технически правильный ответ на этот вопрос:прокси JS и CSS вызовы, но это очень плохо для безопасности!

В этом случае вы отправляете какой-то HTML от стороннего производителя.Таким образом, вам также необходимо разрешить пользователю доступ к HTML и CSS.С точки зрения безопасности, это довольно сомнительно, и вам стоит подумать, не делать это , так как это плохая практика.Все ссылки JS и CSS на странице, скорее всего, являются относительными ссылками, то есть они запрашивают у вас некоторые JS и CSS, которые вы не размещаете.Лучше всего найти эти точные пути (т. Е. /js/app.min.js) и затем прокси-запросы.Таким образом, вы создадите новую конечную точку в вашем сервисе, которая сделает запрос в инстаграм /js/app.min.js, а затем отправит его обратно с res.send.

Опять же, пожалуйста, не делайте этого, притворяясь другимСервис действительно плохая идея.Если вам нужно что-то из instagram, используйте OAuth2.0 для аутентификации пользователя, а затем отправляйте запросы, используя его токены и официальный API instagram.