Social Sign-In Authentifizierung mit Oracle APEX

In diesem Blog-Post wollen wir an dem vorherigen ansetzen und uns das seit der Oracle APEX Version 18.1 zur Verfügung stehende Authentifizierungsschema „Social-Sign-In“ anschauen. 

Mit diesem neuen Schema Typ wird es Anwendern möglich sein, sich z.B. über Ihren Google oder Facebook Account an einer Oracle APEX Anwendung anzumelden. Dieses Feature wird dann interessant, wenn eine Anwendung im Internet zur Verfügung stehen soll, die von einer unbestimmten Anzahl an Anwendern benutzt werden kann und ohne administrative Benutzereingrenzungen zur Verfügung steht.

Perfekt kombinierbar mit dem im vorherigen Blog erwähnten Custom Authentication Scheme.

Um das neue Feature nutzen zu können, müssen wir als Entwickler zunächst ein neues Projekt/eine neue App vom gewünschten Anbieter erstellen. Dieser muss über das OAuth 2.0 Protokoll verfügen. Anschließend muss in APEX ein entsprechendes Web-Credential erstellt werden, sowie ein neues Authentifizierungsschema.

Demnach müssen folgende Schritte immer durchgeführt werden, egal über welchen Dienst:

• OAuth 2.0 Projekt/App erstellen
• Web Credentials erstellen
• Authentication Scheme erstellen

Nachfolgend werden wir bespielhaft Authentifizierungen über Google, Facebook, LinkedIn und Microsoft durchgehen und zeigen wie man alle Authentifizierungen in einer App verwenden kann.

Google

Um einen „Google Sign-In“ anzulegen benötigen wir als erstes ein neues Google Projekt. Hierzu mit einem aktiven Google Account unter console.developers.google.com anmelden und ein neues Projekt erstellen. Dem Projekt geben wir einen eindeutigen Namen wie beispielsweise APEX Login.

Jetzt zum Abschnitt „OAuth-Zustimmungsbildschirm“ wechseln und „extern“ auswählen und „erstellen“ klicken. Bei „Name der Anwendung“ den Namen des Projektes eintragen und die richtige Domain in das Feld Autorisierte Domain eintragen.

Dieses Beispiel bezieht sich auf eine APEX-Anwendung, die in der Oracle Cloud erstellt wurde. 

• rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com

Der Link zur Startseite der Anwendung wäre dann die APEX App:

• https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/f?p=social

Wer möchte, kann optional noch ein Logo hinzufügen.

Als nächstes unter Anmeldedaten "Neue Anmeldedaten" erstellen und als Typ "OAuth-Client-Id" auswählen. Anschließend den Anwendungstyp auf Webanwendung einstellen und einen beliebigen Namen eingeben (z.B. APEX). Zuletzt noch die Weiterleitung´s URI eingeben. 

In unserem Beispiel lautet diese:

• https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/apex_authentication.callback

Final erhalten wir die für APEX benötigte Client-ID und den Client Schlüssel.

An dieser Stelle wäre der erste Schritt geschafft und wir können in APEX die Webcredentials erstellen. Hierzu im App Builder > Workspace Utilities > Web Credentials neue Credentials über den "Create" Button erstellen.

Folgende Attribute müssen gesetzt werden:

• Name: Google
• Static Identifier: Google
• Authentication Type: Basic Authentication
• Client ID or Username: Client-ID aus den OAuth Zugangsdaten des Google Projekts 
• Client Secret or Password: Clientschlüssel aus den OAuth Zugangsdaten des Google Projekts
• Verify Client Secret or Password: erneute Eingabe des Clientschlüssel´s

Anschließend "Apply Changes" zum erstellen der Web-Credentials klicken.

Zuletzt zu den Shared Components der APEX-Anwendung wechseln und ein neues Authentication Scheme vom Typ Social Sign-In mit dem Authentication Provider Google und den vorher definierten Webcredentials erstellen (Credential Store).

Als Scope profile,email und bei Username Attribute email eintragen.

Ab jetzt erfolgt die Anwendungsauthentifizierung über Google :-)

Facebook

Um ein Login über Facebook zu ermöglichen, gehen wir erneut die 3 eingangs erwähnten Schritte durch. Zunächst benötigen wir eine Facebook App die wir unter developers.facebook.com erstellen können. Als Namen verwneden wir beispielsweise wieder APEX_Login.

