🔍

Login with Social Media account

An option to allow your visitors quickly and easily log into our website, by synchronising with their Social Media account/s 

Logging into your website

You can configure the process of allowing people to log into your website in two different ways.

Firstly there is the simple Login Atom. This is a pre-configured form that you add to your page as an Atom. The standard Login Atom works by taking a Username / Password combination and checking if that account exists? It then takes the successful login to a web page you specify. This is a very quick thing to set up BUT if we look forward from here you will probably identify the uncomfortable truth that nobody remembers their account details – and they always click the Password reminder button!

So, logging into your site is really an uncomfortable hurdle for your visitors!

Log In with EMAIL only

This is simply using the basic “Email me a password reminder” process – but without offering an attempt to log in directly! For this, we ask the visitor to input their email address as the first step, then check they have an account (under that email address) and send them an email with a renderlogin link, back to the website / page you want them to land on.

If we can’t match the Email address – then we pop up a message and ask them if they want to make a brand-new account.

Log In using third party service

Alternatively, we can recognise and utilise whether the user may already be “logged in” to another service, such as LinkedIn, Twitter, Google etc. If so, then we can use this 3rd party account as the “gateway” to your service.

So how does this work?

Most Social Media firms offer a method to send some of the users information over to another service (such as your website), if your website is registered and validated with them. Then, if the users accepts, they will send over the users Forename, Surname and Email address. We can then use this to check if we have this user already in our system – and log them in straight away, tagging their 3rd party account details against the account they have in your system.

Then, going forward, each time they try to get into your website you can offer them the alternative to log in via their validated 3rd party account – instant(ish) access and no more password loss.

For Example

When a visitor wants to log in using their LinkedIn account, they will click the button you have on your website to “Log In via LinkedIn”. This will run an XFLOW (that you make) that fires a “Login with Social Media” XFLOW Block. This block works with a “Social Media account object that you first create in the back end. This object carries the “Application ID” and “secret” - effectively your username and password to log in to your LinkedIn app.

So once the Social Media XFLOW Block is fired, the user is diverted seamlessly to LinkedIn, where they are asked to validate if they are happy with sharing information with – your website. Assuming they are, then LinkedIn will send the visitor back to your website, together with the details that identify them – e.g. Email address, First Name, second Name and LinkedIn ID. 

We use these details to identify them in your system – and log them in if they exist – or offer to create a new account if they don’t.

Step-by-step;

Create a “developer” account on your Social Media provider – e.g. LinkedIn

Settings Tab
  1. https://developer.linkedin.com/
    1. Create App. - Ideally there is already a LinkedIn account and Page you can use.
    2. On first step you’ll need a “privacy statement” on a page on your website plus a Logo
  • Provide the URL for your website
Auth Tab
  1. Note down your Client ID and Client Secret – these are subsequently pasted into the back end object you must make -a “Login with LinkedIn” object.
Products Tab
  1. Click the Sign In with LinkedIn “request Access”

Now the set up of LinkedIn is complete. Visit the back end of your website and add a “Login with LinkedIn” object, somewhere appropriate. Complete it by entering the ClientID and Secret taken from the LinkedIn Auth tab (above).

Now we can return to the login XFLOW and complete the Login XFLOW, by selecting the Social Media object, setting the destination page and choosing whether to heck Forename / Surname combination. 

If the user using the XFLOW is a valid LinkedIn account, then we will see if their email address is in our system, to log them in directly, as that user.

If they are not an existing user account in our XPOR website, then we can’t let them in. Instead we have to be aware that they may potentially have used a different email address in your website, compared to LinkedIn. This is quite common if the people using your website are members of a “professional” body. These people will likely use their Company email address in your system – whilst using a different “private” email address in the Social Media platform.

Obviously, we don’t want to create duplicate accounts for the same person, so, to deal with this, we provide a further check on the account information - the First Name and Last name combination provided by LinkedIn.

If this combination matches, but the email address is different, then we will send an email to the logging in email, alerting them that we have a matching user already in the system and asking if they would prefer to login using a different email? If they confirm they do, then we open a form to let them enter another email address. We then check the database for this email address. If we have one then we send it a login email confirmation, with renderLoginlink.

Alternatively, we continue the process of creating a new account.

In all cases we will register the LinkedIn ID against the existing or created contact, in order that next time they can get straight in via this method.