Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add script for Google login #1141

Merged
merged 5 commits into from
Apr 18, 2022
Merged

feat: add script for Google login #1141

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b0ce3d4
feat: #807 script for Google login
maduvena Mar 29, 2022
846aeff
feat: #807
maduvena Mar 29, 2022
892a994
docs: #807
maduvena Mar 31, 2022
9f12861
docs: fix text
maduvena Apr 4, 2022
2d029b3
fix: jansExtUid
maduvena Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions docs/interception-scripts/GoogleSignIn.md.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 SMS OTP 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 OTP SMS 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

191 changes: 191 additions & 0 deletions jans-auth-server/server/src/main/webapp/auth/google/login.xhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading