Hi all - A long one from me, appreciate any support and thank you in advance!
Background
I’ve created a custom sign in/up process for users to access my site, which currently works using regular email and password that the user has inputted during a custom registration. I’m now looking to implement Google sign in/up. The aim is for user to have the option to sign-in/up using email/password or via Google.
I’ve been following these previous posts:
https://www.wix.com/corvid/forum/community-discussion/solution-google-facebook-user-information-on-login
https://www.wix.com/corvid/forum/community-discussion/custom-registration-google
https://www.wix.com/corvid/forum/community-discussion/solution-google-facebook-user-information-on-login
What I have implemented so far:
Users data is saved in the ’ mymarks ’ collection.
-
Place a HMTL iFrame on your page an enter the relevant HTML code into it to allow user authentication - DONE
-
Register your website on Google or Facebook to receive a client ID and Secret.
(once registered you can set the website address the user will see in the message during authentication) - DONE -
Add your client ID to the HTML iFrame code. - DONE
4 Add Javascript code to your page to receive the Google/Facebook user info from the HMTL iFrame. - DONE (I believe?)
///javascript page code for html iframe interaction
// when a message is received from the HTML Component
$w("#html1").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;
console.log(gUserId);
console.log(firstName);
console.log(lastName);
console.log(fullName);
console.log(unformattedUserEmail);
console.log(idToken);
///proceed to start session or register user with above user details
-
Add Javascript code to your page to register the user on your website.
This is what I am struggling with - help would be appreciated! -
Store the profile information in your collection.
This is also what I am struggling with for a few reasons:
First question being, I have a registration process which requires a number of personal data such as profile image and name but also company name, job title etc… but as I can only obtain a few details from Google, how can I store the users Google profile information in ‘mymarks’ collection? Once the details are stored the user is to be redirected to the ‘create-profile’ page in order to complete the registration process - therefore Google’s information and the rest of the inputted information to be saved under one item in the collection?
Secondly, is there a way for the user to register via Google? Both having a sign up Google button and a way to detect whether or not the user has logged in via Google before so if they click sign-in and they don’t have an account with us, to redirect them to sign-up?
Custom Sign-in
//LOGIN
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
import wixData from 'wix-data';
import { local, session } from 'wix-storage';
$w.onReady(function () {
$w("#MainSignIn").disable();
$w("#login2").disable();
if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
$w("#image95").hide();
$w("#adminButton").hide();
}
$w.onReady(function () {
$w("#forgotPassword").onClick((event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then(() => {
//
})
.catch((err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
$w.onReady(function () {
$w("#forgotpasswordShow").onClick((event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then(() => {
//
})
.catch((err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
$w.onReady(function () {
$w('#MainSignUp').disable();
$w('#MainSignUp').onClick(function () {
let email = $w('#emailsignup').value;
let password = $w('#passwordsignup').value;
$w("#MainSignUp").label = "Signing up..."
$w("#MainSignUp").disable();
wixUsers.register(email, password)
.then(() => {
local.setItem("creates", "123456");
wixLocation.to('/create-profile');
})
.catch((err) => {
console.log(err);
$w("#signupHiddenPasswordicon").hide();
$w("#signupVisiblepasswordicon").hide();
$w("#MainSignUp").label = "Sign up"
$w("#login2").label = "Sign in?"
$w("#MainSignUp").enable();
$w("#ErrorTextWarning").expand();
$w("#ErrorTextWarning").show();
$w("#passwordSignupError").show();
$w("#login2").disable();
});
});
});
})
Logout button
export function LogOutButton_click() {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then(() => {
wixLocation.to('/home');
wixWindow.openLightbox("Custom Form");
});
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin({ "mode": "login" })
.then((user) => {
userId = user.id;
return user.getEmail();
})
.then((email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("mymarks")
.eq("_id", userId)
.find();
})
.then((results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("mymarks", toInsert)
.catch((err) => {
console.log(err);
});
}
})
.catch((err) => {
console.log(err);
});
}
}