Web apps and deep links - javascript

I'm trying to incorporate deep links/universal links for my music app so when I send out emails to people regarding new songs/albums, they will either be directed to details page or the login/signup page (with the song/album info displayed).
branch.io looks good but I'm having a tough time understanding how my app would handle the appropriate redirects for a single-page app. When a user clicks on a generated link, how should my app request for more data based on that user's link so I can render the correct page/view?

The flow is pretty simple. Create a Branch link with all the parameters you want to pass -> you click on the link -> Redirect to your the web app -> Initialise Branch Web SDK -> Callback is received with all the parameters -> Use these parameters to navigate to whatever page you want in your app and/or use these parameters to customise your user experience.
You can read more about it here:
https://docs.branch.io/web/integrate/#read-deep-link
https://docs.branch.io/deep-linking/routing/#branch-added-parameters
In case you still have doubt feel free to reach out to our super helpful support team at support#branch.io

Related

React Login Button Takes User new Page

I am trying to learn to react front end by creating a simple frontend website. My goal is simple I want to implement a login menu when I run the app. The user will log in through this window and if the user is a regular user it will redirect the user to a new component call regular.js. If the user is admin then redirect the user to another page lets calls that admin.js. I have been trying to understand how to redirect in react. Like in javascript I can write if Credentials match then go to this page can I do that too in react? However, I do not want the user to log out automatically when the redirect happens. I am not sure how to approach it because I read other answers saying use hooks but then some said use routes as well. I am providing the App.js, index.js, and loginForm.js file underneath, any direction will be helpful or documents to refer to like guide me to do this will be helpful. I am not looking for a design or any content on the new pages I just want the redirect to work while the user is logged in.
You should not handle login on the front end with React states, there is 0 security in this. You should look into how to implement authentication, consider reading through some tutorials like this one: https://bezkoder.com/react-express-authentication-jwt/

How do I open a Modal after a successful Oauth2 redirect?

I'm working on a relatively old web application, based on portal/portlet architecture.
I have an ingress on the application which loads my feature in a Modal. Currently we have navigation built into the modal where we show and hide divs if customers move back and forth and update our ingress with Javascript once the interaction ends.
Now we want to introduce another card inside the modal which requires the customer to access sensitive data, therefore we want the customer to authenticate again.
We have an OpenId OAuth2 Authentication provider that we call with a callback URL. Currently this callback URL is the URL for the main page, therefore the customer is taken out of our modal experience and we have a high likelihood of engagement drop-off. We'd want to be able to get them back into the Modal experience where they'd left off before authenticating.
Are there some common strategies or patterns that can help achieve this? One thing that might work is if we are able to pass in a javascript method as a part of the redirect url too.
I can't make any changes to the underlying container but have freedom to add javascript events and handlers.
You could use the state parameter in the OAuth2 request.
From RFC 6749:
the client MAY use the "state" request parameter to achieve
per-request customization
Then when you get the state value back in the response, you could open the modal with your additional card. The state value is a string value and could include what you wanted. Just make sure to not forget to cover CSRF.
https://www.rfc-editor.org/rfc/rfc6749#section-3.1.2

How do I push mongodb data?

