Google’s log-in API already has handlers set up
https://developers.google.com/identity/sign-in/web/sign-in
The “Additional Capabilities” section has what you need.
Solution 1 :
Solution 2 :
So the thing was that instead of using display: run-in; for the login and login_success class I should have used display: flex;.
But this only seems to work on Chrome, on other browsers I get Error 400 redirect_uri_mismatch but that’s probably for another topic.
Problem :
I recently wrote a website using HTML and it uses Google’s OAuth. After a successful login, a script written in JavaScript using jQuery is supposed to hide sections with a class of “login” and display sections with class of “login_success”. Sadly after a successful login everything is getting displayed which makes the website look really messy.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>A test website</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="google-signin-client_id" content="token">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts/login.js"></script>
</head>
<body>
<header class="site-header clearfix">
<nav>
<div class="logo" id="top">
<h1><a href="#top"><img src="images/logo.png" id="logo_image"></a></h1>
</div>
<div class="menu login">
<ul>
<li><a href="#info">Info</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#download">Download</a></li>
<li><button class="g-signin2" data-onsuccess="onSignIn">Login</button></li>
</ul>
</div>
<div class="menu login_success">
<ul>
<li><a href="">Blogs</a></li>
<li><a href="#contact">Anouncments</a></li>
<li><a href="#download">Admin</a></li>
<li><button onclick="signOut()">Sign out</button></li>
</ul>
</div>
</nav>
<section class="login_success">
<div class="data">
<img id="profile_picture"/>
<h1>Welcome</h1>
<h1 id="name"></h1>
<p>Email adress:</p>
<p id="email"></p>
</div>
</section>
<section class="login">
<div class="leftside">
<img src="images/preview1.png">
</div>
<div class="rightside">
<h1>Some header text</h1>
<p>Some more text...</p>
<button onclick="window.location.href='#info'">Click me!</button>
</div>
</section>
</header>
</body>
</html>
Here is the css for class “login” and “login success”:
.login{
display: run-in;
}
.login_success{
display: none;
}
Here is the login.js file:
function onSignIn(googleUser) {
var profile=googleUser.getBasicProfile();
$(".login").css("display","none");
$(".login_success").css("display", "run-in");
$("#profile_picture").attr("src",profile.getImageUrl());
$("#email").text(profile.getEmail());
}
Comments
Comment posted by caniuse.com/#feat=run-in
Are you aware that
Comment posted by isherwood
Where is
Comment posted by isherwood
Protip: If you want to be taken seriously as a professional, take those red squiggly lines that show your spelling errors seriously.
Comment posted by GawronDev
@Turnip thanks for the answer, I wasn’t aware of that!
Comment posted by GawronDev
@isherwood it’s getting called after a successful login via Google. (line 23 in HTML)
Comment posted by isherwood
Link-only answers are not considered valuable here. Please include the relevant information in your answer.