时间戳

首页 > 解决方案 > 尝试在环境变量中插入密钥并将它们用于 GetStream.io 提要时出现错误

react-native - 尝试在环境变量中插入密钥并将它们用于 GetStream.io 提要时出现错误

问题描述

我将 GetStream.io 用于我的应用程序，正好用于新闻提要。当我只是尝试将我的 api 密钥和令牌直接插入 StreamApp 组件时，我收到一个错误，我不能公开使用它们，因为存在有人可以窃取它的风险。所以我发现是使用 babel-plugin-transform-inline-environment-variables 包。所以这就是我的代码的样子：

import React, { Component } from 'react';
import { StreamApp, FlatFeed, } from 'react-native-activity-feed';
import { Text, View, SafeAreaView } from "react-native";
import firebase from "react-native-firebase";
var stream = require('getstream');

export default class newsFeed extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   appid: process.env['REACT_APP_API_ID'],
   apptoken: process.env['REACT_APP_TOKEN'],
   apikey: process.env['REACT_APP_API_KEY']
 };
}

render() {
  return (
    <SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
     <StreamApp
        apiKey={this.state.apikey}
        appId={this.state.appid}
        token={this.state.apptoken}
     />
    </SafeAreaView>
  )
 }
}

你怎么理解，prcoess.env 变量保存在 .env 文件中。该文件连接到 .babelrc 文件。

问题是我收到一个错误：'无法读取未定义的属性'数据'。

我的错误是什么，我该如何解决？

标签： react-nativeenvironment-variablesbabeljsgetstream-io

解决方案

因为您使用的是 Stream 客户端（浏览器），所以您需要使用用户令牌而不是 api 密钥和秘密与 Stream API 进行通信。

用户令牌必须使用您的应用程序的凭据在受信任的环境（例如您的服务器/云功能）上创建并传递给您的客户端。

var stream = require('getstream');

client = stream.connect(apiKey, apiSecret, appId);
const userToken = client.createUserToken('the-user-id');

推荐阅读