I am developing a frontend with react-native, and I need use static maps form Google or MapBox. To store Api key at develop time I am using a .env file with react-native-config but their readme say:
Keep in mind this module doesn't obfuscate or encrypt secrets for
packaging, so do not store sensitive keys in .env. It's basically
impossible to prevent users from reverse engineering mobile app
secrets, so design your app (and APIs) with that in mind.
So, is there some way to obfuscate Api keys on react-native (for Android and IOS)?
Or the only way is create an endpoint at the backend doing proxy functions to add here the api key, something like:
import express, { Application } from "express";
import * as https from "https";
const app: Application = express();
app.get("/map", (request, response) => {
const params: string = "Get the params from request";
https.request(`https://maps.googleapis.com/maps/api/staticmap?key=${process.env.API_KEY}&${params}`, (result) => {
result.pipe(response, { end: true });
});
});
I can see several drawback, I will consume more bandwidth from my hosting and I will slow down of my application (first a request from the frontend to the backend, after a request from the backend to Google static maps, after the backend gets the response from Google maps and at end the frontend gets the response from the backend)
PS: Keep in mind I am talking about Google maps static and not google maps sdk Android or google maps sdk IOS.
MapBox have a good support. So after asking them here is the response:
Unfortunately, the proxy approach you've described is a violation of
our Terms of Service.
I want to make sure you have seen our guide for using Mapbox
securely. It includes a lot of great tips and best practices for
managing your account.
In our experience, cycling tokens on the customer side paired
with a general awareness of what's happening (by monitoring your
account statistics) has been sufficient to control and limit access
most of the time. If you're in need of frequent, programmatic access
token rotation, you can utilize our Tokens API for that.
All this being said, restricting tokens by app id is on our radar as
it's a common request we receive. Our engineering team is hard at work
to make a whitelisting feature possible for our customers. Until then,
if you ever have questions about your statistics or are seeing
unexpected stats. We're always happy to work with you and can look
into the any concerning usage patterns for you.
If you have other questions about your account statistics or invoices,
be sure to check out our Statistics FAQs.
Hope this helps!
Related
Use case
I am creating a paid blog website, where people can pay to bloggers to see their blogs.
Solution i Chosen
I have chosen NextJS to build static content(SSG). With fallback option, static content can also built after site is deployed.
Problem
Now, the problem is authentication. We can not authenticate any incoming request on server like SSR.
The only way to check authentication is present on client side. Use useEffect hook to check if the current user is authenticated or not.
But, the problem with this approach is that, any user can disable javaScript on client side to view the content.
Is there any way to authenticated SSG page request on server side.
I don't want to use SSR because increased cost.
You can you use a service called Auth0 to implement static site authentication. It is free up to several thousand requests per month and has React components you can use. Make sure to follow the tutorial for auth0-react and NOT nextjs-auth0 (this is for SSR).
Here is the link to Auth0: https://auth0.com/
You could return null if the user is authenticating on SSG. If you're not loading any content via an API, then the user would be able to see it in the code (but not many users would be doing this). There is the option of Vercel Edge Functions now if you haven't managed to fix this issue yet.
I am trying to connect hangouts chat API with NodeJS but did not find any documentation related to Oauth in NodeJS, without which I can not connect to APIs. There is a code in Python but is there any thing in Node so that we can do the API call from front end it self.
The Oauth flow is the same for all Google APIs
If there is a quickstart for a specific API in a specific language missing, you can use one from another API.
For example, there is a Node.js quickstart for the Drive API
You can take it as a base and have to modify only 2 things:
Modify
const SCOPES = ['https://www.googleapis.com/auth/drive.metadata.readonly'];
by specifying the scopes you are going to use, for example
https://www.googleapis.com/auth/chat
For building the service, modify
const drive = google.drive({version: 'v3', auth});
to
const chat = google.chat({version: 'v1', auth});
Mind that depending on the application, you might need to use a service account
The documentaiton about implementing a service account in node.js can be found here
I've recently decided to try and make a universal app with expo supporting ios, android and web altogether.
I knew that there would be many hick ups along the way.. but I found the biggest problem from the start.
I can see that there are few options as where to store the access token for apps such as secure store or asyncStorage, I just simply can't find a way to work with cookies or any client side store to put in the access-token.
As my app should have the stay logged in feature essentially, this will be a critical problem for the web client.
Does anybody know a good workaround this matter, or is there a way to keep the users logged in from the server side using the device / ip detail..?
Please enlighten me guys!
The web support is available in asyncStorage since v1.9.0.
So you can use it in recent versions of asyncStorage.
I've managed to do this with AsyncStorage.
import AsyncStorage from '#react-native-community/async-storage';
/// Then inside your component make an asynchronous set
await AsyncStorage.setItem(['tokenName', tokenValue]);
I'm working with a client to develop two sites: a site with general information about their business, and a separate e-commerce store to sell the products they offer. To my knowledge, this is a fairly common approach, since often a client's CMS needs are outside the scope of what most e-commerce platforms offer.
The main site will need to show some of the products in the store, so I'm looking for e-commerce platforms that have an API. Shopify caught my eye since it has APIs which return JSON. I'm going to be building the main site with Backbone.js with a Sinatra backend.
Can anyone tell me if the Shopify API can be used this way? I also see a somewhat flimsy and uncustomizable Shopify app called Shopify Widget, which I don't think will serve my client's purposes. How would you handle this situation?
You'll have to use the sinatra app as a proxy to the Shopify store since cross-domain calls via Javascript won't work.
You can use the ShopifyAPI gem to do most of your heavy lifting and if you really wanted you could write up a ghetto RestAPI in Sinatra so you aren't re-inventing the Shopify wheel.
It could be something simple like:
POST /shopify.json
{
"model": "ShopifyAPI::Product",
"data": { ..shop data... }
}
And you can probably use const_get to retrieve the actual model you would need.
If you are using Sinatra as a backend, you can indeed do cross-domain Ajax calls. I do it all the time. Simply use Rack-Cors gem, if you want to use CORS. If you're squeamish about that due to IE having problems doing CORS, you can always return JSONP as a substitute. If your Sinatra backend runs on a subdomain, you can do whatever since there is no cross-domain issue.
How can I intergrate the stripe api for payment processing to allow people to pay for services through my titanium mobile app. Stripe.com
I am using this code to start:
https://github.com/abh/node-stripe/blob/master/lib/main.js
How can I make sure the information is encrypted.
First you need to make sure what you are selling is physically tenable, assuming it is (and your not selling any form of digital content, or functionality within the app) then the easiest way to use stripe from within Titanium would be to just wrap it in a web view (you could implement it in native code but this could get tiresome).
Assuming you have this example in a file called index.html in your resources directory.
var webView = Ti.UI.createWebView({
url : 'index.html
});
win.add(webView);
Note that you will need to let your server support https requests for actual encryption to happen, you shouldn't be encrypting yourself (in code).
Once this is done, all the work now happens on your server to process payments using Stripes libraries like in this example in the documentation.
Really this is a server job, all your doing is sending the server the information to process, not a lot going on with Titanium here except as a gateway.