Introducing XING Connect
As you've probably already heard, we developers here at XING can use 10% of our working time to carry out research and try out new ideas of our own. by Christopher Blum, Lennart Koopmann, Nenad Nikolic
In the last few weeks we, a rails engineer (Lennart Koopmann), a product manager with a technical background (Nenad Nikolic) and a frontend engineer (Christopher Blum) put our research time to excellent use by building a product that we called “XING Connect”.
What is XING Connect?
XING Connect is a simple JavaScript API that gives other webmasters the ability to integrate a XING-based login into their own website with minimal effort.
Visitors can decide whether they want to grant a website access to their basic XING profile data by clicking on a button that looks like this:
After clicking on the button, a popup appears that asks users whether they want to grant this site permission to access their profile data.
After granting permission, the website receives a token which it can then store and use to render the user’s profile data at a specific place at any given time.
The log in button also changes its appearance to indicate that the user is logged in:
How does it work under the hood?
In order to integrate XING Connect, the website needs a site_key which is connected to the website’s origin (protocol + host + port).
The entire data exchange between XING.com and the external website takes place via HTML5 Cross-Document Messaging which gives both sides full control with regard to which origin is allowed to send/receive data. Therefore an invisible iframe that points to XING.com is rendered on the website and acts as a “data bridge” for the user’s XING profile information.
Apart from that, XING Connect uses the progressive-enhancement approach since it completely relies on JavaScript and features that only modern browsers have implemented to date.
This means that the webmaster has to create placeholders in his HTML code which are subsequently filled with the users’ profile data. Such placeholders can be used to display default content if the user later revokes access or if the XING Connect API is for some reason not available.
Assuming the webmaster has the following code on his website:
<div data-xc-user="viewer"> <img data-xc-output="photo" src="default.png"> <span data-xc-output="name">Anonymous</span> </div> <div data-xc-output="button"></div> <script src="https://www.xing.com/connect/partner.js?site_key=[SITE_KEY]"></script>
The output with JavaScript turned off would be:
And with JavaScript enabled:
Browser support
HTML5 Cross Document Messaging is implemented across all modern browsers:
IE8+, Firefox 3+, Chrome, Safari, Opera 9+
In IE <8 we take advantage of the above-mentioned progressive-enhancement approach. In those browsers, XING Connect is simply disabled and the default content is displayed.
Try it out!
This blog is the first website where we integrated XING Connect. Have a look at the comment form below, click on the “Log in with XING” button, and then enter your comment.
Please note that we’re still testing this feature, so please excuse any problems you might experience.
We’re looking for partners!
If you’re interested in implementing this in your own blog/website then just drop us an email.
It works, yay.
Btw: A former XING employee has started this project months ago:
Thanks Hendrik Mans!