尝试在环境变量中插入键并将其用于GetStream.io feed

时间:2019-04-10 17:40:29

标签: react-native environment-variables babel 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文件。

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

我的错误是什么,我该如何解决?

1 个答案:

答案 0 :(得分:0)

由于您使用的是Stream客户端(浏览器),因此需要使用用户令牌而不是api密钥和密钥与Stream API进行通信。

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

var stream = require('getstream');

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