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)
- Sign in to Datawiza Cloud Management Console.
- The Welcome page appears.
- Navigate to the Deployments page on the left menu, and then click the Create Deployment button
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.
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.
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:
- 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!
