How to signin to keycloak using google

There are 3 set 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.

Set 1 - Create a google application

  1. Create a google application at
  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

Set 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.

Set 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=""
     xmlns="" xmlns:web=""
       <web-resource-name>All Pages</web-resource-name>
  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.
How to signin to keycloak using google How to signin to keycloak using google Reviewed by Edward Legaspi on Sunday, April 09, 2017 Rating: 5

No comments:

Powered by Blogger.