HSG allows users to login to captive portal based through user social media accounts, eg. facebook, google+, twitter, weibo, etc. Each of the social media provider will require an unique App ID to map to a unique portal URL (or landing page URL). There're 3 steps required to turn on socialmedia sign-in option on your HSG captive portals.

Step 1: enable your desired social media sign-in option.

You can select one or two

Bypass domains for social media sign-in

Note that in order to authenticate with social media provider, we need to bypass their domains on HSG or HSA or MAP hotspot configurations, so that users can access and sign-in before being authenticated by HSG/HSA/MAP.

Bypass domains for social media sign-in

Configure plash portal URL

Because facebook now only permit portal URL using https, so it's only possible to use portal with .ransnet.com domain for facebook login. The reason for having to use RansNet domain URL is because the HSG already has built-in certificate for .ransnet.com, to support portal with https. 

There're two deployment modes when using facebook sign-in

1. on-premise mode. In this case, we just need do DNS write for splash.ransnet.com to redirect to HSG local IP, in order "spoof" facebook (so it will see requests coming from authorized https URL). When clients launch portal access to splash.ransnet.com, HSG will perform DNS rewrite to point to its local IP. So that, the requests go to HSG local portal server; then HSG will use this URL to authenticate with facebook based on integrated API. This method allows seamless portal deployment without hassle of applying APP ID for each customer/deployment.

-------------------------------------

-------------------------------------

2. cloud mode or cloudx mode. For both cases, the MAP (in the case of cloud mode) or the HSA/HSG (in cloudx mode) need to point to a central HSG with a public portal URL. Partner/vendor need to apply a RansNet domain portal URL mapping to its public IP, eg. customer1.ransnet.com, so that the portal URL becomes something like https://customer1.ransnet.com/customer1/portal1/login.php

There're two information customer/partner need to provide to RansNet, so that RansNet engineer can provision DNS setting to map customer portal URL to the correct public IP.

• • portal name/URL, eg. customer1.ransnet.com

  • portal public IP

Apply facebook APP ID (please refer here for complete API docs)

Below are the steps to request facebook APP ID.

Getting App ID and Token

(SOURCE: https://smashballoon.com/custom-facebook-feed/access-token/ )

• 1. Go to https://developers.facebook.com and click on Log In in the top right.  Log in using your personal Facebook credentials.

  2. Hover over My Apps and then click on Add a New App.

  3. Click on basic setup.

  4. Enter your App Name. This can be anything you like. Choose a Category. Click Continue.

  5. Complete the Security Check and click Submit.

  6. Your App should now be set up. Copy and paste your App ID and App Secret  into the fields in the next step to retrieve your Access Token.

  7. Enter your App ID and App Secret below and click Get my Access Token.

Configuring App Domain URL for customized portal URL

(PRE_REQUISITE: App Id and Token)

• 1. Login to developers.facebook.com. On the top right, hover on My Apps and click on the app name you want to configure. In my case its “Ransnet”.

• 1. In you app page, go to Settings -> Basic -> Add Platform if there is none yet. Select website for website. Enter the website URL.

  2. In the App domains  add your App Domain URL (facebook redirect url/sub-domain name).  FYI,  Site URL and App domain URL should match. See screenshot below.

1. Save Changes

Make your app publicly available

Go to "App Review", Make <appname> public?, tick on "Yes"

Once you have the APP ID info, configure it in the portal setting.

Apply twitter keys

• 1. Create an app in Application Management page

  2. Provide the Application Name, Description, Website URL and Call Back URL

     1. Call Back URL - www.ransnet.com  ( is the URL where you want twitter to redirect back after successful login.)

  3. Fill-in all the details needed by twitter and submit the page.

  4. Once the app is created go to “Settings” tab and fill-in the additional information needed. Make sure that this setting “Allow this application to be used to Sign in with Twitter” is checked. (This setting is very important or else the login will not work)

• 1. Go to “Permissions” tab, make sure from the Access Permissions the “Read and Write” is selected. Update it if not yet set.

• Go to the twitter application that you are going to use for the twitter login

• Go to “Keys and Access Tokens” tab

• Once you have above keys, configure it in the portal setting, under twitter section