Firebase Cloud Messaging works only from localhost - javascript

I have implemented the Firebase Cloud Messaging - Push Notifications to my spring-boot web application. Everything works fine, until I needed to deploy my application to a web server or run it from another domain in my network. Even when I try to open :port instead of localhost:8080, the firebase-messaging is not recognized..
I receive the following error messages in the console:
{code: "messaging/unsupported-browser", message: "Messaging: This browser doesn't support the API's …he firebase SDK. (messaging/unsupported-browser).", stack: "FirebaseError: Messaging: This browser doesn't sup… at http://192.168.1.3:8080/js/FireBase.js:14:28"}code: "messaging/unsupported-browser"message: "FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).↵ at Object.messaging (https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js:1:35551)
Uncaught ReferenceError: messaging is not defined..
FireBase.js line 14 is:
// Retrieve the FireBase Messaging object.
const messaging = firebase.messaging();
I am searching the whole day about it, but I couldn't find any adequate solution..
I would be very thankful to any suggestions!

There are some instances that you need to check.
First, make sure your browser is up to date.
Second, test Firebase without any extensions on your browser especially on Chrome.
Third, When going online, Prefer HTTPS instead of HTTP. So it comes with the SSL related issue.
Please see the code that checks if the browser has the necessary APIs firebase-js-sdk-
PS: To test it immediately, just insert your code inside Try/Catch.
[edit]: If you don't want to make a try/catch statement, please consider this

Related

How do I send my stripe webhook to my Heroku app?

I've integrated Stripe into my javascript app which works fine in my test environment using ngrok but once I switch to prod, my app is timing out as users attempt to leave the Stripe checkout screen.
The Stripe webhook kicks error Timed out connecting to remote host and I think it's because I have the wrong endpoint.
Testing endpoint
https://6752-136-62-45-90.ngrok.io/users/stripe/webhook
Live endpoint
https://myapp.com/users/stripe/webhook
Everything else in the integration appears to work -- the customer is still created and the billing goes through but I need the endpoint code to run because it builds some critical infrastructure in the user profile.
I also have SSL encryption setup and DNS target on my Heroku application so I'm wondering if I should be using the DNS target or the Heroku app name for the endpoint instead of my domain.
My question
I can't really find any documentation on this but how do I configure my Stripe endpoint with my Heroku-hosted app?
You can test by setting the Heroku app name directly to check if it works to narrow down the issue. If it still doesn't, then most likely it's due to network issue.
Timed out connecting to remote host usually means that the server is not responding. This is likely due to network configuration such as firewall blocking the Stripe IP addresses. I'd recommend checking your network configuration and ensure that Stripe domains/IP addresses are in the allowed list: https://stripe.com/docs/ips

Apollo Explorer Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

I am running an Apollo Server with express to create an http server:
const express = require("express");
const cors = require('cors');
const app = express();
const server = new ApolloServer({ ... });
server.applyMiddleware({ app });
// enable pre-flight for cors requests
app.options('*', cors());
// Create the HTTP server
let httpServer = http.createServer(app);
httpServer.listen({ port: config.port });
Locally I can run the server and query it on Apollo Explorer without any issues.
However, when I deploy this server on dev environment, and try to access the Explorer page with the dev endpoint, I get a few errors.
The app.options() line with cors argument somehow seems to have solved part of them but not all.
Errors I am getting (on Dev Tools console):
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID
POST https://dev.endpoint.service/graphql net::ERR_CERT_AUTHORITY_INVALID
Errors I am getting (as popups on the Explorer page):
Unable to reach server
To diagnose the problem, please run:
npx diagnose-endpoint#1.0.12 --endpoint=https://dev.endpoint.service/graphql
I've tried running the command as instructed in the error and got this result:
Diagnosing https://dev.endpoint.service/graphql
Could not find any problems with the endpoint. Would you please to let us know about this > at explorer-feedback#apollographql.com
Frankly, I'm not even sure I understand the problem.
Am I getting these errors because, even though I launch an http server of Apollo without certificates, I am trying to access it via an https endpoint (which requires certificates)? I have to do this, service is stored in AKS cluster, which is only accessible through the endpoint I am calling. But every service that is already there is also an http service, not https, and is accessible through this same endpoint.
Also, even though these errors are showing up frequently, I am also able to query the server successfully most of the time on Explorer, and the data returned is exactly what I expected, which makes even less sense.
I am using edge browser but also tried chrome, and have the same issues.
How can an error like this be intermittent?
Without any intervention on my part, sometimes it's like this:
Any help, hints, ideas, please.
Thank you so much.
As much as it pains me to admit, it seems the issue is related to the VPN my company is using.
There were a few tells that pointed in this direction, once I started paying attention:
We can't access the endpoint I mentioned without the VPN turned on.
Other services in the AKS behave with the same error, if being called constantly through the same endpoint. I did not think to do that test at first, but when I realized that on Apollo server, the server is constantly doing the introspection thing to check the schema, it means it is being called more often than the other services that do not have this functionality.
We have some monitoring tools, to check the pod statuses and so on, and nothing indicated any problems in this service, or that it needed any kind of pod escalation (due to excessive number of requests).
I actually performed kubectl portforward test linking my localhost directly to the AKS cluster. Calling the service this way bypasses that endpoint which I am, under normal circumstances, forced to use before the request actually reaches the cluster. And I was simultaneously seeing on one window where I was calling the service the normal way showing that error on Apollo Studio, and at the same time on another Apollo Studio window performing the same request with this portforward bypass mechanic, and the latter was working just fine. If it really was a problem with the service, it would be down for both windows.
Other colleagues were testing the service at the same time as me and they were saying the service was working fine for them, until it wasn't. So every developer on my team could be accessing the service at the same time, and the error would just randomly show up for some, but not for others.
There are long periods where the error doesn't occur at all, like during lunch hours, or after work hours, and I assume the VPN traffic will be much lower during those hours.

