Skip to content

Login to Keycloak via Google Account

Published by admin on 21. August 2022

Create a new Google Application

Head to this page, login with your Google Account and you will see the Google Developers Console. This is where you configure the Google APIs for your project.

The Google Developer Console is quite intimidating at first but we just need to perform a few steps.

Configure Consent Screen

  • Open New Project -> Credential -> Configure Consent Screen
  • Select for User Type : External
  • Configure OAuth consent screen
  • Create a new OAuth client
  • Application Type : Web application
  • Redirect Url: http://localhost:8280/auth/realms/RBAC/broker/google/endpoint
  • Use defaults of Page 2/Scope Setup and 3/User Setup of Consent Screen Setup
  • Summary of OAuth Consent Screen
  • Select newly created OIDC client and select Download JSON
  • Extract JSON File Content for
    • client_id
    • client_secret
  • This data is needed to configure Keycloak later 
{
   "web":{
      "client_id":"361534637475-b1n5l7qf6b4ejcmhgmj3pcfddt5uq63r.apps.googleusercontent.com",
      "project_id":"proud-sol-360109",
      "auth_uri":"https://accounts.google.com/o/oauth2/auth",
      "token_uri":"https://oauth2.googleapis.com/token",
      "auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs",
      "client_secret":"GOCSP.... ",
      "redirect_uris":[
         "http://localhost:8280/auth/realms/RBAC/broker/google/endpoint"
      ]
   }
}

Step 2: Create a Google Identity Provider for your realm

  • Add Google Identity Provider by providing
    • client_id
    • client_secret

Step 3: Test your Angular Application

  • select Sign In with Google for Login
  • Details after Login with Google
Is Authenticated: true
Username: helmut.hutzler@gmail.com
OIDC configid: 0-angular-frontend
Default Roles: default-roles-rbac,offline_access,uma_authorization
JSON Data from userData$ Observable
{
  "userData": {
    "sub": "7b7b84e7-00c5-4921-a4ed-7ad0fe78ba99",
    "email_verified": true,
    "name": "Helmut Hutzler",
    "default_roles": [
      "default-roles-rbac",
      "offline_access",
      "uma_authorization"
    ],
    "preferred_username": "helmut.hutzler@gmail.com",
    "given_name": "Helmut",
    "family_name": "Hutzler",
    "email": "helmut.hutzler@gmail.com"
  },
  "allUserData": [
    {
      "configId": "0-angular-frontend",
      "userData": {
        "sub": "7b7b84e7-00c5-4921-a4ed-7ad0fe78ba99",
        "email_verified": true,
        "name": "Helmut Hutzler",
        "default_roles": [
          "default-roles-rbac",
          "offline_access",
          "uma_authorization"
        ],
        "preferred_username": "helmut.hutzler@gmail.com",
        "given_name": "Helmut",
        "family_name": "Hutzler",
        "email": "helmut.hutzler@gmail.com"
      }
    }
  ]
}

Useful Links

Published inKeycloak

Be First to Comment

Leave a Reply