feat: add script for Google login (#1141)

* feat: #807 script for Google login * feat: #807 * docs: #807 * docs: fix text * fix: jansExtUid
JanssenProject · Apr 18, 2022 · bac9144 · bac9144
1 parent 315faec
commit bac9144
Show file tree

Hide file tree

Showing 3 changed files with 467 additions and 0 deletions.
diff --git a/docs/interception-scripts/GoogleSignIn.md.txt b/docs/interception-scripts/GoogleSignIn.md.txt
@@ -0,0 +1,85 @@
+# Sign-in using Google Account
+
+## Overview 
+
+Google's OAuth 2.0 APIs can be used for both authentication and authorization. This document describes how to integrate Google's OAuth 2.0 implementation for authentication thus allowing a user to sign in using his Google account.
+
+
+## Prerequisites 
+
+- A Jans-auth Server (installation instructions [here](https://github.com/JanssenProject/jans/tree/main/jans-linux-setup#readme))    
+- The [Google authentication script](https://github.com/JanssenProject/jans/tree/main/jans-linux-setup/jans_setup/static/extension/person_authentication/GoogleExternalAuthenticator.py) (included in the default Gluu Server distribution);   
+- A [Google account](https://accounts.google.com/).     
+- Google API jars namely [google-api-client](https://repo1.maven.org/maven2/com/google/api-client/google-api-client/1.33.2/google-api-client-1.33.2.jar), [google-oauth-client](https://repo1.maven.org/maven2/com/google/oauth-client/google-oauth-client/1.33.1/google-oauth-client-1.33.1.jar) and [google-http-client-jackson2](https://repo1.maven.org/maven2/com/google/http-client/google-http-client-jackson2/1.41.5/google-http-client-jackson2-1.41.5.jar) added to jans-auth-server 
+
+
+## Google Configuration
+
+You need OAuth 2.0 credentials, including a client ID and client secret, to authenticate users and gain access to Google's APIs.
+The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project.
+
+1. Go to the [Credentials page](https://console.developers.google.com/apis/credentials).
+2. Click Create credentials > OAuth client ID.
+3. Select the Web application application type.
+4. Name your OAuth 2.0 client and click Create
+
+
+## Configure jans-auth server
+
+### Download Google Client JSON file
+On the following page, https://console.cloud.google.com/apis/credentials, you will see a table containing your recently created client. Click on the download button and download the JSON file containing details of the Client. 
+Place this file in `/etc/certs/google_client_secret.json`
+
+### Add Google libraries to jans-auth-server
+
+- Copy the [google-api-client](https://repo1.maven.org/maven2/com/google/api-client/google-api-client/1.33.2/google-api-client-1.33.2.jar), [google-oauth-client](https://repo1.maven.org/maven2/com/google/oauth-client/google-oauth-client/1.33.1/google-oauth-client-1.33.1.jar) and [google-http-client-jackson2](https://repo1.maven.org/maven2/com/google/http-client/google-http-client-jackson2/1.41.5/google-http-client-jackson2-1.41.5.jar) to the following folder inside the jans-auth Server : `/opt/jans/jetty/jans-auth/custom/libs` 
+
+- Edit `/opt/jans/jetty/jans-auth/webapps/oxauth.xml` and add the following line:
+
+    ```
+    <Set name="extraClasspath">./custom/libs/google-oauth-client-1.33.1.jar,./custom/libs/google-api-client-1.33.2.jar,./custom/libs/google-http-client-jackson2-1.41.5.jar</Set></Configure>
+    ```
+
+- Restart the `jans-auth` service     
+` systemctl status jans-auth `
+
+### Properties
+
+The custom script has the following properties:    
+
+|	Property	|	Description		| Input value     |
+|-----------------------|-------------------------------|---------------|
+|google_creds_file		|Details of the client created on https://console.cloud.google.com/apis/credentials		| /etc/certs/google_client_secret.json|
+
+### Enable Google Script using Admin Console
+
+Follow the steps below to enable Google authentication:
+
+1. Navigate to `Admin` > `Scripts`   
+
+1. Find the `google` script.
+
+
+
+1. Populate the properties table :    
+
+   - `google_creds_file`: `/etc/certs/google_client_secret.json`.   
+
+1. Enable the script by checking the box 
+
+1. Scroll to the bottom of the page and click `Update`
+
+
+
+!!! Note 
+    To make sure Google has been enabled successfully, you can check your Gluu Server's OpenID Connect configuration by navigating to the following URL: `https://<hostname>/.well-known/openid-configuration`. Find `"acr_values_supported":` and you should see `"google"`. 
+
+### Make Google the Default Authentication mechanism
+If `google` should be the default authentication mechanism, follow these instructions: 
+
+1. Navigate to `OAuth Server` > `Configuration` > `Defaults` > `ACR and Logging`. 
+
+1. Select the `Default Authentication Method(Acr):` to `google`. 
+
+1. Click Save    
+
diff --git a/jans-auth-server/server/src/main/webapp/auth/google/login.xhtml b/jans-auth-server/server/src/main/webapp/auth/google/login.xhtml
@@ -0,0 +1,191 @@
+<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:f="http://xmlns.jcp.org/jsf/core"
+	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+	xmlns:h="http://xmlns.jcp.org/jsf/html"
+	template="/WEB-INF/incl/layout/login-template.xhtml">
+	<f:metadata>
+		<f:viewAction action="#{authenticator.prepareAuthenticationForStep}" />
+		<f:viewParam name="login_hint" value="#{authorizeAction.loginHint}" />
+	</f:metadata>
+	<ui:define name="head">
+		<meta name="description" content="Gluu, Inc." />
+	</ui:define>
+	<ui:define name="pageTitle">
+		<h:outputText value="#{msgs['login.pageTitle']}" />
+	</ui:define>
+	<ui:define name="body">
+		<div class="container">
+			<h:panelGroup rendered="true">
+				<div class="login_bx_1"
+					style="border-radius: 10px; margin-top: 0px; background: white; border: 1px solid #008b8b;">
+					<div class="row">
+						<h:messages class="text-center"
+							style="color:#8b0000;margin:5px;margin-left:20px; font-size:2vw;"
+							infoClass="text-center" errorClass="text-center" />
+					</div>
+					<h:form id="loginForm" style="padding:30px;">
+						<div class="row">
+							<div class="col-sm-3 col-md-3">
+								<h:outputText value="#{msgs['login.username']}" />
+							</div>
+							<div class="col-sm-9 col-md-9">
+								<h:inputText placeholder="#{msgs['login.username']}"
+									id="username" name="username" required="true" colMd="10"
+									labelColMd="2" autocomplete="off"
+									value="#{credentials.username}" styleClass="form-control"
+									style="width:100%">
+								</h:inputText>
+							</div>
+						</div>
+						<div class="form-group row"></div>
+						<div class="row">
+							<div class="col-sm-3 col-md-3">
+								<h:outputText value="#{msgs['login.password']}" />
+							</div>
+							<div class="col-sm-9 col-md-9">
+								<h:inputSecret placeholder="#{msgs['login.password']}"
+									colMd="10" id="password" name="password" labelColMd="2"
+									value="#{credentials.password}" autocomplete="off"
+									styleClass="form-control" tyle="width:100%">
+								</h:inputSecret>
+							</div>
+						</div>
+						<div class="form-group row"></div>
+						<div class="row">
+							<div class="col-sm-5 col-md-5">
+								<h:outputLabel styleClass="col-form-label" for="rememberme"
+									value="#{msgs['login.rememberMe']}" />
+							</div>
+							<div class="col-sm-2 col-md-2" style="padding-top: 15px">
+								<input type="checkbox" value="rememberme" id="rememberme"
+									name="rememberme" />
+							</div>
+						</div>
+						<div class="form-group row">
+							<div class="col-sm-offset-2 offset-md-2 col-sm-8 col-md-8">
+								<h:commandButton id="loginButton"
+									style="background-color: #00BE79; color:white;"
+									styleClass="btn col-sm-12" value="    #{msgs['login.login']}"
+									onclick="checkRemembeMe()" iconAwesome="fa-sign-in"
+									action="#{authenticator.authenticate}" />
+							</div>
+						</div>
+						<div class="form-group row">
+							<div class="col-sm-offset-3 offset-md-3 col-sm-7 col-md-7">
+								<div class="forgot_link">
+									<a href="/identity/person/passwordReminder.htm"
+										style="color: blue;"> <h:outputText
+											value="#{msgs['login.forgotYourPassword']}" />
+									</a>
+								</div>
+							</div>
+						</div>
+						<h:panelGroup layout="block" rendered="#{not empty facesContext.messageList and cookie['X-Correlation-Id'] != null}">
+							<br/>
+							<p style="font-size: 0.7em">
+								<strong>Correlation Id: </strong> <h:outputText value="#{cookie['X-Correlation-Id'].value}" />
+							</p>
+						</h:panelGroup>
+						<h:inputHidden id="platform" />
+						<div id="g_id_onload"
+							data-client_id="#{identity.getWorkingParameter('gclient_id')}"
+							data-context="signin" data-ux_mode="redirect"
+							data-login_uri="https://c1.gluu.org/oxauth/postlogin.htm"
+							data-auto_prompt="false"></div>
+
+						<div class="g_id_signin" data-type="standard"
+							data-shape="rectangular" data-theme="outline"
+							data-text="signin_with" data-size="large"
+							data-logo_alignment="left"></div>
+					</h:form>
+					<div class="row">
+						<div align="center" class="col-sm-offset-4 col-sm-9">
+							<ui:repeat
+								value="#{identity.getWorkingParameter('download_url').entrySet().toArray()}"
+								var="_entry">
+								<ui:param name="app_name" value="#{_entry.key}" />
+								<ui:param name="app_link" value="#{_entry.value}" />
+								<h:outputLink style="margin-right:5px;" value="#{app_link}"
+									title="#{app_name}">
+									<h:graphicImage value="img/#{app_name}.png" />
+								</h:outputLink>
+							</ui:repeat>
+						</div>
+						<h:panelGroup layout="block"
+							rendered="#{external_registration_uri != Null}">
+							<div class="reg_link">
+								<a href="#{external_registration_uri}"> <h:outputText
+										value="Register Now " />
+								</a>
+							</div>
+						</h:panelGroup>
+					</div>
+				</div>
+			</h:panelGroup>
+		</div>
+		<script type="text/javascript">
+    		$(document).ready(function () {
+    			$('.other').click(function(){
+    				$('#social_new').toggle();
+    			});
+                if (localStorage.chkbx &amp;&amp; localStorage.chkbx != '') {
+                    $('#rememberme').attr('checked', 'checked')
+                    document.getElementById("loginForm:username").value = localStorage.usrname;
+                } else {
+                    $('#rememberme').removeAttr('checked');
+                    document.getElementById("loginForm:username").value = "";
+                }
+
+                $('#rememberme').click(function() {
+                    checkRemembeMe();
+                });
+
+                fillPlatformField();
+
+				var userNameField = document.getElementById("loginForm:username");
+				var passwordField = document.getElementById("loginForm:password");
+
+				passwordField.value = "";
+				var userName = '#{!empty authorizeAction.loginHint ? authorizeAction.loginHint : ""}';
+				if (userName) {
+					userNameField.value = userName;
+					passwordField.focus();
+				} else {
+					userNameField.focus();
+				}
+
+				var displayRegister = #{display_register_action or identity.sessionId.sessionAttributes['display_register_action']};
+				if (displayRegister) {
+					var registerButton = document.getElementById("loginForm:registerId");
+					if (registerButton != null) {
+						registerButton.style.display = 'inline';
+					}
+				}
+    		});
+
+    		function checkRemembeMe() {
+                if ($('#rememberme').is(':checked')) {
+                    localStorage.usrname = document.getElementById("loginForm:username").value;
+                    localStorage.chkbx = $('#rememberme').val();
+                } else {
+                    localStorage.usrname = '';
+                    localStorage.chkbx = '';
+                }
+			}
+
+            function fillPlatformField() {
+                try {
+                    re = /^([^\.]+\.[^\.]+)\..+/;
+                    result = re.exec(platform.version);
+                    if (result != null) {
+                        platform.version=result[1];
+                    }
+    			    document.getElementById("loginForm:platform").value = JSON.stringify(platform);
+                } catch (e) {
+                }
+            }
+        </script>
+	</ui:define>
+</ui:composition>