Vanilla 3.2 integration with Prestashop using jsconnect plugin.

testing3

Hello everyone,

Does anyone know how to integrate vanilla forum with Prestashop using the jsconnect plugin? I searched the forum and didn't find any post related to this topic, so I'm asking here.

Hope someone could help.

Any help would be greatly appreciated 😊

Thank you!

Kind Regards

R_J

Doesn't the documentation gives more insights? I never used jsConnect, therefore I really do not know it, but I think it looks quite exhaustive:

https://success.vanillaforums.com/kb/articles/34-jsconnect

https://success.vanillaforums.com/kb/articles/35-jsconnect-quickstart

testing3

Yes, I've read that and followed the steps without any success (it was expected because I'm not a developer)

I'm not able to understand where should I put the files/codes in the Prestashop website.

I guess I'll have to hire a developer for this task.

Thank you so much for your help 😊

Kind Regards

donshakespeare

1. Install the plugin as usual into your Vanilla forum.
2. Read this very short note https://github.com/vanilla/jsConnectPHP/blob/master/README.md
3. Copy this file yourVanillaforum/plugins/jsconnect/functions.jsconnect.php to a prestashop/folder/functions.jsconnect.php
4. The file in #3 would probably contain some nasty errors, please update with the latest here: https://raw.githubusercontent.com/vanilla/jsConnectPHP/master/functions.jsconnect.php
5. In that prestashop/folder you need one more file (that makes 2) to seal things up (that small READ.ME in #2 says so much)
6. In one of my cases, I have tightly integrated this part with my CMS, in another case I have used a mere physical file named something like mysso.php
7. This is what goes into mysso.php, https://github.com/vanilla/jsConnectPHP/blob/master/index.php
8. Of course you will need to initiate prestashop inside mysso.php if using that external file.
9. Replace the dummy code in mysso.php with actual Prestashop code for grabbing User ID, Email, Name etc
10. Recap! prestashop needs two files prestashop/folder/functions.jsconnect.php and prestashop/folder/mysso.php

In mysso.php you'd start by initiating Prestashop at the beginning. Something like the code below should grab the user.

include($prestashopBasePath . '/config/config.inc.php');
$context = Context::getContext();
$customer = $context->customer;
$userID = $customer->id;
$userEmail = $customer->email;
$userFirst = $customer->firstname; //you decide
$userLast = $customer->lastname; //you decide
//$userUsername = customer->username; //depends on special prestashop addon

#9 Replace the dummy code in mysso.php with actual Prestashop code for grabbing User ID, Email, Name etc

<?php

include($prestashopBasePath . '/config/config.inc.php');
$context = Context::getContext();
$customer = $context->customer;
$userID = $customer->id;
$userEmail = $customer->email;
$userFirst = $customer->firstname; //you decide
$userLast = $customer->lastname; //you decide
//$userUsername = $customer->username; //depends on special prestashop addon

require_once dirname(__FILE__).'/functions.jsconnect.php';

// 1. Get your client ID and secret here. These must match those in your jsConnect settings.
$clientID = "1234";
$secret = "1234";

// 2. Grab the current user from your session management system or database here.
$signedIn = true; // this is just a placeholder

// YOUR CODE HERE.

// 3. Fill in the user information in a way that Vanilla can understand.
$user = array();

if ($signedIn) {
    // CHANGE THESE FOUR LINES.
    $user['uniqueid'] = $userID;
    $user['name'] = $userFirst;
    $user['email'] = $userEmail;
    $user['photourl'] = '';
}

// 4. Generate the jsConnect string.

// This should be true unless you are testing.
// You can also use a hash name like md5, sha1 etc which must be the name as the connection settings in Vanilla.
$secure = true;
writeJsConnect($user, $_GET, $clientID, $secret, $secure);

testing3

Thank you so much @donovanb for this detailed tutorial, I'll try it tonight and let you know if I could do it properly.

I forgot to mention that my Prestahop verion is 1.6, will it work with this version or it is for the latest version 1.7? Please let me know.

Thanks again, very much appreciated 😊

Kind Regards.

donshakespeare

@testing3 I am almost certain the user object code is not a huge change from those versions, unless I am mistaken. This process I gave is a generic approach.

Oh, and I think you mentioned the wrong person, poor donovanb :)

Also, don't forget this: go to your vanilla plugin jsconnect settings page and grab client ID and Secret

// 1. Get your client ID and secret here. These must match those in your jsConnect settings.

