I want to implement Google login in my site like is done in
Stack Exchange, Stack Overflow and more.
Meaning that when the user choose Login using Google authentication, the site redirects to a page where he can choose which Google account to use and without opening a new window/tab and redirect to the site
Can you help me with links/documentation how to do it
Very important not to open new tab/window.
I'm using this: https://developers.google.com/identity/sign-in/web/build-button
You can see that when you click on the button a new window is open, I wand to prevent this.
Thanks in advance
You could try to switch to the JavaScript client authentication and pass the ux_mode option to the signIn() function options.
ux_mode: "redirect"
Documentation here:
https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions
Then you can get the user profile like so:
let googleUser = window.gapi.auth2.getAuthInstance().currentUser.get();
if (googleUser) {
let profile = googleUser.getBasicProfile();
if (profile) {
this.state.google.firstname = profile.getGivenName();
this.state.google.lastname = profile.getFamilyName();
this.state.google.email = profile.getEmail();
}
}
This is all documented here and there:
https://developers.google.com/identity/sign-in/web/people
Just add data-ux_mode="redirect" to the sign-in div from the Google's example (or to the .render call if you're rendering the login-button programmatically)
<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect"></div>
GAPI is now being discontinued, and Google is transitioning to Google Identity Services (GIS). The new method is similar to that which was suggested by #AlexfromJitbit, with some small modifications:
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-ux_mode="redirect"
data-login_uri="https://www.example.com/your_login_endpoint">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
This code is pulled from the new GIS example, and is recommended for all new applications as the old API will be retired as of 31 March 2023.
Related
i'm trying to automate a login and logout script using javascript, but whenever it logs in, the console code clears up. is there a way to make it run thesame script after login? so that it will be able to logout automatically?
this script logs in but after login, it clears the console so it doesn't see the logout code:
var login= document.querySelector("button[type='submit']");
login.click();
var logout = document.querySelector("a[href='https://example.com/logout.php']");
logout.click();
console always refresh when you move page. so i think it's impossible to do it. if you want to make auto login system. maybe selenium or electron are the best way to make it.
here is the link that can help.
#selenium use python :
https://www.selenium.dev/
#electron use nodejs :
https://www.electronjs.org/
I know you wanted to run function on next page, but, anyways, here's what you could do if you stay on the same page:
function login() {
document.getElementById("bye").style.display="none";
document.getElementById("login").style.display="none";
document.getElementById("content").style.display="";
document.getElementById("logout").style.display="";
}
function logout() {
document.getElementById("bye").style.display="";
document.getElementById("login").style.display="";
document.getElementById("content").style.display="none";
document.getElementById("logout").style.display="none";
}
<div id="bye" style="display:none">Bye!</div>
<div id="login"><button id="loginBtn" onclick="login()">Login</button></div>
<div id="content" style="display:none">content</div>
<div id="logout" style="display:none"><button id="logoutBtn" onclick="logout()">Logout</button></div>
I have created simple ".aspx" content page, and added this page as a Tab in "Microsoft Teams". I want to get the "SharePoint Url" of Microsoft Team where content page added as Tab. To do this I need "microsoftteams.context" object. Please let me know how to resolve this problem. I tried below code (with microsoft teams JS library) but its not working.
microsoftTeams.initialize();
microsoftTeams.getContext(function(Context) {
alert("getcontext call back function");
alert(Context.teamName);
});
microsoftTeams.initialize();
microsoftTeams.getContext(function(Context) {
alert("getcontext call back function");
alert(Context.teamName);
});
Here is sample code to fetch teamSiteUrl.
<p>
Welcome to Microsoft Teams Hello World sample app (C#)
</p>
<script src="https://statics.teams.microsoft.com/sdk/v1.4.2/js/MicrosoftTeams.min.js"></script>
<script>
microsoftTeams.initialize();
microsoftTeams.getContext(function (context) {
alert(context.teamSiteUrl);
//teamSiteUrl will give you sharepoint url of the team.
});
</script>
Please give it a try and let us know if you are facing any issue.
I'm implementing the invisible recaptcha on rhe login page on my website, following the official guide about how to "Automatically bind the challenge to a button":
https://developers.google.com/recaptcha/docs/invisible#auto_render
My html page is made in this way:
<head>
[...]
<script src="js/login.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
[...]
<button type="submit" class="g-recaptcha btn btn-primary" data-sitekey="[...]" data-callback="checkCaptcha" id="loginSubmit">Login <i class="fas fa-sign-in-alt"></i></button>
[...]
</body>
</html>
while the javascript file is:
function checkCaptcha(token) {
console.log("re-captcha callback invoked.");
login();
}
function login() {
[...]
}
But on the panel page of Google I keep having the message
"We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information."
Could some one help me to understand what a I wrong?
Thank you so much in advice.
When the user solves the captcha puzzle(or clicks on the submit button) at your html page Google recaptcha adds another hidden input value to your <form> named g-recaptcha-response or parse to the given data-callback function. It contains a string value, which you should send back to Google in order to verify the response from the server side.
Without the server-side verification part recaptcha is useless. API request details are as follow,
URL: https://www.google.com/recaptcha/api/siteverify
METHOD: GET / POST(Recommended)
PARAMETERS:
secret (Required. The shared key between your site and reCAPTCHA.)
response (Required. The user response token provided by reCAPTCHA, verifying the user on your site.)
remoteip (Optional. The user's IP address.)
Read the Google's documentation on Verifying the user's response to know more.
I got specs that need a little work before I can be sure it can be implemented. I'd appreciate to hear comments and suggestions on the following scenario:
I need a web software where users log in. All users have a user account AND can have 0-3 secondary user accounts, which they can use via the main website while authenticated. The secondary user accounts are controlled by a third-party javascript library, but I can control the usernames and passwords that are stored in a database.
Goal is to enable users to not have to authenticate several times, only using one user account and the ohter ones should work automatically via script.
So, is there a viable, secure and proper way to accomplish this? I know playing with user names and passwords in script is a security issue in itself but hopefully I can find the next best thing if this can't be done properly. I will use Asp.Net MVC as a platform, with all calls made using ajax, so the software will look and feel like a single page application. The underlying technology is irrelevant though, any server side technology can be used here.
There are some options to play with:
Basically I can use any user name and password for authentication, it's just a matter of which fields in which tables to compare
I can force all of the user accounts' passwords to be the same so user doesn't have to remember/use many passwords
I can retrieve the secondary user names from db in the login call so the website will have access to secondary user names, but obviously I can't do that to passwords as they are hashed/salted in the db
Here's one thought I've been toying around with:
First show a login page. Authentication is done via ajax and credentials are saved on the login form, which gets hidden when user logs in. In the success callback event of the login call we can show the main content that the ajax call can return (this could be something like the main page of the authenticated users. Since the original credential fields are still on the page they can be accessed via script and used for the secondary system credentials.
However, I'm not convinced this is a secure way to handle the secondary system logins, even though I could have https throughout the site. I just don't know what the actual security issue here would be. Comments, experts? Better ways to accomplish the same?
The login page and main structure could look like this (a VERY simple example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="/Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function VerifyUser(name, pass, remember, container) {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=UTF-8',
url: 'Account/VerifyUser',
data: JSON.stringify({ "userid": name, "password": pass }),
processData: false,
success: function (response) {
if (response.Success) {
// Here I could stash the password somewhere if needed.
// It's not visible in the source code but it is accessible via jquery
$('#secondarypass').val(pass);
// Here I can show the html data that the ajax call could return, or
// send out another ajax call to retrieve the actual content separately.
//Show here data that was returned by ajax call in response object. This could be a main page etc
$("#maincontainer").show();
$("#maincontainer").html(response.Message);
$("#logincontainer").hide();
}
},
error: function (a, b, c) {
$("#maincontainer").show();
$("#maincontainer").html(a.responseText);
}
});
return false;
}
</script>
</head>
<body>
<div class="page">
<input id="secondarypass" type="password" />
<div id="logincontainer">
<input id="UserName" name="UserName" type="text" value="" />
<input id="Password" name="Password" type="password" />
<button onclick="javascript:VerifyUser($('#UserName').val(), $('#Password').val());">Log In</button>
</div>
<div id="message"></div>
<div id="maincontainer">
<!-- this is where the main content of the software would be -->
</div>
</div>
</body>
</html>
And the ajax call could return something like this
<script type="text/javascript" src="/Scripts/secondarysystem.js"></script>
<script type="text/javascript">
function SecondaryLogin() {
var data = {
'username': 'mysecondaryusername',
'pass': $("#secondarypass").val() //NOTE here I could access the password-stash I set up earlier
};
var system = new SecondarySystem(); //This could be an object from the secondarysystem.js library
system.LogIn(data);
// this could have a onsuccessfullogin callback event, where we could populate some secondary system specific data to the div below
}
</script>
<div id="secondarycontainer">
</div>
In this setup a page refresh would cause problems, but I can disable f5 (or replace it with reloading the right content) and at least add a dialog saying "refresh will force you to re-login, sure to leave this page?" etc.
The thought you 've been toying around , sounds good, and it has been practiced by many of us. there are few problems you mentioned you dont want to face, here are some points you can keep in mind if you really gonna make it a single page application.
1.Refresh F5
If refresh is your problem you can probably use localstorage so your username and password are not lost when page refresh.
Is it secure ?
I think you can store your password variables encrypted so you only decrypt it when you need to authenticate the user. For encryption you can refer to https://sourceforge.net/projects/pidcrypt/ (URL update).
I have added this code
<div class="g-ytsubscribe" data-channelid="UClaHcVK3_3vgPZHzYuaLPdQ" data-layout="default" data-count="default"></div>
to my website to embed a subscribe button there. I have also added
<script src="https://apis.google.com/js/platform.js"></script>
to the header. but when user clicks on the button he gets a Network Error like the following
"NetworkError: 400 Bad Request - https://www.youtube.com/subscription_ajax?action_create_subscription_to_channel=1&c=UClaHcVK3_3vgPZHzYuaLPdQ&eurl=http%3A%2F%2Fexclusivesurgery.com%2F"
could you please tell me how i can fix this?
Thanks
YouTube Subscribe Button
The YouTube Subscribe Button lets you add a one-click Subscribe button
to any page. The button lets people subscribe to your YouTube channel
without having to leave your site to either log in to YouTube or
confirm their subscriptions.
To add a button, your application needs to load this JavaScript file:
https://apis.google.com/js/platform.js
You can add a button by using
an element, such as a <div>, that sets its class to g-ytsubscribe and
uses other attributes to customize the button. The code below shows a
simple integration that displays a Subscribe button for the
GoogleDevelopers channel.
<script src="https://apis.google.com/js/platform.js"></script> <div
class="g-ytsubscribe" data-channel="UClaHcVK3_3vgPZHzYuaLPdQ"></div>
<script>
function onYtEvent(payload) {
var logElement = document.getElementById('ytsubscribe-events-log');
if (payload.eventType == 'subscribe') {
logElement.innerHTML = 'You will love this channel! :D'
} else if (payload.eventType == 'unsubscribe') {
logElement.innerHTML = 'We are sorry you are unsubscribing. :('
}
if (window.console) {
window.console.log('ytsubscribe event: ', payload);
}
}
</script>
<div class="g-ytsubscribe" data-channel="UClaHcVK3_3vgPZHzYuaLPdQ" data-onytevent="onYtEvent"></div>
<div id="ytsubscribe-events-log"></div>
Take at https://developers.google.com/youtube/youtube_subscribe_button to generate the proper button code.
You can't fix this until Google fixes it themselves.