This page is an implementation guide and technical documentation for the Login with XING plugin.

The Login with XING plugin gives developers an easy way to authenticate visitors on their website and makes life easy for end-users by allowing them to use their existing XING account for identification while keeping their personal information safe.

Get started

Getting started with the plugin is easy.

  1. Create a new plugin with the generator. You will need a developer account for this.
  2. Add the generated code snippet in your webpage. Make sure the site is hosted under the domain you provided.
  3. (Optional) Implement verification for user data received through the plugin.

Congrats! Visitors to your site can now securely log in with their XING account. For ideas what to do next, see section User data.

Note: The plugin will always work in developer environments under localhost or localhost.local.

How it works

The plugin is a small JavaScript library which you can place on your site and which allows a user to log in with their XING credentials. While doing so, users grant access to a set of fields from their XING profile.

Here is a visualization of what using the plugin looks like.

Simplified flow

After clicking the plugin button, users sign in through a login form, which is opened inside a popup window. New users will then have to grant permissions to the plugin to access a part of their XING profile. After this, the user information is available to your site.

Note: The plugin button will remain visible after a user has logged in and the callback function has been triggered.

Hello world example

Below is a simple example of a site where a user can log in through the Login with XING button. The user’s name is printed on the page to signal a successful login by the onXingAuthLogin function.

<!DOCTYPE html>
<html>
<head>
  <title>Login with XING plugin Example</title>
  <meta charset="UTF-8">
  <script>
    // This function is called by the plugin after
    // the login flow is completed.
    function onXingAuthLogin(response) {
      var output;

      console.log(response);

      if (response.user) {
        output = 'Successful login for ' + response.user.display_name;
      } else if (response.error) {
        output = 'Error: ' + response.error;
      }

      document.getElementById('output').innerHTML = output;
    }
  </script>
</head>
<body>

  <!-- Place the plugin script -->
  <script type="xing/login">
    {
      "consumer_key": "[YOUR_CONSUMER_KEY]"
    }
  </script>

  <p id="output">No user logged in.</p>

  <!-- Include the plugin library -->
  <script>(function(d) {
    var js, id='lwx';
    if (d.getElementById(id)) return;
    js = d.createElement('script'); js.id = id; js.src = "https://www.xing-share.com/plugins/login.js";
    d.getElementsByTagName('head')[0].appendChild(js)
  }(document));</script>

</body>
</html>

Plugin configuration

To generate a plugin, please provide the following information:

Field Description
Domain required The domain where you want to use the plugin.
Privacy policy URL optional The URL of the website that provides your company's privacy policy which will appear in the authentication dialogue for the end user. If not specified, the privacy policy link will take the user to the domain for which the plugin was created.

If you want to change the privacy policy URL for an existing plugin, open the Login with XING plugin generator, specify the domain as before, then enter the new URL for your privacy policy and accept the Terms and Conditions. After clicking on "Generate Code", this new information will be saved. You can confirm the change via the Plugins Dashboard.

When you create a plugin in the generator, this is what the code looks like:

<script type="xing/login">
  {
    "consumer_key":"[YOUR_CONSUMER_KEY]"
  }
</script>
<script>(function(d) {
  var js, id='lwx';
  if (d.getElementById(id)) return;
  js = d.createElement('script'); js.id = id; js.src = "https://www.xing-share.com/plugins/login.js";
  d.getElementsByTagName('head')[0].appendChild(js)
}(document));</script>

Additionally you will be provided a secret signature salt, which can optionally be used for server-side verification of user data.

Parameters

Name Default Description
consumer_key required Unique identifier for your plugin tuned to work only on the domain you specified (though localhost and localhost.local will work for any consumer). The consumer key is also used with the logout function and when verifying the received user data with XING
onAuthLogin optional onXingAuthLogin The name of your JavaScript function that will be called by the plugin when users successfully log in. User data is passed to the function as parameters and you specify the steps to be performed with it. See User data and Hello world example for more details.
language optional en en English
de German
size optional medium small, medium, large, xlarge
color optional green green white text on dark green design
grey black text on light grey design

Make sure that you add the login.js library on your page. It doesn’t need to be right after the plugin setup but can be placed together with the rest of the scripts on your page.

Note: You can only add one Login with XING plugin per page, meaning that any additional ones will be ignored.

User data

When a user logs in successfully, user data is passed to the callback function, either the default onXingAuthLogin or one specified in the plugin configuration.

See below how the available user information is structured.

{
  "user": {
     "id": "...",
     "first_name": "...",
     "last_name": "...",
     "display_name": "...",
     "active_email": "...",
     "permalink": "...",
     "business_address": {
        "street": "...",
        "city": "...",
        "province": "...",
        "country": "..."
     },
     "photo_urls": {
        "maxi_thumb": "..."
     },
     "professional_experience": {
        "primary_company": {
           "name": "...",
           "title": "...",
           "industry": "..."
        }
     }
  },
  "error": null
}

Logout

xing.logout(callback, consumer_key);

If you want to log users out of your system, you should also log them out of the XING platform. Otherwise returning users will be logged in automatically and this may leave them confused if they didn’t expect to have a valid XING session after logging out from your site.

