php + js checkout and thank you page - javascript

i am build a stripe checkout for my ecommerce on my current project.
everything working good, but i have few question which is confuse me.
is good idea to use ajax for checkout?
i am using stripe.js to checkout, when customer click on checkout button, which will get the token from strips, and then i use ajax to submit the token to php, php will charge the customer, and do the rest of job. is this safe? do i have to use all php code on page to checkout?
i am also using localstorage to store the shipping cart information, is localstorage safe than cookie? if not, is cookie enough for shopping cart information?
about thank you page.
i already create a thank you page, but this page every user can go to this page, like customer didn't buy anything still can go this page. www.example.com/checkout/thankyou.php
for stander checkout thank you page, should i create something to prevent non checkout user to view this page? or i just make thank you page and checkout into one page? like when customer click checkout button, ajax return 1, then popout a modal, show order number, and redirect to other page in 5 sec.

Yes, this is safe, since the Stripe's token is a reference to their system and cannot be used or read by anyone else but your PHP script, using the private API key.
This token is created to ensure no credit card info ends on an unprotected server.
But as they say in their tutorial, you should enable HTTPS to protect the other transaction values of your customer.
They have a real effective tech support that you can reach on https://webchat.freenode.net/ using the #stripe channel.
And about the thank you page... You could use a $_session variable to prevent the access from users who didn't succeded a charge.

Related

How can I 'lock' a page behind a log-in screen in jQuery/Bootstrap/JS?

