Learn Google Social Login with Keycloak

There are 3 sets of steps that we must follow in order to come up with a web project that will allow us to login using google's identity provider.

1. Create a google application

1. Create a google application at https://console.developers.google.com
   
2. Set OAuth consent screen
   
3. Fill up the requirement to create a client id
   
4. Save the client id and secret, we will use it later when creating a client in keycloak

2. Setup Keycloak

1.  Create realm social-oauth
2.  Create Identity Provider

1.     Identity Provider
2.     Add provider
3.     Google
3. Copy the client id and secret that we save earlier in their respective fields
4. Create a new keycloak application client

1. While in the client, click the Installation tab
2. Under format option select "Keycloak OIDC JSON"
3. Copy and paste this value in a file named keycloak.json inside your javaee7 web project's web-inf directory.

3. Create our web project

1. Create a new maven project using javaee7 blank archetype, name it social-oauth-demo.
   
2. Create a file name keycloak.json, content will be coming from the keycloak client that we just created.
   It should look like this:
   

   {
     "realm": "social-auth",
     "auth-server-url": "http://localhost:8180/auth",
     "ssl-required": "external",
     "resource": "social-auth-client",
     "public-client": true
   }

3. Create web.xml file, where we will specify keycloak as the authentication method. Also secure a web resource.
   

   <?xml version="1.0" encoding="UTF-8"?>
   <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    version="3.0">
    
    <module-name>social-auth-demo</module-name>
    
    <security-constraint>
     <web-resource-collection>
      <web-resource-name>All Pages</web-resource-name>
      <url-pattern>/social/*</url-pattern>
     </web-resource-collection>
     <auth-constraint>
      <role-name>social-access</role-name>
     </auth-constraint>
    </security-constraint>
    
    <login-config>
     <auth-method>KEYCLOAK</auth-method>
     <realm-name>social-auth</realm-name>
    </login-config>
    <security-role>
     <role-name>social-access</role-name>
    </security-role>
   
   </web-app>

4. Build and deploy the war in wildfly. Make sure that wildfly has keycloak client installed.
5. Open a browser and enter http://localhost:8080/social-auth-demo/social/index.html, this should redirect to keycloak's login page. You should see a google icon to login.
   

The same logic applies to facebook.

References

• https://github.com/czetsuya/Keycloak-Angular-Auth