Jetzt muss ein Programmtyp ausgewählt werden. Da wir einen Login über Facebook realiseren wollen, wählen wir "Facebook Login" aus und als Plattform für die neue App "Web".

Als nächstes noch die URL der APEX-Anwendung eingeben (in unserem Beispiel lautet diese https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/f?p=social) und den Rest mit weiter durchklicken.

Unsere Facebook App ist jetzt angelegt, bedarf jedoch noch weiteren Einstellungen. Als erstes unter Facebook Login > Einstellungen die OAuth Redirect URI unserer Anwendung eintragen. In unserem Beispiel lautet diese (genau wie bei Google auch) "https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/apex_authentication.callback".

Unter Einstellungen > Allgemeines noch die App-Domain, unter denen die APEX-Anwendung erreichbar ist, eintragen (ebenfalls wie auch bei Google lautet diese: rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com) und die App-Id und den App-Key speichern (wird für die Web-Credentials benötigt).

Jetzt haben wir alle Einstellungen unserer Facebook-App vorgenommen und können zum nächsten Schritt wieder zum APEX-Workspace wechseln.

Dort unter App Builder > Workspace Utilities > Web Credentials neue Credentials für Facebook erstellen.

Folgende Attribute müssen gesetzt werden:

• Name: Facebook
• Static Identifier: Facebook
• Authentication Type: Basic Authentication
• Client ID or Username: Client-ID aus den OAuth Zugangsdaten der Facebook App 
• Client Secret or Password: Clientschlüssel aus den OAuth Zugangsdaten der Facebook App
• Verify Client Secret or Password: erneute Eingabe des Clientschlüssel´s

Anschließend "Apply Changes" zum erstellen der Web-Credentials klicken.

Zuletzt zu den Shared Components der APEX-Anwendung wechseln und ein weiteres Authentication Scheme vom Typ Social Sign-In mit dem Authentication Provider Facebook und den vorher definierten Webcredentials erstellen (Credential Store).

Als Scope public_profile, email und bei Username Attribute name eintragen.

Jetzt kann die Anwendungsauthentifizierung über Facebook erfolgen.

Microsoft Azure

Unter https://portal.azure.com/ eine neue App registrieren und der App einen aussagekräftigen Namen (zum Beispiel APEX_Login) geben.

Als Redirect URI muss die APEX Callback URI eingegeben und "Web" ausgewählt werden. 

• https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/apex_authentication.callback

Mit klick auf register die App fertigstellen.

Unter Certificates & secrets muss jetzt noch der Clientschlüssel erstellt werden.

Hier kann noch die Gültigkeitsdauer ausgewählt und eine Beschreibung eingegeben werden.

Um Microsoft Azure nutzen zu können ist bereits alles getan. Den Secret Key speichern und unter Overview noch die App-Id abspeichern. Dann wieder zum APEX Workspace wechslen und als nächstes die Webcredentials erstellen (App Builder > Workspace Utilities > All Workspace Utilities > Web Credentials).

Hier wieder einen Namen, Static Identifier und die App-Id sowie den Clientschlüssel eingeben.

Anschließend in den Shared Components der APEX-Anwendung ein weiteres Authentication Scheme erstellen.

Folgende Attribute müssen gesetzt werden:

• Name: Microsoft
• Scheme Type: Social-Sign-In
• Credential Store: Microsoft (zuvor definierte Web-Credential Name)
• Authentication Provider: OpenId Connect Provider
• Discovery URL: https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration 
• Scope: email
• Username Attribute: email

Fertig, ab jetzt können wir uns über einen Microsoft Account anmelden. 

LinkedIn

Kommen wir zum letzten Beispiel "LinkedIn". Wie jedes mal benötigen wir zunächst eine App. Dazu müssen wir in diesem Fall unter https://www.linkedin.com/developers/ eine neue App erstellen und der App wieder einen aussagekräftigen Namen (zum Beispiel APEX_Login) geben. Zusätzlich muss hier ein Logo hinzugefügt werden, sowie ein Unternehmen ausgewählt werden.

Abschließend noch die AGB´s bestätigen und die App erstellen.

Nach erfolgreicher Erstellung zum Tab "Auth" wechseln und als Redirect URL die APEX Callback URL eingegeben.

