Search
Close this search box.
Table of Contents

Tutorial: Enable Social Logins for a SaaS Application

6 minutes read
Tutorial: Enable Social Logins for A SaaS Application
Table of Contents

Preview

In this tutorial, we will use the Datawiza Access Proxy (DAP) to enable Social Login for a sample web application, called “WebApp”. The social logins we will use are GitHub, Google and Microsoft. We will use DAP’s sidecar deployment mode, which means DAP and this app are running on the same server.

  • The WebApp will run on localhost:3001, and it can display all received headers, which may be used for identifying users or displaying user information. 
  • The DAP will run on localhost:9772, which means the traffic to the app will reach DAP (running on port 9772) first and then be proxied to the WebApp (running on port 3001).
  • We will provide the docker images for the DAP and this WebApp.

Part I: GitHub Configuration

You will need to register an application in the GitHub developer console and get the following values for this application:

  • Client ID
  • Client Secret

These values will later be used to set up the DAP in Datawiza Cloud Management Console (DCMC). Please follow IdP Configuration Guide: Github instructions on how to get those keys/values.

Part II: Google Configuration

You will need to register an application in the Google developer console and get the following values for this application:

  • Client ID
  • Client Secret

These values will later be used to set up the DAP in Datawiza Cloud Management Console (DCMC). Please follow IdP Configuration Guide: Google instructions on how to get those keys/values.

Part III: Microsoft Configuration

You will need to register an application in the Microsoft Portal and get the following values for this application:

  • Client ID
  • Client Secret

These values will later be used to set up the DAP in the DCMC. Please follow IdP Configuration Guide: Azure AD instructions on how to get those keys/values.

Part IV: Create Application in Datawiza Cloud Management Console (DCMC)

  1. Sign in to Datawiza Cloud Management Console.
  2. The Welcome page appears.
  3. Navigate to the Deployments page on the left menu, and then click the Create Deployment button
  4.  
Deployments

4.In the Name and Description fields, enter the relevant information.

5. Select Create.

6. Navigate to the Provisioning Keys tab, and then click the Create Provisioning Key button.

7. In the Key Name and Expires fields, enter the relevant information.

8. Make a note of the provisioning key and secret. You will need to use this key pair later.

9. Navigate to the Applications tab, and then click the Create Application button.

10. On the Add Application dialog, use the following values:

Property

Value

Platform

Web

App Name

Enter a unique application name. I use the WebApp

Public Domain

Application url that end users will visit.

For example: https://webapp.example.com

For testing, you can use localhost DNS. If you aren’t deploying DAB behind a load balancer, use the Public Domain port. I use http://localhost:9772

Listen Port

The port that DAB listens on. I use the 9772

Upstream Servers

The target application implementation URL and port to be protected. I use http://docker.host.internal:3001

11. Select Create.

12. Select Create.

13. Switch to the IdP Configuration tab. Click the Create IdP button under Button List.

14. On the Add IdP dialog, select the OAUTH as Protocol. Then choose GitHub as Identity Provider. Enter all the information from Part II. Then click the Create button.

step 14

15. Now we repeat the previous steps to create a Google IdP. Click the Create idP under the Button List. Choose OIDC as protocol and Google as Identity Provider. Enter all the information from Part IIIP

16. Now we do the previous steps again to create a Microsoft IdP. Click the Create idP under the Button List. Choose OIDC as protocol and Microsoft Azure AD as Identity Provider. Switch off the Automatic Generator. Put common in the tenant id field. Enter all other information from Part VI.

17. Then Your IdP configuration will be like this

Part V: Run DAP With a Web Application

You need to use Docker to run DAP. The following is an example docker-compose.yml file. You may need to log in to our container registry to download the images of DAP and the WebApp. See Step3 : Configure DAP and SSO Integration for more details. Replace marked #### with your recorded Provisioning key and secret.

				
					version: '3'

services:
  datawiza-access-broker:
    image: registry.gitlab.com/datawiza/access-proxy
    container_name: datawiza-access-proxy
    restart: always
    ports:
      - "9772:9772"
    environment:
      PROVISIONING_KEY: #############################
      PROVISIONING_SECRET: #############################

  
  WebApp:
    image: registry.gitlab.com/datawiza/header-based-app
    container_name: ab-demo-header-app
    restart: always
    ports:
      - "3001:3001"
				
			

After executing docker-compose -f docker-compose.yml up, the DAP and the WebApp should be up and running.

Part VI: Test the Application

Open a browser and type in http://localhost:9772. The login page of the WebApp should be shown like this:

Click the Sign in with GitHub. It will automatically redirect you to GitHub to login.

After entering the credentials, you should be able to login successfully and see the home page of the WebApp.

DAP homepage

Now you can click the logout button and try to login using Google. After clicking the Sign in with Google button, it will redirect you to Google to login.

After entering the credentials, you should be able to login successfully and see the home page of the WebApp as before.

You can test the Microsoft login following the previous steps.

(Optional) Part VI: Pass User Attributes to the WebApp

DAP gets user attributes from IdP and can pass the user attributes to the WebApp via http headers.

Please follow the instructions of Step4 : Pass User Attributes to pass the user attributes to the WebApp, which is expecting:

  • email
  • firstname
  • lastname

If you want to get user’s groups, you need to add groups in custom claims. You can see Add Claims in ID Token and Create Claims for more details.

After successfully configuring the user attributes and adding groups in Okta claim and DCMC configuration, you should see the green check sign for each of the user attributes as follows.

Conclusion

In this tutorial, you learned how to use Datawiza to configure a web app using GitHub, Google and Microsoft logins. There is no SDK needed and everything is configuration-based. 

This is only a small sampling of what Datawiza can do. See Datawiza’s online docs or official website for much more information. You can also get a free trial by signing up/in here!

Written by the Datawiza team — hope you enjoyed! Join us if you have any questions or need any help on our Discord server.