I've been building a web app using Google's Firebase as a backend (for those who don't know, it's a Realtime database; any changes in data are reflected instantly and updated), there's other people working on the Android app with it so there's no other option (plus it's kinda cool). I was surprised that I have yet to write a single line of php or any server-side code. Anyway, jQuery is working perfectly fine for login and stuff.
Now I'm going to be making an admin page (with a separate login from the main users login). It'll be accessed in a completely separate way (by opening something like /admin.html). So the login can't be put on a separate page so people don't 'accidentally' access the admin panel by writing /admin.html in the address bar.
So I want to stop the admin page from completely loading until I've received confirmation from Firebase that the credentials are correct. So how can I achieve this knowing that both the login and the whole admin page needs to be in the same file. I'm positive this can be achieved with simple jQuery + Bootstrap but I'm not really sure how. Can anyone please point me in the right direction. Thanks in advance!
I have googled it of course but maybe my wording is off? :P
If I'm understanding your question correctly, your problem is that you need to create two separate views in a single file, and redirect to one or to another depending on your user "session", however, as all your code is in client, you don't have a "session" system operative.
Ok, there are several options you can take. I like the idea of using LocalStorage to store the user session.
When /admin.html is requested, your code checks for a valid session object (keep in mind that you'll need to define that session object) in the LocalStorage. If there is a valid object, you render the admin area, if there isn't any, you render the login area.
When someone sends username/pass to the database and you receive a valid response, you create a session object, store it in the LocalStorage and reload the page.
Keep in mind that you'll need to create a mechanism to make sessions die and a log off view.
For the dying sessions, as an idea, you can store the creation time and a expiration time in the session object. Each time a "session protected" page is served, when you check that the session object exist, you update it's expiration date a fixed amount (20 minutes plus current time, for example).
So, when you check if exists a valid session, you also check that it's expiration date has not due, and if it's, you delete the object.

How can I check asp membership database roles for a user in JavaScript?

I have a pure JavaScript/html page (e.g., index.html) that is secured by a Login.aspx page with a asp.net login control. After a user input his account info, I want to get the list of roles that this authenticated user belongs to by using JavaScript in the index.html page. Can someone tell me how to do it?
Many thanks,
Wei
Use an ajax call, which is quite easy if you are using jQuery's ajax.
$.get('/some/url/to/retrieve/the/roles/from', function(roles) {
});

How to manage server user session within client side single page app

I've been fumbling around with different client side technologies, like AngularJS, EmberJS, even trying to use straight JQuery and figure out how to use ReactJS with it. That aside, my goal is to build a single page app using json in between the client and a Java Jersey 2 jax-rs back end api.
I have two stumbling blocks right now. Some info though..I am deploying my app as a WAR file in Jetty. My back end is java based. I am using only jquery in the client side as of now.
My main stumbling block is how to handle login, logout and session management. With an rest API and using ajax, I have login working, including it setting a cookie. My concern however is with a single page app, there is just the one index page, and if the user closes the browser, then reopens it to the index page while the cookie/session is still good, the user should be logged in, not see the outside (not logged in) page. I am unsure how to handle this, whether it be a jsp page, index.html with some templating library, etc. With JSP I can insert some scriplet code (against my better judgment). In the old days I'd include a header that would check for request.getSession().getAttribute("user") and if it was there..the user was logged in and using scriplet if() code I'd display a logged in header, instead of the non-logged in header. But I am in the belief there has got to be a better way to do this with todays client side JS frameworks.
The other stumbling block is the navigation and dynamic aspects. For example, when I was messing around with angular js, it was easy enough to use Welcome {{name}} and within the scope replace name with a json response value for the logged in user. In my current situation, I am not exactly sure how to best go about displaying dynamic bits like this with pure jquery other than using some sort of $("#elem-id").innerHtml="..." code within the response success method of an ajax call. As well, I am not quite sure how to handle navigation to different pages. My logged in site will have some drop down menus or links that will replace the content area with different varying amounts of content.
So first, what are some ways in a SPA to handle user sessions, in the case of a page reload, or close/crash browser restart.. to ensure the user is still logged in and direct them to the right page? Second, what sort of templating and routing/navigation options exist that don't require me to put a huge ton of code in my one index.jsp page?
Thank you.
If you're having a REST API as the back end, then you must have implemented oAuth as an authentication mechanism. That is, when your user logs in, using a username and a password, you exchange that data with an authentication token. This authentication token is sent your server with each and every API call and your backend validates this token before servicing the request. Clear so far?
What you could do is, when you obtain the access token, you can also obtain the access token expiration time from the server and store that data in your client side app. In localStorage maybe? And when your user closes the browser and reopens again, you can first check whether such access token is available (and not expired) before asking the user to log in. This should solve your first problem.
Secondly, if you're looking for a lightweight routing option, I recommend director.
I am building a similar application. OAuth is not mandatory. You can have normal sessions etc by hitting the jersey login endpoint and setting a session and a cookie "keepme" with the session if user wants to be persistently logged in. You can then have a jersey AuthFilter for example check if either there is a cookie with a valid session or an active session and keep the user logged in.
Your frontend application should have no say over this, just communicate with the server and if it doesn't get unauthorized access (from the AuthFilter) then continues otherwise it displays the login page.

Login using facebook, how to keep userid across all pages?

I want to use Facebook's log in, and then I need to display some data related to the user, which is in my databases.
The problem is that I have several pages, and I don't want all pages to load the data using Ajax, rather I want them to be created by JSP based on the user id from the first time the user logged in. The problem is how to set the user id parameter in the server side, and keep it safe?
JavaScript can't set the session, and it is very annoying and have poor performance to load the page and then wait for the id from the Facebook session just to send it to server and process it --> send data back. This is good behavior for the first time user logged in only.
I am using Jaxcent as the framework for Ajax which is based on servlets. For some reason, I can't get to work with the session object there which only works with forms inputs. And when I tried to put a hidden filed in, it is not getting into the session, only if I type the value myself.
How do I solve this issue?
I thought about a table in the database which I could quote the session id, and userid from, but then again I have the session id in JSP but the userid in JavaScript, I can't find a way to combine them.
You could create a page that you would pass the user id (when you get it from facebook) and that page would store a cookie on the client, with the necessary redirecting of course.
You might be able to do that with AJAX to get rid of the redirection.
Just set a cookie from your JavaScript code, and read that on the server. Note that you should include the full signed request if you need definitive values, as opposed to the user being able to modify them.

Implementing a shopping cart using Javascript?

I've been playing with the paypal html code and have been working on a shopping cart, I don't want to use a premade cart system.
So far my approach has been to store the items added to a cart in an array. I want to store it in a cookie really but don't know how to update the cookie each time a new item is added.
Any general advice about how to go about it would be great.
Typically, you'll need something on the server side (PHP?) to store such information. In PHP you would do session_start() and it would give a session number cookie to the browser, which would identify it to the server from that point forward (until it expires). Then you can use $_SESSION[] to store information regarding the cart, your customer, etc.
If you're not going to use server-side persistence, then you'll have to create lots of messy cookies or pass stuff back and forth in the URL.
Regardless of whether you do pure client-side persistence or server-side, you'll want to check and validate all data once submitted to the server because it can be manipulated by the user before submission. So prices, discounts can be changed and sent by the user. Check 'em before accepting them at the server.

Categories

Resources