Right now, Wix’s standard member login page allows users to login through their Facebook or Google profiles. The issue is we cannot extract any information from Facebook or Google. It would be great if we could automatically pull in my name, profile picture and whatever else along with e-mail. I think I have found the solution.
The problem is we would have to re-create our own login page, which is just a pain. Perhaps if there is enough interest we can lobby for Wix to just add these features as standard???
Copy and paste the code below into an HTML Component. This will create a Google Sign In Button.
Once the user logs into their Google profile, it will getBasicProfile().
Take the result from your HTML component and Message it to your front end code
Store the profile information in your collection.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="["CLIENT"].apps.googleusercontent.com">
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
</script>
@david-seroy Did you do anything with the credentials.json file provided by google? And what backend .js code did you write to get it to send out and receive information from Google.
I appreciate what you are doing. I am really trying to master this coding in wix. Hope to become a wixpert soon.
I am interested in this and even more interested if I could determine via wix users if a user logged in with Google or Facebook profile I want to verify email addresses but not for users that logged in with Google or FB login as those don’t need verification. Any thoughts on how to get that info from wix users?
@david-seroy@mikemoynihan99 Thank you for the help here! I have the HTML component set up with the button and created a client ID/Secret. However, what do i need for the front end code and backend code (if any?). Sorry i am a newbie coder!
//javascript page code for html iframe interaction
// when a message is received from the HTML Component
$w("#iFrameID").onMessage((results) => {
let googleAccoutInfo = results.data;
//string values for each item
let gUserId = results.data.userId;
let firstName = results.data.firstName;
let lastName = results.data.lastName;
let fullName = results.data.fullName;
let unformattedUserEmail = results.data.userEmail;
let idToken = results.data.idToken;
@mikemoynihan99 you are amazing - thank you i will work through this!!!
One more question. I am struggling with the wixlocation.to once the user is registered, logged in - how to have them go to their user page which is www.blahblah.com/AccountHome/{ID} which is the ._id from the “MemberDesignProfile” collection they are inserted into.
Here is the problem:
registered site user ID’s correspond to the _owner ID for the collection.
I query’d my member collection base on _owner ID and used .get for the _id
I can’t figure out how to use this _id in the URL to redirect them to their homepage
CODE BELOW
wixData.query(“MemberDesignProfile”).eq(“_owner”, wixUsers.currentUser.id).find().then((results4) => { let OwnerRegistered = results4.items; let MemberID = OwnerRegistered[0]._id;
wixLocation.to(‘/AccountHome/[MemberID]’); })
Thank you for everything - you have saved me HOURS and HOURS of trying to figure these out!
@shimibe if you haven’t been able to follow the steps above then I would suggest you watch a YouTube video to get a better understanding of how to configure authorization for Google
@mikemoynihan99 and i’m pretty sure i did it right from google’s side, i approved any reasonable URI and even more…
iFrame uses a very strange link: https://www-sbe-studio-com.filesusr.com
notice the ‘-’ instead of ‘dot’, that’s the exact origin URI he showed at the error screen.
i wonder how come it worked for you and i’ve tried many codes, many step-by-step guides and still - always the exact same issue.
@mikemoynihan99 yes i understand that it’s the way it should be, i just don’t see what do i miss. The only option i have in mind is the .json file from google.
I just ignored it completely, should i use it somehow?
I also ignored the Secret, and didnt use a backendfile. I dont find any instructions regarding these options, i’m a newbie, maybe i miss something.
@mikemoynihan99 found a solution!
i needed to add https://filesusr.com to the authorized server list.
thank you for your help, couldn’t do it without you
@mikemoynihan99 how can I " register user with above user details"?
Do I have to do it manually ?
When I try to use “wixUser.Register”, I need to put a password…
How have you been able to register without password ?
Thanks in advance!
