The purpose of this sample project is to demonstrate how a web developer, using Auth0, can add the identity provider Verimi as an option for their end users to signup and login to their web application.
Verimi is your secure ID provider
Verimi is the trusted cross-sector european identity platform making processing digital user data easy, while identifing and verifing your users quickly and seamlessly. Verimi helps you meet your sector’s regulatory requirements in accordance with the Money Laundry Act (ZAG license by BaFin), being compliant to KYC standards as well as to European standards (GDPR, elDAS), being ISO/IEC 27001-certified and complying to the requirements of the Federal Network Agency. Verimi offers the following services: simple registration process, in-line verification, secure login, 2-FA, qualified digital signature and soon payment. Verimi is backed by strong partners like Samsung, Deutsche Telekom, Allianz, Axel Springer, Daimler, Deutsche Bank.
Auth0 is an Identity as a Platform (IDaaS) service provider.
Auth0 is Identity made simple and secure. With Auth0, you take perhaps the riskiest endeavor your engineering organization will face, managing and securing the identities of your customers and employees, and abstract away this complexity and risk with our Identity Platform. Our standards-based Identity-as-a-Service platform is built for developers, by developers so that your engineering organization can focus on building the solutions that delight your customers and drive your revenue. Our customers find that what typically either takes months to deliver or simply cannot be delivered via internal or external solutions, takes them only days to deliver with Auth0 due to our extensive SDKs, intuitive API, extensible architecture and our simple management dashboard. This is why Auth0 is the leader in developer-focused Identity Management, with more than 5,000 customers trusting us with billions of transactions everyday.
We assume that you already have registered an Auth0 account and setup a tenant. If not, register a free account and tenant at https://auth0.com Also, we assume that you already have a client app setup in Auth0. If not, you can refer to the steps and screenshots further below.
Furthermore, we assume that you have already registered a service provider account at Verimi. If not, you can inform yourself about the possibilities here: https://verimi.de/en/partner and contact Verimi by email, referring to Auth0: partner@verimi.com.
- Verimi will send you a welcome email requesting contact data (for sending the api access data), your redirect urls (in order to whitelist them) and you company logo (for co-branded flow)
- Verimi provides you with an api access to the UAT test environment by email and sms (base URL: https://verimi-uat.coretransform.com)
- You test your integration and do a short acceptance test with Verimis integration team
- You provide content if you want to be listed as a service provider in the customer login area
- Verimi will provide you with api access for the live environment (base url: https://web.verimi.de)
- Verimi will coordinate joint PR and Marketing measures, if you're interested
- You inform Verimi about the golive date and switch your integration to live environment
This can be done within 1-2 days.
-
Log into the Auth0 Dashboard.
-
Go to
Extensionsin the left-hand menu. -
Make sure that the
Custom Social Connectionsextension is installed. If not, install it by clicking on it.
-
Once installed, click on the extension to configure it.
-
The upcoming screen shows an overview of pre-configured but disabled custom connections. Press the orange button labeled
+ New Connectionto create and configure a new connection.
-
In the upcoming configuration screen, enter the following values:
Name: Verimi
Client ID: <enter the ClientID you retrieved from Verimi>
Client Secret: <enter the Client Secret you retrieved from Verimi>
Fetch User Profile Script:
function(accessToken, ctx, cb) {
request.get('https://verimi-uat.coretransform.com/userinfo', {
headers: {
'Authorization': 'Bearer ' + accessToken
}
}, function(e, r, b) {
if (e) return cb(e);
if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));
var profile = JSON.parse(b);
cb(null, {
user_id: profile.sub,
given_name: profile.name.split(' ')[0].trim(),
family_name: profile.name.split(' ')[1].trim(),
name: profile.name,
email: profile.email,
email_verified: profile.email_verified
});
});
}Authorization URL: https://verimi-uat.coretransform.com/oauth2/auth
Token URL: https://verimi-uat.coretransform.com/oauth2/token
Scope: openid email name
Custom Headers:
Since Verimi requires Basic Authentication for authentication, but the Auth0 Custom Social Login extension submits the credentials via post body per default, we need to create a custom header for the Authorization and add it to the configuration.
The hash is created by Base64-encoding the clientID and clientSecret concenated with a :. So the pseudo code to generate this would be:
base64encode(clientId + ":" + clientSecret)
so an example could then look like:
{
"Authorization": "Basic NDQyNWM3NGItN2VhOS00MDI0LTk4OGQtY2JmZmRiZjQwNGM1OkhISEh6bHQzZ1JORHV5TGkzbHJmRC1YMWpjTnpfUG5wd1RjYTloc1lySHo4cFlMblVSNVpucmxaMEpKSko="
}
In the end, it should look similar to this:
You can try out the connection by pressing the Try button and, upon success, get a screen like this:
Under the Apps tab, make sure that your client/application is enabled for this custom social connection, otherwise enable the checkbox.
After hitting the Save button and returning to the overview of custom social connections, you should see the newly added one listed and active here:
- At last, adjust the
Universal Login Pageconfiguration and add a few lines of custom css to make the Verimi button appear with the respective logo and coloring. In the Auth0 dashboard, go toUniversal Login Page>Login(https://manage.auth0.com/#/login_page) and enable theCustomize Login Pagecheckbox. Adjust the source code of the login page replacing thethemesection in the JSON object with the following lines:
theme: {
logo: config.icon,
primaryColor: colors.primary ? colors.primary : 'green',
authButtons: {
"Verimi": {
displayName: "Verimi",
primaryColor: "#0E956E",
foregroundColor: "#fff",
icon: "https://raw.githubusercontent.com/auth0-blog/auth0-verimi-sample/master/img/icon.png"
}
}
},
Before:
After:
A screencast of the authentication flow is available here: Screencast
When pressing the login button within the client application,...
...Auth0 provides a login/signup widget with options to login/signup via username and password or via social login, such as Verimi.
When choosing Verimi (we're assuming the end user already has an account at Verimi), he will be asked to login at Verimi, providing email address...
... and password:
Upon successful login, he will be asked give consent to Verimi to grant Auth0 access to his personal information:
Only if the Service Provider requests one of the scopes "idcard", "passport" or "driverlicense" (and by that personal and sensitive data), then Verimi requires the user to confirm the data transfer by 2FA via the Verimi (ios/android) app, which can be downloaded and used for this confirmation without aborting the flow.
After confirming, the demo client asks for consent to access the Auth0 tenant:
After consent is given, the browser redirects to the application, having received an ID token and information about the user:
In our example, we chose a Single Page Application (SPA) based on Angular delivered from a Node.js web server. You can choose any other technology stack as well though.
In our case, the client application is created and configured as follows in the Auth0 backend:
- Create the application by going to the
Applicationssection in the dashboard and click the+ Create Applicationbutton.
- Give the application any name you like and choose
Single Page Web Applicationas the type.
- Next, choose
Angularas the technology.
- Afterwards, you're given the choice to either integrate Auth0 into an existing app, or download a complete sample. Choose the latter and download the
.zipfile.
- Download and unzip the
.zipfile anywhere on your computer. Then, enter a local terminal window and switch to the folder where you extracted the project into.
To build and run the project, enter:
npm install
followed by
npm start
This should spin up a local Node.js web server, making the application available at http://localhost:3000.
Returning to the Auth0 dashboard, click the Settings tab of the app.
In the application settings:
- set
Application TypetoSingle Page Application. - set
Allowed Callback URLstohttp://localhost:3000/callback - set
Allowed Logout URLstohttp://localhost:3000
As for the connections, enable any (other) connections that you want enabled besides Verimi. Note that custom social connection don't show in this screen, they are configured and within the Custom Social Connection extension itself. In our example, we chose to also offer authentication via Username-Password-Authentication, facebook and google-oauth2, besides Verimi, thus the respective switches are enabled.
In the end, the application is listed in the Applications overview:
Looking at the user list and into a user's detail after he authenticated:
The user's primary identity provider is shown as oauth2...
... and the raw json of this user contains the Verimi identity of the user:
After logging into the Verimi backend as a user, you see the dashboard...
...with further options to look at your data...
...as well as all your recent activities:
