Tutorial: Authentication with Social Media

In this tutorial we will see how to create a control to perform authentication only with social networks. (It is not necessary to create everything, just take one)

1. Create a control type application.

2. In the application menu, go to “Authentications”.

You must have the configuration data of each social network. Follow the tutorials available in our database:

3. After having all the data for the configuration, go to the application menu “Programming> PHP Methods” and click on “New Method“.

4. Create three methods for your social network: – fb_return – go_return – tw_return

5. For each method, you must add some lines of code.

. For the “fb_return” method type:


if(!Empty([facebook_error_code]))
{
sc_error_message(urlencode([facebook_error_msg]));
}
else
{
[auth_type] = "facebook";
[user_id] = [facebook_user];
[user_photo] = [facebook_photo];
[user_name] = [facebook_name];
sc_redir("NAME_OF_YOUR_APPLICATION");
}

For the method “go_return” write:

[auth_type] = "google";
[user_id] = [google_user];
[user_photo] = [google_photo];
[user_name] = [google_name];
sc_redir ("NAME_OF_YOUR_APPLICATION");

For the method “tw_return” write:

[auth_type] = "twitter";
[user_id] = [twitter_user];
[user_photo] = [twitter_photo];
[user_name] = [twitter_name];
sc_redir ("NAME_OF_YOUR_APPLICATION");

The above codes are for receiving user data.

6. Return to the “Authentication” application menu and select the “Return method” of each of the social networks according to the methods created above.

7. In the application menu, go to “Fields” and click on “New Field“.

8. In the “Quantity” enter 4.

9. Create the fields: tip, photo, id and name, all of the type label.

10. In the application menu, go to “Events> onLoad” and enter the following code to update user information based on the social network.

if ((isset ([auth_type])) && (! empty ([auth_type]))) {
switch ([auth_type]) { 
case "twitter":
{tip} = {lang_auth_logged}. "Twitter!"; break;
case "google":
{tip} = {lang_auth_logged}. "Google+!"; break;
case "facebook":
{tip} = {lang_auth_logged}. "Facebook!"; break;

}
{photo} = "<img src = '". [user_photo]. "' />";
{id} = [user_id];
{name} = [user_name];

} else { 

{photo} = "";
{id} = "";
{name} = ""; 
}

11. In the application menu, go to “Events> onValidateSuccess” and enter the following code to erase the information every time you make a new login.

sc_reset_global ([auth_type], [facebook_user], [facebook_photo], [facebook_name], [twitter_user], [twitter_photo], [twitter_name], [google_user], [google_photo], [google_name]);

12. In the application menu, go to “Toolbar”.

13. In the properties of “Top toolbar” add the three social networks.

14. Finally, configure the global variables declared as Outtype. We go to the option “Application-> Global variable“.

15. Publish the application on the server that was the “Applications” settings of social networks. (You must publish because it does not work locally)

To see more examples created with Scriptcase, go to: Examples: Complete systems and applications with Scriptcase