Kia Ora people,
I am trying to implement SSO for our site, however although it did work on our usual platform we are migrating to wix, and the use of velo has restricted alot of what i could do with this implementation,
is there anyone that could write a guide on the sso documentation in a velo version?
thanks team!
Here is the documentation i have made for the current sso.
Implementation of distrodirect SSO through javascript:
1 - Include Jquery for ajax post requests
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2 - Enviorment setup
These are neccesary fields to complete SSO. Contact distro team if you are unsure of your COMPANY_DOMAIN or COMPANY_ID
<script>
//The reseller companies domain
/*---
Note: Your reseller company domain can be either custom or standard:
standard = www.distro.direct/{company domain}
custom = {company domain}
---*/
const COMPANY_DOMAIN = null;
//The reseller company ID (ask DistroDirect Support)
const COMPANY_ID = null;
//Email and password credentials of the user
const USER_EMAIL = null;
const USER_PASSWORD = null;
//First and last name of the user
const USER_FIRST_NAME = null;
const USER_LAST_NAME = null;
//The 2-Letter ISO code of the country of the user
const COUNTRY = null;
//The unique / static ID in the source system
const USER_UNIQUE_ID = null;
//Token
const AUTH_TOKEN = null;
</script>
3 - HTML setup
Add this hidden href somewhere on the page. This href will be set to redirect users to distribution after they are logged in / signed up
<a id="redirect_after_login" style="display: none;" href="#"></a>
4 - Auxillary functions for SSO
There is no need to edit anything in this section. Just import the javascript to the relevant page
<script>
//3.1 - A function to login and re-direct to the reseller site when email and password are confirmed
function login(data) {
//Set the redirect location of the user (you can change dashboard.php to a different file if you want)
$("#redirect_after_login").attr("href", ("https://" + COMPANY_DOMAIN + "/dashboard.php"))
var data1=JSON.parse(data);
var email=data1.email;
var password=data1.password;
var from_iframe=data1.from_iframe;
var status=data1.status;
var user_resel_id=data1.user_resel_id;
var dataform = document.createElement("form");
document.body.appendChild(dataform);
dataform.setAttribute("action",("https://" + COMPANY_DOMAIN + "/recheckLogin.php"));
dataform.setAttribute("style","display:none");
dataform.setAttribute("enctype","multipart/form-data");
dataform.setAttribute("method","POST");
dataform.setAttribute("target","_parent");
dataform.innerHTML =
'<input type="hidden" name="email" value="' + email + '"/>'+
'<input type="hidden" name="pa" value="' + password + '"/>'+
'<input type="hidden" name="from_iframe" value="' + from_iframe + '"/>'+
'<input type="hidden" name="status" value="' + status + '"/>'+
'<input type="hidden" name="user_resel_id" value="' + user_resel_id + '"/>'+
'<input type="hidden" name="redirect_path" value="' + $("#redirect_after_login").attr("href") + '"/>'+
'<input type="submit" value="Click me" />';
dataform.submit();
}
//3.2 - A function to assist with serialising the data required for signup to the reseller company distribution
function makeCURLdata(firstname, lastname, country, email, password, companyID, unique_ID, token) {
data = "firstname=" + encodeURIComponent(firstname) + "&";
data += "lastname=" + encodeURIComponent(lastname) + "&";
data += "country_id_hidden=" + encodeURIComponent(country) + "&";
data += "email=" + encodeURIComponent(email) + "&";
data += "password=" + encodeURIComponent(password) + "&";
data += "confirm_password=" + encodeURIComponent(password) + "&";
data += "is_agree=on" + "&";
data += "ResellerCompanyID=" + encodeURIComponent(companyID) + "&";
data += "registration_from_button=" + encodeURIComponent("Register Now") + "&";
data += "unique_ID=" + encodeURIComponent(unique_ID) + "&";
data += "auth=" + encodeURIComponent(token);
return data;
}
</script>
5 - The SSO function to trigger
Trigger this function when you want a user to be redirected / signed up then redirected to distribution
<script>
function SSO() {
//Curl the login servers to determine if user account already exists
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/login_ssos.php'),
type: 'POST',
data: makeCURLdata(
USER_FIRST_NAME,
USER_LAST_NAME,
COUNTRY,
USER_EMAIL,
USER_PASSWORD,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN
),
success:function(data){
var data1=JSON.parse(data);
//If the user account exists, then login and redirect
if(data1.status=="success") {
login(data);
}
//If the user account does not exist, then create an account for them
else{
//Curl the signup servers to create account
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/signup_ssos.php'),
type: 'POST',
//The data required for signup is concatenated by the makeCURLdata function
data: makeCURLdata(
USER_FIRST_NAME,
USER_LAST_NAME,
COUNTRY,
USER_EMAIL,
USER_PASSWORD,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN
),
success:function(data){
//If user creation is succesfull then once again attempt to curl the login servers
var data1=JSON.parse(data);
if(data1.status=="success") {
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/login_ssos.php'),
type: 'POST',
data: makeCURLdata(
USER_FIRST_NAME,
USER_LAST_NAME,
COUNTRY,
USER_EMAIL,
USER_PASSWORD,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN
),
//This time the login should ba a success as the account has been created
success:function(data){
console.log("here");
var data1=JSON.parse(data);
if(data1.status=="success") {
//Login and redirect
login(data);
}
else{
//This error should not occur
alert("internal error with login after account creation");
}
},
error:function() {
//incorrectly formated login curl request
alert("error with secondary login curl request")
}
});
}
else {
//incorrectly formated user data for signup
alert("Internal error with signup request: " + data);
}
},
error:function() {
//incorrectly formated signup curl request
alert("error with signup curl request")
}
});
}
},
error:function() {
//incorrectly formated login curl request
alert("error with inital login curl request");
}
});
}
</script>
6 - Example SSO button trigerring single sign on
<button value="Activate your distribution" onclick="SSO()"></button>
Implementation of details syncing with distrodirect through javascript:
In the event that a user changes their details on your site you will need to alert distrodirect so we can update the details on our end as well
1 - Enviorment setup
Many of the constants set in the SSO section are required here as well
<!--
const COMPANY_DOMAIN = null;
const COMPANY_ID = null;
const USER_EMAIL = null;
const USER_FIRST_NAME = null;
const USER_LAST_NAME = null;
const COUNTRY = null;
const USER_UNIQUE_ID = null;
-->
2 - Auxillary functions for details sync
There is no need to edit anything in this section. Just import the javascript to the relevant page.
NOTE:
This function has the capability of syncing any of the fields listed as parameters (Except for your auth token)
How to call this function:
1 - Make the field which you wish to update null
2 - Make the new_field variable the new value that you would like to update that field to
e.g. If I wanted to update the password of the user I would call
makeUpdateDetailsCURLData(USER_FIRST_NAME, USER_LAST_NAME, COUNTRY, USER_EMAIL, null, COMPANY_ID, USER_UNIQUE_ID, AUTH_TOKEN, desired_new_password)
<script>
function makeUpdateDetailsCURLData(firstname, lastname, country, email, password, companyID, unique_ID, token, new_field) {
data = "firstname=" + encodeURIComponent(firstname) + "&";
data += "lastname=" + encodeURIComponent(lastname) + "&";
data += "country_id=" + encodeURIComponent(country) + "&";
data += "email=" + encodeURIComponent(email) + "&";
data += "password=" + encodeURIComponent(password) + "&";
data += "company_id=" + encodeURIComponent(companyID) + "&";
data += "unique_ID=" + encodeURIComponent(unique_ID) + "&";
data += "auth=" + encodeURIComponent(token) + "&";
data += "new_field=" + encodeURIComponent(new_field) + "&";
return data;
}
</script>
3 - There are a number of different details sync functions to use
How you deal with success or failure of this function is optional, an example is given below with some console log statements
3.1 - password sync (as in exmaple)
<script>
function passwordSYNC(new_password) {
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/details_update_ssos.php'),
type: 'POST',
data: makeUpdateDetailsCURLData(
USER_FIRST_NAME,
USER_LAST_NAME,
COUNTRY,
USER_EMAIL,
null,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN,
new_password
),
success:function(data){
if(data=="Success")
{
console.log("Password update success");
}else{
console.log("Password update failure\n" + data);
}
},
error:function() {
console.log("Error with password sync curl request")
}
});
}
</script>
3.2 - user email sync
<script>
function emailSYNC(new_email) {
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/details_update_ssos.php'),
type: 'POST',
data: makeUpdateDetailsCURLData(
USER_FIRST_NAME,
USER_LAST_NAME,
COUNTRY,
null,
USER_PASSWORD,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN,
new_email
),
success:function(data){
if(data=="Success")
{
console.log("Email update success");
}else{
console.log("Email update failure\n" + data);
}
},
error:function() {
console.log("Error with Email sync curl request")
}
});
}
</script>
3.3 - user first name sync
<script>
function fnameSYNC(new_first_name) {
$.ajax({
url: ('https://' + COMPANY_DOMAIN + '/details_update_ssos.php'),
type: 'POST',
data: makeUpdateDetailsCURLData(
null,
USER_LAST_NAME,
COUNTRY,
USER_EMAIL,
USER_PASSWORD,
COMPANY_ID,
USER_UNIQUE_ID,
AUTH_TOKEN,
new_first_name
),
success:function(data){
if(data=="Success")
{
console.log("First name update success");
}else{
console.log("First name update failure\n" + data);
}
},
error:function() {
console.log("Error with Email sync curl request")
}
});
}
</script>
3.4 - A number more of almost identical functions can be created and called following the above trend:
The supported fields to sync are:
1 - USER_PASSWORD
2 - USER_EMAIL
3 - USER_UNIQUE_ID
4 - COUNTRY (provide ISO code)
5 - USER_FIRST_NAME
6 - USER_LAST_NAME
4 - Example Update password button that takes a text input and trigers password sync
<input type="text" id="new_password">
<button type="button" id="updatePassword">Update Password</button>
<script>
$("#updatePassword").click(function(){
var new_password = $("#new_password").val();
passwordSYNC(new_password);
});
</script>
4.1 - Example Update firstname button that takes a text input and trigers password sync
<input type="text" id="new_first_name">
<button type="button" id="update_first_name">Update firstname</button>
<script>
$("#update_first_name").click(function(){
var new_first_name = $("#new_first_name").val();
fnameSYNC(new_first_name);
});
</script>
