Github GraphQL API, жестко кодирующий токен доступа, работает, попытка запутать его не работает

#github #graphql #create-react-app #apollo #github-api

#github #graphql #create-react-app #apollo #github-api

Вопрос:

Ниже приведен мой настроенный клиент apollo, и когда я жестко кодирую токен доступа, созданный на GitHub, и пытаюсь пропинговать конечную точку, он работает нормально, я получаю данные обратно, я могу поиграть с ним и т. Д. Я попытался заменить жестко заданное значение в переменную среды, но затем я начинаю получать несанкционированную ошибку 401 от github.. Я зарегистрировал переменную среды и получил точную строку, с которой я жестко кодировал. Я действительно не понимаю, почему. Кто-нибудь может мне помочь?

 const httpLink = createHttpLink({
    uri: 'https://api.github.com/graphql',
});
const authLink = setContext((_, { headers }) => {
    // const token = process.env.REACT_APP_GITHUB;

    return {
        headers: {
            ...headers,
            // authorization: token ? token : null
            authorization: `bearer fullAccessTokenString`
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});
  

Ответ №1:

Если вы используете переменную среды, она просто будет заменена Webpack во время сборки с фактическим значением. Вы не можете включить значение в свой внешний интерфейс и предотвратить его чтение другими.

Вместо того, чтобы включать токен доступа непосредственно в ваш код, вам необходимо реализовать какой-то поток аутентификации (например, кнопку «Войти с помощью GitHub»), который позволит вашему пользователю получать свой собственный токен доступа при использовании вашего приложения. Это не только более безопасно, но и означает: А) вам не нужно повторно развертывать свое приложение, если срок действия токена доступа истекает или он отозван, и б) у вас будет меньше шансов превысить ограничение скорости API, поскольку каждый пользователь будет использовать свою собственную квоту.