sessionStorage.getItem not working when new browser open - javascript

When I am loading a login page,I am setting a sessionStorage value using
<script >
$(document).ready(function() {
window.sessionStorage.setItem("tab_value","test");
});
</script>
when login success page1.php loads and i am getting sessionStorage value using
<script >
$(document).ready(function() {
alert(window.sessionStorage.getItem("tab_value"));
});
</script>
but here,when new browser starts and after login it alerts 'null' and it alerts 'test' whenever I am login in the same tab after logout.
in my logout function I am trying to destroy session and calls the login page
$this->session->sess_destroy();
$this->load->view('login');
how to solve this thanks in advance

Related

Passing back redirect url parameters to main window after successful Paypal login in popup window

I have to implement a "Connect with Paypal" feature in a React SPA application.
The login is implemented by using the Paypal provided code
paypal.use( ["login"], function(login) {
login.render ({
"appid": MYAPPID,
"authend": "sandbox",
"scopes": <SCOPES>,
"containerid": "paypalButton",
"locale": "en-us",
"returnurl": <RETURN_URL>
});
});
This opens a new popup window, which happens completely out of my control. The popup opens the Paypal login form, which after successful login, redirects to the <RETURN_URL>.
All this happens in the popup window. Since this is a SPA, I don't want to refresh the page.
What I need is a way to close the redirected popup, while also preserving the URL params that were passed back to it from Paypal, and have that information (the URL params) transferred to the main app window.
Is this possible and if so how? The Paypal documentation is pretty outdated from what I can tell.
There are a lot of ways to share this data. I am assuming your {RETURN_URL} and SPA are on the same origin. Here are two approaches I came up with to communicate between your SPA and the pop-up.
1) Use the Broadcast Channel API if the API is supported on browsers and versions you require (caniuse). No Safari, and limited Edge! Polyfills also exist.
Here's some sample code you can use to try out the different approaches. Two pages (one's your SPA, the other one's the RETURN_URL you give for PayPal to send you to on completion).
Your SPA index.html:
<html>
<head>
<title>My SPA</title>
</head>
<body>
<script>
const bc = new BroadcastChannel("my_spa_listener");
window.open("./newpage.html?some=true&query=hi&params=cat", "_new");
bc.onmessage = function(ev) {
console.log("Got a message from the pop-up: ", ev.data);
};
</script>
</body>
</html>
the pop-up newpage.html:
<html>
<head>
<title>PayPal redirected me here</title>
</head>
<body>
<script>
setTimeout(function() {
const bc = new BroadcastChannel("my_spa_listener");
bc.postMessage(window.location.search);
bc.close();
window.close();
}, 2500);
</script>
</body>
</html>
2) Good old localStorage. You can use it pretty much anywhere!
index.html:
const targetKey = "popup-queryparams";
window.addEventListener("storage", function(ev) {
if (ev.key === targetKey) {
console.log("Got the data: ", ev.newValue);
// clear key in case it conatins sensitive info
localStorage.removeItem(targetKey);
}
});
window.open("./newpage.html?some=true&query=hi&params=cat", "_new");
Then in the pop-up, before you close the window, just do:
localStorage.setItem("popup-queryparams", window.location.search);

Delete pop up cookie of mailchimp form

im using a sign up form of mailchimp, its a pop up but it have a cookie to dont show it again even if the user reloads the page.
this is the script:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us15.list-manage.com","uuid":"3dd49f3f5fd6be7bc1be03226","lid":"049a3764fd"}) })</script>
But i want allways display, is there a form to do this?
the idea is to set their cookie as expired to have to possibility to display it next time.
Please check this page :
https://gist.github.com/scottmagdalein/259d878ad46ed6f2cdce

How can you detect that you are logged out with the Google login API?

