I want two webpages in my website in such a way that:
Users can input their data into some textfill/textarea (html form) in webpage-1.
Their data is shown in webpage-2.
**webpage-1:(user page)**
post :
name:....
age:....
roll:...
description:......
**webpage-2:(admin page)**
post no:1
name:....
age:....
roll:...
description:..........
post no:2
name:....
age:....
roll:...
description:..........
post no:3
name:...
age:....
roll:...
description:..........
The basic architecture of your website should be something like this. Design both pages and share the data using local storage.
Follow these steps:
Design your User page. Add a form to using which the user can input data related to the post. Use setItem() method of localStorage web api to store posts in an array.
var posts = [];
localStorage.setItem("posts", JSON.stringify(posts));
Design the admin panel where you have to show the data. Fetch the posts array from local storage using getItem() method.
var storedPosts = JSON.parse(localStorage.getItem("posts"));
The data is stored in browser's permanent memory. This way you won't lose your posts data while moving from User page to Admin page.
Read this article for a detailed explanation of localStorage along with examples and projects.
Related
I'm trying to finish the front-end of my shopify wishlist app.
-My app uses a database with each record contains a product ID that the client has wishlisted.
The logic:
-I have a front-end shopify page with a div tag containing the client's ID. (if signed in)
-I use javascript to grab the client's ID and then grab all the product IDs from my app's database.
[Up to this point it works fine, I have the product IDs]
-Now I'm calling axios.post(appDomain + '/api/showWishlist', {shop_id: Shopify.shop,customer_id: customer})
-Inside my api.php file I have: Route::post('showWishlist', 'App\Http\Controllers\WishlistController#show');
-Which then my show function in my wishlistController file has php code that needs to return the product info (name, price, image, etc.) from the store's products.json.
This is where my problem lies. I can't seem to be able to grab the product info based on the ID. My original idea was to use graphQL in my controller function, but I believe that it only works for the website's owner as Auth::user() is required to run the graphQL?
How can I get the shopify product details (name,price,etc.) by using the product's ID from my wishlistController.php file?
Since you are already running an App, your best bet is re-factor it to be embedded (or just installed) in the shop itself, with permission to read products. In the front end, you use the App Proxy to call your App with product ID and customer IDs. You can then call Shopify, get the correct product information based on the IDs, and provide a nice JSON payload back to the front-end, all securely. This is the preferred pattern and without it, you're in for a tough slog. You could try tap-dancing with StorefrontAPI permissions, but still. You also expose your own App to abuse since you make no mention of you are securing your data. With the Shopify embedded App approach, you are protected.
I´m currently developing an application based on user authentication where each user can register a student-campus as a teacher and currently, I'm on a feature where I have two routes:
Route 1: It has a Datagrid where I'm listing all of the student campuses that I've already created and each row has an edit button that navigates to "Route 2" and the purpose of that is to edit the already created student campus.
Route 2: It has a form with all the necessary fields to create a student-campus.
As you can see I need to pass the student-campus ID to fetch data in the ngOnInit to fill the fields and be able to edit the above-mentioned, so I have several options in consideration:
Option 1: Pass ID in the URL.
this.router.navigate(['planteles/registrar', idPlantel]);
https://myapplication/planteles/registrar/1
Option 2: Pass ID in the URL with queryParams.
this.router.navigate(['planteles/registrar'], { queryParams: { ID: idPlantel } });
https://myapplication/planteles/registrar?ID=1
Option 3: Pass ID in the state object of navigation extras.
this.router.navigate(['planteles/registrar'], { state: { id: idPlantel } });
Option 4: Shared service and BehaviorSubject to subscribe to data.
I owe you the code
I'm able to use any of these but I have a problem with each one of them.
I can't use Option 1 and Option 2 because the ID cannot be changed by the teacher because that gives him the possibility to fetch the student-campus data of another teacher and edit it, so it isn't safe.
The problem with option 3 and option 4 is when I refresh the page the state is lost.
Currently, I have a workaround with option 3 which is to redirect the user to the previous page if the state is undefined but I don't like that solution. I'd like to persist data if the user reloads the page without using LocalStorage.
Thanks in advance, all help or contribution is well appreciated.
Option 1 is the correct option here (and the way you will find most sites in the real world are implemented... including this one we're on now). The problem is your approach to web security, and what you need to fix is your backend. You're approaching web security as though front end security is real, it's not. Web security exists on your backend. Users should not be able to fetch or view or manipulate data that does not belong to them, and this must be enforced by your backend.
A high level example of how this might work: some secure authentication token should be granted when the user logs in, then this authentication token should be attached to each request. The API then uses this token to check which user is making the request and ensures they have the proper permissions. If they do not (as in the case of the user editing their URL param to some ID they do not have permissions for) or if there is no token, the API should return a 401 or 403 response and the front end should handle it appropriately (ie sending them back to list, or showing an error page, whatever you decide)... how to issue this token, make it secure, and make use of it is an entirely separate topic beyond the scope of this answer.
In any of the options, I could open my dev tools, and view any API requests being made, and change the ID's and use that to view or manipulate other people's data without any effort at all. So options 3 / 4 are barely more "safe" than 1 or 2. As none of these are safe without properly implemented backend security.
Front end "security" exists only as user experience. Me and you are both using the same URL to view this page, but we see different options and buttons, like you can edit or delete your post and accept answers, while I can't, but I can edit or delete my answer etc. This isn't for true security purposes, SO's servers enforce who can and can't take what actions. It's just showing me and you the UI that reflects our different permissions, ie, its all just UX.
There's another way too, which is defined in Angular docs itself.
NavigationExtras
Example:
let navigationExtras: NavigationExtras = {
queryParams: {
"firstname": "Nic",
"lastname": "Raboy"
}
};
this.router.navigate(["page2"], navigationExtras);
I'm using the Javascript SDK, and I'm currently able to successfully have a user log into my app using their Facebook and get posts using /me/feed. However, those posts only seem to have the fields: message, story, created_time, and id. How can I get the pictures, links etc associated with these posts?
Thanks!
You have to ask for the Post fields you want to get:
/me/feed?fields=message,xxx,...
I am new in contentful and I am trying to display content from contentful to a web page. I am displaying the content using contentful.js, I wanted to know How can i hide these information(space id and access token values) from public users when i am using it in a js file to display contents in a web page. Below is the Javascript code which i am using in main Js file to display the content in html file.
var client = contentful.createClient({
accessToken: 'b4c0n73n7fu1',
space: 'cfexampleapi'
});
client.entries()
.then(function (entries) {
// log the file url of any linked assets on image field name
entries.forEach(function (entry) {
if(entry.fields.SampleContent) {
document.getElementById('sample_content_block').innerHTML = entry.fields.SampleContent;
}
})
})
Thanks in advance!
There a few different ways that you could do this. The easiest way would be to move your space ID and accessToken into an environment variable. Take a look at this medium post on how to do that with Javascript: https://medium.com/ibm-watson-data-lab/environment-variables-or-keeping-your-secrets-secret-in-a-node-js-app-99019dfff716.
Then on your hosting provider, you'd be able to set the environment variable as those variables and your code would be able to utilize them.
Something interesting to note is that all the content that you put onto Contentful is assumed to be read-only. Exposing your Content Delivery API key (the access key in your example) and your space ID isn't the end of the world in a way that sharing an API Key for an alternative service can be. Using that CDA Key you posted wouldn't enable someone to edit any of the data you have stored on Contentful, just to read it.
However, you want to make sure you don't expose your CMA Key (Content Management API Key) as that would allow people to edit and change your content in Contentful.
You could use your own server to proxy requests, or something like Aerobatic's express request proxy feature: https://www.aerobatic.com/docs/http-proxy
I am using SignalR for notifications in my web site but i couldn't find a way to send notifications according to the page/content.
Let me explain in details.
Assume that, there is a page for showing a record from database (for example a blog post).
So there is only one page for showing posts as it should be.
And every post has a like counter which i want to update via signalr notifications, if another user clicks like button. Until here, it is very easy to accomplish.
This page contains a javascript code block like below
var notify = $.connection.notificationHub;
notify.client.updatePostLikeCount = function (likeCount) {
$("#likeCount").text(likeCount);
};
And this function triggered from server-side like below (it is in another class instead of Hub class)
var context = GlobalHost.ConnectionManager.GetHubContext<NotificationHub>();
context.Clients.User(user.Id).updatePostLikeCount(likeCount);
But a user might open more than one post; so if a notification is sent from server-side all opened tabs receive this notification and update its counter.
I looked for .Caller method but it is not available in IHubContext interface which GetHubContext() returns and couldn't find another way.
To summarize, i want to send notifications to users who had opened the post which user liked.
EDIT: After sending question i got an idea. Continue sending notification as being and filtering according to the content at client side. It is not very good but i think it will work with charms.