• https://rf0vpurtyuaq9ko-therwix.adb.eu-frankfurt-1.oraclecloudapps.com/ords/apex_authentication.callback

Client-Id und Client Secret wieder speichern, da wir diese im nächsten Schritt für unsere Web-Credentals in APEX benötigen. Fertig ist unsere LinkedIn App, so dass wir nun zum APEX Workspace wechseln können.

Hier als nächstes wieder die Webcredentials erstellen (App Builder > Workspace Utilities > All Workspace Utilities > Web Credentials).

Folgende Attribute eingeben

• Name: LinkedIn
• Static Identifier: LinkedIn
• Authentication Type: OAuth2 Client Credential Flow
• OAuth Scope: r_liteprofile
• Client ID or Username: Client-ID aus den OAuth Zugangsdaten der Facebook App 
• Client Secret or Password: Clientschlüssel aus den OAuth Zugangsdaten der Facebook App
• Verify Client Secret or Password: erneute Eingabe des Clientschlüssel´s

und erstellen klicken.

Jetzt noch in den Shared Components der APEX-Anwendung ein neues Authentication Scheme vom Typ Social Sign-In erstellen. Dieses mal müssen allerdings einige Attribute zusätzlich gesetzt werden. Vielen Dank an Christian Neumueller für die ausführliche Erklärung.

Folgende Attribute müssen gesetzt werden:

• Name: LinkedIn
• Scheme Type: Social-Sign-In
• Credential Store: LinkedIn (zuvor definierte Web-Credential Name)
• Authentication Provider: Generic OAuth2 Provider
• Authorization Endpoint URL: https://www.linkedin.com/oauth/v2/authorization
• Token Endpoint URL: https://www.linkedin.com/oauth/v2/accessToken
• User Info Endpoint URL: https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))
• Scope: r_liteprofile,r_emailaddress
• Username Attribute: elements[1]."handle~".emailAddress

Geschafft! Auch LinkedIn kann jetzt als Anwendungsauthentifizierung verwendet werden. 

Mehrere Autentication Schemes´s in einer App

Zu guter Letzt noch die Frage, wie wir jetzt alle Authentifizierungen in einer Anwendung zur Verfügung stellen können? Auch hier bietet APEX wieder eine komfortable Antwort! 

--> Switch in Session

Ganz einfach in jedem Authentication Scheme unter "Login Processing" die Auswahl bei Switch in Session auf "Enabled" setzen.

Allerdings muss jetzt noch in der Anwendung selbst ein Request hinterlegt werden, der das gewünschte Schema auswählt. Fügt hierzu auf der Login Seite für jede Authentifizierung einen neuen Button hinzu und gebt folgende Eigenschaften ein (Beispiel Google):

Button Name: Google

Label: Log in with Google

Button Template: Text with Icon

CSS Classes: google

Icon: fa-google

Action: Redirect to Page in this Application

Target: Page 1 (oder eure Startseite der App)

Request: APEX_AUTHENTICATION=Google

Optional kann der Button mit ein wenig CSS Code noch farblich angepasst werden:

.google {

    background: #e60005 !important;

    color: white !important;

} 

Mit allen weiteren Authentifizierungen gleich verfahren.

Falls man sich zu den Social-Sign-In Möglichkeiten auch noch weiterhin über E-Mail und Kennwort Eingabe einloggen können soll, muss das von APEX Standard erstellte Authentication Scheme auf "current" gesetzt sein (oder alternativ ein Custom Scheme). Somit besteht primär die Möglichkeit sich über E-Mail & Kennwort anzumelden und zusätzlich über die verschiedenen Social-Sign-In´s. Perfekt zum Beispiel für ein Web-Shop, eine Umfrage oder ähnliches.

Fertig ist der Login und das mit keiner einzigen notwendigen Zeile Code. 100% LowCode!!!

Hier geht´s zu unserer Demo App: demo

Quellen:

• https://docs.oracle.com/database/apex-18.1/HTMDB/establishing-user-identity-through-authentication.htm#GUID-8E0C259E-EE05-4497-A00E-8542730876CB
• https://community.oracle.com/message/15476089#15476089

Custom Authentication Scheme Part1

In this post, we will walk through creating a Custom Authentication Scheme in Apex, what are the advantages of using a custom Authentication scheme and when to use the default scheme which is created by default with each new application.