To log users out of XING you can use the logout function provided by the plugin library in the xing namespace.

Parameters

Name Default
callback optional Your custom JavaScript function that is triggered when a user is logged out.
consumer_key optional This parameter is not necessary when the plugin script is present on the page as the logout function will get the consumer key directly from the plugin.
If you don’t use the plugin script on every page, i.e. if your app persists its own logged-in status, you need to supply the consumer key to the function.

By default, the user session will remain valid for 24 hours if the user closes the page without logging out. This means the next time the user opens your page, they will be logged in automatically if the session is still valid.

By calling the logout function, the user session is expired on xing.com and any other website using the plugin.

Verification of user data

When a user is successfully logged in via the Login with XING plugin, a set of user data is transferred. This data is signed so that you are able to verify that it was not tampered with before reaching your server.

Together with your consumer key, you have also received a secret signature salt, which you will need to validate received user information. Do not share this key with anyone and do not expose it in your application code!

The verification also uses a cookie called xing_p_lw_s_[CONSUMER_KEY], where [CONSUMER_KEY] is your own consumer key. It is stored on your domain every time user information is passed to your onAuthLogin callback function. This cookie contains a signature which you can reproduce with your secret signature salt to confirm that the information you received is actual XING data.

To confirm the signature, perform the following steps:

  1. Collect every key/value of the user object as strings into an array. This action should be run recursively, meaning that if the value of a key is an object, then append the next key(s) until you find a value. Here is an example of a simplified user object:
    {
      id: '123_456',
      first_name: 'John',
      last_name: 'Doe',
      business_address: {
        street: 'Any Street 123',
        province: '',
        country: 'Germany'
      }
    }
    

    It should be transformed into this:

    [
      'id123_456',
      'first_nameJohn',
      'last_nameDoe',
      'business_addressstreetAny Street 123',
      'business_addressprovince',
      'business_addresscountryGermany'
    ]
  2. Sort this array alphabetically. The previous array should then be:
    [
      'business_addresscountryGermany',
      'business_addressprovince',
      'business_addressstreetAny Street 123',
      'first_nameJohn',
      'id123_456',
      'last_nameDoe'
    ]
  3. Convert the array into a string. The string should then be:
    'business_addresscountryGermanybusiness_addressprovincebusiness_addressstreetAny Street 123first_nameJohnid123_456last_nameDoe'
  4. Create a HMAC SHA256 hash using this string as payload and your secret salt. HMAC SHA256 is a standard hashing mechanism widely implemented in most development languages.
    If the data was not tampered with, the result of this process should match the value of the xing_p_lw_s_[CONSUMER_KEY] cookie stored on your domain.

To make things easy for you, here’s a snippet written in Ruby that does the trick and performs steps 1-4 described above.

module LoginWithXING
  def self.signature_valid?(user_data, signature, signature_salt)
    values_array        = hash_to_array(user_data).flatten.sort.join
    generated_signature = OpenSSL::HMAC.hexdigest(OpenSSL::Digest::SHA256.new,
                                                  signature_salt, values_array)
    generated_signature == signature
  end
  def self.hash_to_array(hash, parent_key = '')
    hash.map do |key, value|
      current_key = [parent_key, key].join
      if value.is_a?(Hash)
        hash_to_array(value, current_key)
      else
        [current_key, value].join
      end
    end
  end
  private_class_method :hash_to_array
end

Error handling

When things don’t go as expected, your callback function is triggered with a null user object and an error code is set in the error field.

{
  user: null,
  error: "..."
}

Below you can see a list of possible error codes you may want to handle.

Error responses

INVALID_CONSUMER The consumer_key value you set in the plugin configuration is not valid for your domain. When this happens, the plugin also shows a warning message in the browser’s console.
USER_LOGGED_OUT A call for user information is placed but no user is logged in.
This can happen for example when:
  • the page containing the button is loaded
  • a user has closed the authorization dialog without logging into XING

Should you encounter a problem using the plugin and if the documentation does not help you solve it, please send an email to social-plugins@xing.com. We will get back to you as soon as possible.

Data privacy

XING places utmost importance to data privacy and security. Accordingly, data privacy comes baked into the Login with XING plugin. Developers don’t need to do anything specific to ensure data privacy when they implement the plugin. The “Login with XING” plugin is the only login-plugin with built-in data privacy!

The library login.js is called by the plugin from a server cluster which hosts and handles the features of the plugin. This server cluster is special in that it has been configured to be as privacy friendly as possible.

Until a webpage visitor clicks the plugin, no information which could be traced back to the user is sent to the XING platform.

When users indicate their will to use the plugin by clicking it, they will activate the button and can then be identified purely to be able to log them in during subsequent visits.

Each third-party website is identified by a consumer key. The user must grant permission to XING to share profile information with that specific consumer.

When the button is active and the user has granted permissions, the user data will be made available to the third party through the plugin until he or she logs out from XING or the plugin session expires. Logging out will deactivate the button.

Supported browsers

  • Chrome current version
  • Firefox 24 ESR and current version
  • Internet Explorer 8 to current version
  • Opera current version
  • Safari for MacOS/iOS current version