The objective of this article is to illustrate how the Hub Option > Hub Authentication (which allows you to easily protect your Hub with a password) can be converted into any other authentication pattern of your choice: such as oAuth or SAML.
Here is the basic premise:
- using custom code (namely CSS and HTML because that's all that can be exposed to the login screen), insert a button to your authentication page and hide the login form.
- on your own authentication page/script, upon successful login by your user, grab a one-time token for this Hub using the API method AuthenticateHubUser.
- redirect your authenticated user back to the Hub with the token appended as a query string.
Let's dive into the details:
1. In the Custom Code > HTML section, add the following
<div class="oauth">
<a class="btn" href="https://yoursite.com/oauth-login">Login with oAuth</a>
</div>
You can style this however you like (note: Hubs has Bootstrap 2.0 classes/glyphs available)
Because we only want this button to show on the login page, and because we don't want the password/submit form to display, add the following in the Custom Code > CSS section
/* hide the auth button container by default */
div.oauth{display:none;}
/* show the auth button container only when on the login page */
body.hub-login div.oauth{display:block;}
/* hide the default login form */
body.hub-login .login-form{display:none}
The final step is to make sure you enable Authentication and Custom HTML and CSS on your Login page from the Hub Authentication settings page. You should avoid adding any passwords for this scenario since the user will never see the login form anyway.
This will convert your login screen from something like
Again, the styling is totally up to you. The example is more built out than the code sample.
2. [insert your authentication method here]. This part's really up to you. Some examples of how you could authenticate your users include:
- your own username/password form that's tied to your existing system/database
- oAuth to any supported service such as Twitter or LinkedIn (i.e. your content's not confidential, you just want people to enter by connecting their social account)
- SAML/SSO/Google Apps
- etc.
Once you've authenticated this user, the next step is to get a one-time auth token for this Hub which will give this user access to your Hub for a single session. Once the token is used, it's removed from our database.
As explained in our API docs you can request this token using your API credentials and your Hub's ID.
3. The API method will return a token such as
<Token>Yjk5YmU4Nzc3OGM4ZDljZTIyN</Token>
Simply redirect the user back to your Hub with the token appended in the query string
hub.yoursite.com/h/?token=Yjk5YmU4Nzc3OGM4ZDljZTIyN
The wrap-up:
I hope this helps shed light on how flexible Hub Authentication can be using a little bit of dev power. If you have any questions or suggestions on how to make this feature (or this article) more useful - please let me know!
About the Author
Follow on Twitter More Content by Yoav Schwartz