WebRTC: ICE failed error in browser with Mesibo Video/Audio chat

I am working on a video/audio chat application in React and Django using Mesibo Javascript SDK.
It is working locally on the same network but when trying to connect through different networks, Firefox browser gives me this error
WebRTC: ICE failed, add a TURN server and see about:webrtc for more
details.
In Chrome, this error doesn't show up but still the video/audio chat is not working and gives me
Mesibo_OnCallStatus: 50.
I noticed that Mesibo uses stun:stun.l.google.com:19302 as the STUN server and tried changing it to stun:stun.l.google.com:19305 but of no use. I even created a numb.viagenie.ca account to add a TURN server which worked for a few minutes and then gave this error
webrtc: ice failed, your turn server appears to be broken.
When checked on https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/, chrome is giving error code:701 for all the above turn/stun servers whereas firefox doesn't.
As suggested by Mesibo Documentation, my website is fully secure with https and the Rest APIs are called from Django backend. I'm invoking https://api.mesibo.com/mesibo.js as a script tag in the index.html file in react. I'm also able to successfully get
Mesibo_OnConnectionStatus=1
and the incoming call notification is also working. Upon answering the call, the call status changes from 3 to 5 and gives this webrtc error after sometime without any video/audio rendered.
Please suggest any hint/solution.
To Enable webrtc for remote calling you need your own trun server.
Google don't provide free trun server.
Free Turn Servers are will not work well in production. Well Fell Free to try Your Luck on Them. Not All Are borken
You Need to create Your Own on Cloud like DigitalOcean,AWS.
Or For Tetsing purpose I have a Trick
Soloution.
If Your Doing the testing
Probably you can try to use some Google TURN servers that they use here
https://test.webrtc.org/, I just checked for browser console and found this:
enter image description here
Not Sure About LifeTime. But you will get that.
For Production I will suggest to used DigitalOcean 5$ plan which is very chip.
And you install your own TURN server using coturn on it
If you want You can also use
Node-turn
which is great for node backend.
There is also heroku option of setup
I don't know is there any django or python option.
(tip: try your to build turn server on hosting server. Make sure the port on which server is running is open)

How to share a link to a firebase development environment when using firebase emulators?

In my development local environment, I'm using Firebase emulators for Hosting, Firestore and Functions.
I'm used to share a link with other people during development by using ngrok. I also use it to test on mobile devices during development.
This is the script:
"share": "ngrok http 80 -host-header=\"dev.myproject.com:80\"",
It works fine as far as redirecting to my dev domain host, which is dev.myproject.com.
But the emulators services become unavailable when you are accessing this link through a different device, i.e: a different PC or a mobile device.
Obviously, the firebase package is looking for those localhost emulators, which are only running in my local environment.
What is the workaround in this case? How to share a dev environment with other people / other devices when using firebase emulators? Is there an easy to do this?
Do I have to create an extra Firebase project to deploy the test version and its data and files? How do people usually handle this?
We are currently trying to do this using ngrok as well.
We are barely testing if it works, and so far it is doing so. So I'll share our work around with you.
What we do is
Start emulator firebase emulators:start (--import seedData if using )
Expose your server to the internet using ngrok by first starting it with ./ngrok http http://localhost:5001 (check your firebase.json in order to see what port your emulators.functions are exposed, in my case was port 5001)
This will output two URLs, with the following format https://[TWILIOADRESS].ngrok.io
In order to be able to invoke the implemented https function via its unique URL, append this to the provided ngrok URL: [project-id]/[project-implemented-region]]/[cloud-function-name]
You will end up with an URL that looks like this:
https://92003e41ecb0.ngrok.io/my-project-id/us-central1/cloudFunctionToExecute
Now you can make a request (from postman, in my case) to the exposed function emulator using this URL
If everything went alright, you should see some logs on the terminal where the emulators are running that tell you the function was executed, such as:
functions: Beginning execution of "us-central1-cloudFunctionToExecute
You can also check status and metrics information about connections made over your tunnel from the UI terminal provided when you start ngrok. ngrok provides a real-time web UI where you can introspect all of the HTTP traffic running over your tunnels. After you've started ngrok, just open http://localhost:4040 in a web browser to inspect request details

SquareUp Payment: Can we turn off SSL verification for development server?

I am trying to implement SquareUp Payment Gateway on a website and using Square Connect V2. When I try to show SqPaymentForm form in JavaScript but getting the following error -
paymentform:1 Uncaught Error: SqPaymentForm can only be embedded on sites that use HTTPS.
I can see a function named setSSLVerification in sample code but it not working and also I can't find it in API. I wonder if there is any way to turn SSL verification.
Can we turn off SSL verification? Like for development server?
Update:
After trying couple of unsuccessful things, I finally purchased SSL for dev server. As that's the easiest and quick solution. Thanks everyone for your answers.
You can use localhost for testing payment forms, but you are not able to use other development environments (like external testing servers). I'd recommend either testing from your local machine, or getting a free certificate with a service like Let's Encrypt
just use following code.
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
in your c# code for bypass the security of HTTPS.

Categories

Resources