So I have developed a web app as a hobby on Handlebars, Express and Mongoose/MongoDB.
The app let's users create an account and then post advertisements for other users to see and respond to.
All the ads posted by users show up on the index page. So it is common view for all the users on this web app. I am relatively new to web development so to build such a simple app it took me a while but boy I learned a lot!
Now the issue I am facing is, when a user A posts an Ad while the user B is logged in and is currently on the index page (a page that lists all the ads posted) it won't show up for user B unless user B refreshes the page. Rightly so actually because only when the index page's route is hit it will query all the ads and refreshing is basically hitting the index route I get that. But I don't want it that way. I want it to show the new ad on user B's index and pretty much every user's index if there's new ad by any user.
So I did a little research/reading and I learned that I can do it by learning to work with triggers on mongodb and like create some kind of trigger that when a new ad is posted do something. I like the idea but failed to find resources to learn how to use such a thing.
The other option I was suggested was to use socket.io but that too I can't grasp how can I make an entire Ad document work as a socket. I am lost and implementing this feature of dynamically loading ads for all users will complete this hobby project of mine and will help me find a junior dev job in local community.
I request stackoverflow's community to guide me how do I go about doing this and what resources I can use to learn about it.
The socket.io seems to be the best solution for your case. What you will want to do with socket.io is every time a user posts an Ad you use socket.io to notify the rest of the users that there is an update.
If you don't want to send the entire document using the socket you can use the socket to notify the clients and on the client side every time you receive such a notice from the server you will either
a) Refresh the page(not suggested as it will make the user experience unpleasant) which is easier to implement
OR
b) You can use an Ajax request to get the new data from your server and update the fields on the fly(which makes for a better user experience).
Best Way You can come with using Short Polling concept from client side to ask for new data after 1 or 2 seconds (whatsoever count to need ) . Gmail for new inbox mails also uses sync method in a particular fashion . Just ask from server for new data
OR Second option to go through below
On Server Side
Serve index.html page to User A (which is logged in now).Some User B inserts data
Maintain a function or a cron job (checks the count of Total Ads ) Lets say after every 1 minute or so
If there is change in count from the previous total_count , update it and get new mlab documents and send it to function , Let's say push_new_ads which will be sync via socket.io to client
On Client Side
Sync your client_total_count with server_local_count push_new_ads using socket.io and If there is change in count , make a simple fetch api call to get data and appends it to previously fetched array
There is no such way to directly listen the changes in mongodb But you can trigger some changes from oplog using tailable cursors

Dynamic website without client side url handling

I have a challenge that I can't solve. I have made a website with node.js and have all of the code written for the routing including routing for sub-domains. Some location only some users can access, some locations only logged in users can access. I wanted to include a chat for my users so I went along and created one with socket.io and some client side js.
Now I need the site to keep the chat element open which in on a bar across the screen when the client goes to another portion of the website. I have looked into many solutions but almost all of them include some js library like angular.js with the ng-model or ui technique but all include writing code for the client side that handles the url and what to load.
I don't really want to do this method because:
I don't want to re-write all my routes and I am not even sure how to handle the authentication of the users.
I find the client method to be a security issue
My website isn't a single page app, I just want one portion of the website to stay loaded.
Here is some images of what I am wanting:
State 1:
State1
State 2:
State2
Notice that the chat stays but other content was loaded. Also that it went to a different sub domain and a location that is only accessible by logged in users.
Thanks!
I guess you want to maintain state across page refresh, much like e.g. Facebook does. A true and trusted way of doing this is setting a cookie that stores the chat state: open/closed, or store the state on the server. Then on page load, initialize the chat based on this data.

How do I code facebook-like browser notifications using AppEngine Channel API?

I am writing a Python AppEngine app, and need to deliver notifications to browser clients when certain backend events happen. I am using the channel API. I have two issues: multiple page loads within the same tabs and multiple tabs.
Multiple Page Loads
I seem to be unable to reuse the same channel across multiple page loads. An attempt to reconnect to the channel on the new page results in an error with code 0 and no description. I am currently storing the channel token in the datastore and injecting the token into the page. How can I reuse the same channel for multiple page loads within the same tab? This answer suggests iframes are the way. Is recoding the site with iframe my best option here?
Tabs
My understanding is that I need to generate a client ID for each tab the user opens. How should I generate a client ID that will be different for each opened tab? I could just increment an ID on the server, is that the best way?
Thanks in advance,
Aaron
I have been investigating strange channel disconnections in DEV, and it looks like Channel API is much more stable in the live environment than in the development environment.
I created a (somewhat) minimal AppEngine application that creates a channel that persists across page loads. The app reuses a channel token from the datastore.
The code for the app is here: https://github.com/aaronlifshin/channeltest
The app itself is live at http://channeltestaaron.appspot.com/
How to use it?
When you go to http://channeltestaaron.appspot.com/ANYSTRING the app will create a channel and then reuse this channel for any other URLs you open of the form http://channeltestaaron.appspot.com/ANYTHING
Then you can go to http://channeltestaaron.appspot.com/broadcast to cause a message to be sent to all the other pages you've opened.
All pages have a 1-second delay to test the persistence of the channel. This 1-second delay would cause the channel to disappear in dev.
Hope this is helpful.
Aaron
Multiple page loads: according to the answer here you can reuse the token, however need to make sure to use it on one page at a time (it might also be a good idea to avoid page reloads and to have a single-page app that uses hash fragments).
Tabs: the most straightforward way to generate client ID is create a random string, e.g. like this.

Categories

Resources