$clientID = "1234";
$secret = "1234";

If you are interested in using gravatar for your users, you may generate a link from their email address like so and fill up the $user['photourl'] part:

$gravatarEmail = md5(strtolower(trim($userEmail)));
$gravatarEmail = "https://www.gravatar.com/avatar/" . $userEmail. "?d=mp"; //mp is default to Mystery Person (check official gravatar docs)

$user['photourl'] = $gravatarEmail;

testing3

@donshakespeare, please accept my sincere apologies, I mistakenly clicked the name from the mention's drop down list 😀

I'll attempt to integrate according to your tutorial and let you know the result.

And I guess I'll have to put the Prestashop sign in, sign out and registration URLs in the jsconnect plugin settings-

1. Sign In URL=> "Prestashop Sign In Page"
2. Registration URL=> "Prestashop Registration Page"
3. Sign Out URL=> "Prestashop Sign out URL"

And the "Authentication URL in the jsconnect setting should point to the mysso.php file.

And I'll have to create a new folder for the two required files in the root of the Prestahop website something like this- prestashop/include/mysso.php

prestashop/include/functions.jsconnect.php

Please let me know if this is correct.

Kind Regards.

donshakespeare

Yes sir, you are correct on all counts.

Please check your prestashop (you said v1.6) folder tree

You want your new sso folder to be able to reach the official core config.inc.php file

https://devdocs.prestashop.com/1.7/basics/installation/configuration/#config-inc-php

So,

(core file)

prestashop/config/config.inc.php

(your files)

prestashop/include/mysso.php

prestashop/include/functions.jsconnect.php

//prestashop/include/mysso.php
<?php
//include($prestashopBasePath . '/config/config.inc.php');
include (dirname(dirname(__FILE__)). '/config/config.inc.php');

donshakespeare

For your existing prestashop users logged in already to your prestashop site, you can give them a special link to reach the forum if you want to carry over their credentials. community.example.com/forum/sso

And vanilla will log them into your vanilla automatically by virtue of the /sso appendix.

testing3

Thank you so much @donshakespeare sir!

I followed the steps and saved the files in the directory "/include/mysso.php" and "/include/functions.jsconnect.php"

When I login to my Prestashop website and after that try to access the https://forum.example.com/sso then I get this error-

Whoops!

Your sso timed out during the request. Please try again.

my forum is hosted on a sub domain "forum.example.com" and the Prestashop website is hosted on the main domain https://www.example.com.

Now where should I look for the error? Please let me know.

Kind Regards

donshakespeare

1. Open your vanilla jsconnect settings page and "test url"

2. Did you update your mysso.php with https://raw.githubusercontent.com/vanilla/jsConnectPHP/master/functions.jsconnect.php

3. When doing your testing from your main site to the forum, leave your browser's dev tool's console open to see what JS errors are being spit out.

4. AFTER trying all the above and if all fails, download this https://open.vanillaforums.com/addon/jsconnect-plugin-1.5.5

and replace your functions.jsconnect.php

donshakespeare

There is a nasty header assumption within the latest jsconnect code that I suspect is the issue for you. So, when you try #4 let us know.

testing3

1. The testing URL giving 500 error, I entered https://www.example.com/include/mysso.php as the Authentication URL.

And this is the code in the mysso.php file-

<?php
include (dirname(dirname(__FILE__)). '/config/config.inc.php');
$context = Context::getContext();
$customer = $context->customer;
$userID = customer->id;
$userEmail = customer->email;
$userFirst = customer->firstname; //you decide
$userLast = customer->lastname; //you decide
//$userUsername = customer->username; //depends on special prestashop addon
require_once dirname(__FILE__).'/functions.jsconnect.php';
// 1. Get your client ID and secret here. These must match those in your jsConnect settings.
$clientID = "977xxxx48";
$secret = "29xxxxxxxxxxx089eee2c543f";
// 2. Grab the current user from your session management system or database here.
$signedIn = true; // this is just a placeholder
// YOUR CODE HERE.
// 3. Fill in the user information in a way that Vanilla can understand.
$user = array();
if ($signedIn) {
    // CHANGE THESE FOUR LINES.
    $user['uniqueid'] = $userID;
    $user['name'] = $userFirst;
    $user['email'] = $userEmail;
    $user['photourl'] = '';
}
// 4. Generate the jsConnect string.
// This should be true unless you are testing.
// You can also use a hash name like md5, sha1 etc which must be the name as the connection settings in Vanilla.
$secure = true;
writeJsConnect($user, $_GET, $clientID, $secret, $secure);