When you create a new Apex application, it comes with a default Authentication scheme. This authentication scheme used to establish the identity of each user who accesses your application, the default authentication scheme requires that a user has an Apex account (Application Express Accounts are user accounts that are created within and managed in the Oracle Application Express user repository. Those accounts can be created by workspace admins in the apex workspace panel or using plsql API).
The user then should provide his user name and password if he wants to use your application, these credentials are evaluated and they either pass or fail, if the credentials pass, the user has access to the application. Otherwise, access is denied.
You use this authentication scheme and the Application Express Accounts if your applications do not require special requirements and if the users' accounts can only be created or managed by the workspace admins.
On the other hand, if you, for example, want your user's account to have more attributes or if you want to implement registration/reset password functionality into your applications to give the public-users who have an account the ability to reset the passwords or even create a new account. Then it is much better to use a custom authentication scheme and custom user account based on your requirements. In this case, you will have full control over the authentication scheme and the user's table, and you are responsible for defining the user's role, handling password strength/expiration.
Another advantage of using a custom Scheme based on custom users table is when you have many workspaces, then your users will be shared across all the workspaces.

When you create an authentication scheme, you have the option of choosing from several pre-configured authentication schemes, copying an authentication scheme from an existing application, or creating your own custom authentication scheme.

In this article, we will create one from scratch. But before that, we have to create a users' table where we will save the accounts information.

In this example, we will just implement a username and email in addition to the password.
For creating the table you can use the code below
Now we want to add a user to the users' table, before that we want to draw your attention that we should not save the user's password in plain text, it is not recommended for security and privacy reasons. So we will hash the password and save it in hashed form, to do this we have two options, we can hash the password in the Apex application before the page is been submitted when we create a user or when the user registers, in this approach we have to include this process in all of our applications. The second option is to create a trigger that will be triggered automatically each time we insert a new user into the users' table. Because the trigger is based on the table, we don't have to rewrite the code each time we create an application in apex.
Later when we implement update user password functionality (In part2), we will need to hash the password again (when a user changes his password). So let's make the encryption reusable by creating a function and call it anywhere we need it.
Notice the upper and the lower functions, we want to standardize our data so all the user names are in upper case and the emails are in lower case.
Now we create a trigger which runs before insert and calls the encryption function
let's insert the user now
Once we have created the table we can now start creating the authentication functions. The authentication function accepts two parameters username and password. It will first check if the user exists in the users' table. If the user does not exist in the user's table, the function will return false and the login is denied otherwise if the user exists, it will compare the user's saved password with the one which the function has received if they match, the function returns true and the user will log in otherwise it returns false and the login is denied.
we almost have done with building the backend, well the plsql part, and we will now start implementing what we did in Apex. The first step is to create a new Application, we will name it Custom Auth

Next, go to SQL Workshop and navigate to SQL Scripts

Click on Create and paste the "create users table" script, give it a name then click Run (we can actually upload a script file which includes all our code and run it, but we want to create everything step by step)

After you see the success message, go back to SQL scripts and create a new script, paste the "encryption function" script give it a name and click run

Now to create the trigger and inserting the user we will create a new script, just do the same steps and paste the "create trigger" code and the "insert user" code

You should now see one user in your users' table

Again go to SQL scripts and run "create Auth function" script

Now navigate to the application we have created, go to shared components then go to Authentication schemes

Click on Create button it will open a wizard for creating an Authentication scheme, in the first step choose the option "based on the pre-configured scheme", click next

in the next step, give the Authentication scheme a name, and choose the scheme type custom it will show now many fields, in the Authentication Function Name field write your Auth function which you have created and click Create

Now run your application and log in using the user which we have inserted in our users' table if everything were successfully you will be redirected to the Home page.

so that's it, we hope you enjoyed and you learned something :), feel free to ask us if you run into any issue.
In the next post, we will implement the remember me functionality so our users will authenticate themself just once and if they close the browser and later open it again, they will automatically log in, and we will create a page where our users can register or update/reset there password.

References:

• https://docs.oracle.com/database/121/HTMDB/sec_authentication.htm#HTMDB12003
• https://oracle-base.com/articles/9i/storing-passwords-in-the-database-9i
• https://blogs.oracle.com/apex/custom-authentication-and-authorization-using-built-in-apex-access-control-a-how-to