Реализация Env в Angular 9

Есть ли способ скрыть учетные данные API в Angular?

Я попытался реализовать код в своем проекте, и мне кажется, что это не работает должным образом, я не знаю, совместимо ли это с angular 9, я выполнил шаги, но все же получил ошибку.

См. Ссылку и мой пример кода ниже: https://www.ninadsubba.in/blog/setup-dotenv-to-access-environment-variables-in-angular-9

введите описание изображения здесь

environment.ts

введите описание изображения здесь

.env

введите описание изображения здесь

Выходной терминал

Я уже установил следующий пакет: npm install --save-dev yargs dotenv и npm install @ types / node --save-dev, но по-прежнему появляется эта ошибка, пожалуйста, помогите Мне нужно решить эту проблему, чтобы четко понять, как dotenv может быть полезен для скрытия учетных данных в angular, или если это работает только на node.js, извините, ребята, я очень новичок в angular. Заранее спасибо.


angular dotenv
person vaj90    schedule 30.06.2020    source источник
comment
dotenv больше похож на контейнер конфигурации для констант, и он не скрывает ваши (конфиденциальные) данные во время выполнения. Он широко используется с Nodejs для загрузки констант в файл process.env (но есть и некоторые обходные пути для ng-cli). Лучшим способом было бы получить конфиденциальные данные, используя конечную точку API.   -  person Nicolae Olariu    schedule 30.06.2020
comment
Какие учетные данные вы хотите скрыть? Если это что-то вроде ключа API карт Google (для отображения карты) или любого другого статического ключа, который необходим фронтальной стороне для связи со сторонней службой, то вы не можете его скрыть. В противном случае, если это ключ, используемый для связи сервера с сервером, вместо этого добавьте этот ключ в свой API.   -  person David    schedule 30.06.2020
comment
Допустим, у меня есть конечная точка, и я хочу, чтобы она скрывалась, как то, что мы помещаем в environment.ts. Есть ли способ не показывать это при публикации проекта? вроде запустить в браузере?   -  person vaj90    schedule 30.06.2020
comment
мы все знаем, что в браузере есть инструменты разработчика, где вы можете проверять / проверять свой код, но меня беспокоит одна вещь: как я могу скрыть также и веб-пакет, чтобы они не могли взглянуть на мой код?   -  person vaj90    schedule 30.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете запутать код, чтобы его было труднее читать, используя настройки в webpack (я считаю, что это делается по умолчанию).

упомянутая вами статья очень вводит в заблуждение и опасно и подразумевает, что вы можете скрыть учетные данные от пользователя на его собственном компьютере. Чтобы процитировать статью:

Поиск в Google помощи по настройке переменных окружения для Angular - это кошмар;

На это есть очень веская причина !!

все, что вы даете клиенту, может быть им прочитано. Вы не можете этого скрыть.

Это означает, что если вам нужен ключ api для доступа к вашему api, они увидят это.

Помните, что если вам нужно взаимодействовать с вашим api, вы отправите HTTP-запрос с заголовками авторизации, они будут всегда отображаться в виде обычного текста на вкладке сети для всех, кто использует ваше приложение Angular.

Возможное решение - изменить способ аутентификации. Вместо использования ключа аутентифицируйте своих пользователей по вашему api (OAuth пользуется популярной практикой) Вот хороший пакет для угловой аутентификации. Это позволяет пользователям отправлять комбинацию имени пользователя и пароля (или использовать стороннего поставщика) для обмена на токен, который они затем могут отправлять назад и вперед с вашим сервером для аутентификации своих запросов api. Ваш сервер должен всегда проверять целостность этого токена при получении запроса. Firebase также является часто используемым ресурсом для проверки подлинности, поэтому вам не нужно этого делать.

person James    schedule 04.11.2020