I am using the Google login client API for JavaScript. The site I am working on has two relevant pages. It has a login page, and it has a user profile page. The login page obviously has a Google login button on it. You should only be able to view your profile page when you are logged in. When a user goes to their profile page without being logged in, it should redirect them to the login page.
Here is an approach I have tried that did not work:
// This does not work because this event is only fired when the user logs in or logs out, but not when the user is already logged out.
gapi.auth2.init().isSignedIn.listen(function(state) {
if(!state) location.href = "/login/";
});
I have also tried detecting the login status of the user when the script loads, but that did not work either. It always redirected to the login page because the Google API can never log the user in by the time the script is done loading.
Additionally, I am trying not to use setInterval or setTimeout in my code, though, if that is my only valid option, please inform me.
By the way, I have heard multiple times that I can just set a variable when the user logs in, and then simply redirect to the login page if the variable is false. When would I check for the value of said variable? This will not work because it requires me to set a specific delay with setTimeout. Google's loading time can vary greatly, so I am not going to use that.
I figured out that you can use this simple expression that returns either true or false depending on whether the user is logged into Google on your website.
gapi.auth2.init().isSignedIn.get()
I'm no expert in the Google login API, however from the what I do know the API is purely for verification purposes, and (as far as I'm aware, I could be wrong) not actual user sessions. Everything else relating to the user account (IE, storing and persisting the login session in your case) are handled by you, the developer. The basic auth supports calling a callback function on a successful login, via data-onsuccess, which calls a JavaScript function on the login with the relevant login information. When a user logins the standard practice is to verify the validity of the user token returned, then you can do what you need with the data. In this case, you'd start some kind of session for the user.
A very basic example is as follows:
home page
<!DOCTYPE html>
<html>
<head>
<title>Test Home</title>
</head>
<body>
Login<br>
Profile
</body>
</html>
This has 2 links, one for the profile and one for the login page.
login/index.php
<!DOCTYPE html>
<html>
<head>
<title>Test Login</title>
<meta name="google-signin-client_id" content="YOUR-CLIENT-ID.apps.googleusercontent.com">
</head>
<body>
<div class="g-signin2" data-onsuccess="onLoginSuccess"></div>
<script type="text/javascript">
function onLoginSuccess(user) {
var user_id_token = user.getAuthResponse().id_token,
request = new XMLHttpRequest();
request.open('POST', 'https://www.googleapis.com/oauth2/v3/tokeninfo');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onload = function() {
authUser(request.responseText);
};
request.send('id_token=' + user_id_token);
}
function authUser(userData) {
var request = new XMLHttpRequest();
request.open('POST', '/login/login.php');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onload = function() {
if (request.responseText == 'true') {
location.href = "/";
}
};
request.send('user_data=' + userData);
}
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>
What this is doing is creating a very basic login button. The button has a callback of onLoginSuccess which is called when the user logs in with Google. It then grabs the users token, via user.getAuthResponse().id_token and makes a post request to https://www.googleapis.com/oauth2/v3/tokeninfo to verify the token (this can be done locally on your backend, Google provides libraries for it. However it's much easier to use the API endpoint). Once it is verified, it sends the response data to authUser, another function, which then passes it to the backend (/login/login.php) to actually start the user session.
login/login.php
<?php
session_start();
$user_data = json_decode($_POST['user_data']);
$_SESSION['user_data'] = $user_data;
echo 'true';
login.php simply starts a session, grabs the posted data, and sets the user session to the data posted. It then echos true so that the JavaScript knows it is done. The JavaScript then sends the user back the home page.
profile/index.php
<?php
session_start();
if (!isset($_SESSION['user_data'])) {
header('Location: /login');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Test Profile</title>
</head>
<body>
<img src=<?php echo $_SESSION['user_data']->picture; ?>><br>
<b>Welcome! <?php echo $_SESSION['user_data']->name; ?></b><br>
Sign out
</body>
</html>
What this page does is first check if the user_data session is set. IF it is not set (meaning the user has not logged in), it redirects them back to the home page. If it is set (meaning they are logged in) then it displays a picture and the users name, and has a logout button. When this is clicked it simply brings the user to /login/logout.php.
login/logout.php
<?php
session_start();
if (isset($_COOKIE[session_name()])) {
setcookie(session_name(), '', time()-3600, '/');
}
session_destroy();
header('Location: /');
All it does is remove all session data for the user, first getting rid of the session cookie and then destroying the actual session. It then leads them back to the home page. Clicking profile will now not allow them to view anything, because they are logged out, and will only display data when they log back in.
That is just a VERY basic and rough way of handling user sessions with the Google API. There are by far better ways (as this example has no real verification on the backend, and sessions are killed when the browser closes, so cookies may be better for you), however this is a general basis for handling user sessions.

Hide div via cookie detection using JavaScript

Objective: To hide an embedded Mailchimp subscribe form from subscribed users, by placing a cookie in their browser after subscribing, which causes the form to be hidden via JS.
What I have so far:
The Subscribe Form is configured, via Mailchimp's settings, to redirect users to a page that contains the following code:
<body>
<script type="text/javascript">
<!--
Cookies.set('subscriber', 'yes');
//-->
</script>
</body>
When the user returns to the homepage, this code should execute:
<script type="text/javascript">
<!--
if ($.cookie('subscriber')) {
mc_embed_signup.style.display = 'none';
}
//-->
</script>
However the form is still displaying. What am I doing wrong?
Site is http://dev.mistcalls.com
Page with cookie creation code is http://dev.mistcalls.com/subconfirm.html`
Cheers

Php/Javascript cross connection issue

So i have a contact page that runs some php and in that php if the email sends through correctly it runs a javascript command. I have two javascript commands one to change page and one to alert the person sending the email. Here is the code:
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
window.location.assign("http://dtc.bz/twitch/index.html");
$('.alertfeed').show();
</script>
<?php
}else { ?>
<script language="javascript" type="text/javascript">
</script>
<?php
}
?>
When I run it. It redirects me to the correct page but the second command within the php page. So how do I get the second line of the javascript run on the page I want it to redirect to?
After the page redirection no code will be executed, that's the reason "$('.alertfeed').show();" is not getting triggered. To do this you have to redirect the page first and on the page you have redirected then execute the next command.
Something like
window.location.assign("http://dtc.bz/twitch/index.html?redirected=yes");
now on the index.html check if redirected param and execute this command in php
<?php if($_GET['redirected']=='yes')
{
echo "<script>$('.alertfeed').show();</script>";
}?>
Update: Using Jquery
$(document).ready(function(){
var url = window.location.pathname;
var pieces = url.split("?");
if(pieces[1]=='redirected=yes'){
$('.alertfeed').show();
}
});
Working Demo:
http://jsfiddle.net/sLEgJ/4/
Your are getting redirected because there is no condition given for redirecting.
Thats why its redirecting you every time you run it.

Categories