• I couldn't understand how to update the mysso.php file with the https://raw.githubusercontent.com/vanilla/jsConnectPHP/master/functions.jsconnect.php
• The dev tool's console is not showing any error.
• I've downloaded and replaced the functions.jsconnect.php file but still getting the error same.

Please let me know if I'm missing something.

Kind Regards.

donshakespeare

1. Does your prestashop config.in.php exist, and where is it located?
2. make sure this is referencing it properly include (dirname(dirname(__FILE__)). '/config/config.inc.php');

Test your example.com/mysso.php file directly in the browser from now on until you stop getting 500 error.

I would start with ...

<?php
include (dirname(dirname(__FILE__)). '/config/config.inc.php');
die('hello');
?>

You should get "HELLO"

Then this:

<?php
include (dirname(dirname(__FILE__)). '/config/config.inc.php');
$context = Context::getContext();
die(var_dump($context));
?>

You should get a huge something ...

testing3

The config.inc.php exist and located in the httpdocs/conf/config.inc.php.

The other two files are located in httpdocs/include/functions.jsconnect.php and the mysso.php is also in the same folder.

I'm getting the "hello" and the huge data in the browser by running both provided codes.

I'm using NGINX revers proxy on the main website with php 7.1.

And vanilla forum is hosted on a sub domain and running on php 7.3 with the Apache server.

I tried to run the main Prestashop website with Apache and still getting the 500 error.

Should I provide the huge data here? Please let me know.

Thank you so much for your help, very much appreciated.

Kind Regards.

donshakespeare

Excellent! It is not a pain at all troubleshooting with you and folks like you.

Yes, please provide the huge data, redacting any important info of course

1. Oh wait ...
2. I am an idiot
3. Look here! I spy with my hollow eye, a missing dollar sign.... Should be $customer->email ... etc , instead of customer->email
4. And the root of all evil and 500 errors is $

$customer = $context->customer;
$userID = customer->id;
$userEmail = customer->email;
$userFirst = customer->firstname; //you decide
$userLast = customer->lastname; //you decide

testing3

Ok, so now it should look like this?

<?php
include(dirname(dirname(__FILE__)).'/config/config.inc.php');
$context=Context::getContext();
$customer = $context->customer;
$userID = $customer->id;
$userEmail = $customer->email;
$userFirst = $customer->firstname;//youdecide
$userLast = $customer->lastname;//youdecide

Please let me know if it is correct, because after editing it like this, I'm getting this error when browse the file in the browser-

{"error":"invalid_request","message":"Missing the v parameter."}

donshakespeare

Yup! that is good! Now go to jsConnect plugin settings and "Test Url"

testing3

Never mind, the authantication URL was http, so I made it https and it's working now!!

@donshakespeare You're really a GREAT person and developer, thank you so much for your kindness and help 😊

Now just few more questions-

1. If a member clicks the Sign in or register button on the forum and redirected to the Prestashop website for signing in/registering, then how to redirect them back to the forum after signing in/registering?
2. if a member creates an account on the forum using social network (FB, Twitter or Gmail) and then visits the main Prestashop website, then an account will be created automatically on the Prestashop website or not? is there any special URL (like the /sso) which I should add to link to the Prestashop website? Please let me know.

Thank you!

Kindest Regards

donshakespeare

Glad you got that thing solved... hurrah!

1. As for Prestashop specifics I'd check here:

https://www.prestashop.com/forums/topic/622034-redirect-after-login-prestashop-17/

and here:

https://www.prestashop.com/forums/topic/396588-redirect-after-login-16/

2. No! JsConnect is a minimalist SSO one-way solution. What happens in Vanilla stays in Vanilla :) If you want my advice, DO NOT allow any other form of login into your forum when using SSO. Handle all that stuff from the mother site, in your case Prestashop. This allows you room to switch out forum software.

3. User lands in your mother site: they see all the available logins, by email, facebook, twitter etc .... see here

https://addons.prestashop.com/en/social-login-connect/39733-social-login-32-social-networks.html

https://www.knowband.com/prestashop-free-social-login

testing3

Thank you so much for sharing the GREAT info.

I'll just add the forum/sso button on the login page to visit the forum after signing up, and that should be enough 👍️

Thanks again from the bottom of my heart for your GREAT help 😊

Kind Regards.