Skip to content

Commit 6ba86cd

Browse files
Merge pull request #11505 from mendix/kv-oidc-login
OIDC SSO: update Logging in info
2 parents 073cf3d + 196ae50 commit 6ba86cd

3 files changed

Lines changed: 122 additions & 30 deletions

File tree

content/en/docs/marketplace/platform-supported-content/modules/oidc.md

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,8 @@ If multiple IdPs are configured in the OIDC module, the following two mechanisms
249249
1. Depending on deeplink, your application logic may redirect to a IdP-specific endpoint.
250250
2. In this mechanism, your end users make the selection. Your app logic can use the same URL (`<your-app-url>/oauth/v2/login`) to initiate authentication. End users will first be redirected to an IdP selection page, where they can choose the IdP they want to use for authentication.
251251

252-
{{% alert color="info" %}}
253-
From version 4.5.0, the `Anonymous` module role has been removed from the module and is no longer available.
252+
{{% alert color="warning" %}}
253+
From version 4.5.0, the `Anonymous` module role has been removed from the module and is no longer available. If you are using the module below V4.5.0 and `Anonymous` module role is enabled, configure **Role-based home page** and **Sign-in page** of the **Authentication** section to *none*.
254254
{{% /alert %}}
255255

256256
### Configuring Navigation{#configure-nav}
@@ -990,20 +990,24 @@ For all versions of the OIDC SSO module, once you have created the microflow (fo
990990
If your microflow is not correctly implemented you will be told that **Authentication failed!** and will see errors in the log under the OIDC log node.
991991
{{% /alert %}}
992992

993-
### Using Deep Links
993+
### Configuring Login Redirection
994+
995+
This section describes how to configure the application's `login.html` page to initiate authentication using the OIDC SSO module. By default, the Mendix `login.html` page does not automatically start the OIDC authentication flow. To enable users to sign in with an OIDC identity provider, you can configure the login page to either automatically redirect users to the identity provider or allow users to choose between local authentication and OIDC SSO.
996+
997+
#### Automatic Redirection
994998

995-
If end-users who use the deeplink do not yet have a session in your app, the deeplink can trigger the SSO process. If successful, the end-user will be automatically redirected back to the deeplink.
999+
To enable authentication using the OIDC SSO module, replace the default `login.html` with the content of <a href="/attachments/appstore/platform-supported-content/modules/oidc/login-automatic.txt" target="_blank">login-automatic.txt</a> file and save it as `login.html`. Use this option when all users should be directly redirected to the OIDC Identity Provider.
9961000

997-
For more information on using Deep Link module (with Mendix 9), see the [Using Deep Link Module](#using-deep-link) section below.
1001+
#### Manual Redirection
1002+
1003+
For manual redirection, replace the default `login.html` with the content of <a href="/attachments/appstore/platform-supported-content/modules/oidc/login-manual.txt" target="_blank">login-manual.txt</a> file and save it as `login.html`. Use this option when users should choose between login in using local credentials and login via OIDC SSO.
9981004

9991005
#### Using Page and Microflow URLs with OIDC SSO{#page-microflow-url}
10001006

10011007
Page URLs and Microflow URLs are supported with OIDC SSO for Mendix version 10.6 and above. To do this, follow the steps below:
10021008

1003-
1. In the **Runtime** tab of the **App Settings**, configure the page **URL prefix** to **link** instead of the default **P** to maintain compatibility with existing URLs, and ensure to remove the Deep Link module from your app to start the app successfully.
1004-
2. Configure **OIDC.Login_Web_Button** as the **Sign-in page** in the **Authentication** section of the app **Navigation**.
1005-
3. The user is redirected to the OIDC login page for authentication.
1006-
4. After successful log in, the user is directed to the desired page using page URLs and microflow URLs within the application.
1009+
1. Redirect users to the OIDC authentication flow using either automatic or manual redirection, allowing them to authenticate through the OIDC login page.
1010+
2. After successful login, the user is directed to the desired page using page URLs and microflow URLs within the application.
10071011

10081012
If you are building a new app using the OIDC SSO module (Mendix version 10.6 and above) and you are using Page URLs and Microflow URLs, follow the same steps as above.
10091013

@@ -1013,27 +1017,6 @@ For more information, see the [Migrating to Page and Microflow URLs](/appstore/m
10131017
Starting from Studio Pro 10.9.0, you can use the primitive parameters as **Query string** parameters in microflows. Check the checkbox in the parameter table to configure a microflow parameter to use as a **Query string** parameter.
10141018
For more information, see the [URL](/refguide/microflow/#url) section of the *Microflow Properties*.
10151019

1016-
##### Steps for OIDC SSO Version v4.1.0 and above
1017-
1018-
In OIDC SSO version 4.1.0 and above, you do not have to enable anonymous users. You can disable this setting by navigating to **Security > Anonymous users** and setting **Allow anonymous users** to **No**. However, from version 4.5.0 of the module, this role has been removed from the module.
1019-
1020-
1. To use the Page URL functionality, replace the content of `login.html` with the content of `login-with-mendixsso-automatically.html` (located in the `resources\mendixsso\templates` folder) and save it as `login.html`.
1021-
1022-
2. To implement the SSO redirection, you will need to replace the code in the `<script>` tag of your login page (for example, `login.html`) with code which does one of the following, depending on whether you want automatic or manual redirection:
1023-
1024-
* For automatic redirection, you can use `window.onload` to automatically redirect users to the SSO login page. You could, for example, use the following code:
1025-
1026-
```javascript
1027-
const cont = window.location.search + window.location.hash;
1028-
const base = window.location.pathname.replace(/\/login\.html$/, '');
1029-
const loginUrl = base + '/oauth/v2/login';
1030-
window.location.href = cont ? loginUrl + '?cont=' + encodeURIComponent(cont) : loginUrl;
1031-
```
1032-
1033-
* For manual redirection, you can use the same code above and add an onclick event to a button that manually triggers the SSO login.
1034-
1035-
Once the above changes are applied, end users can directly navigate to the desired page. If not logged in, they will be redirected to the IdP login page for authentication. After successful login, they will be directed to the desired page using page and microflow URLs.
1036-
10371020
#### Using Deep Link Module{#using-deep-link}
10381021

10391022
{{% alert color="warning" %}}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!--<script>
5+
self.location = "openid/login" + window.location.search + window.location.hash;
6+
</script>-->
7+
<script>
8+
window.onload = function () {
9+
const cont = window.location.search + window.location.hash;
10+
const base = window.location.pathname.replace(/\/login\.html$/, '');
11+
const loginUrl = base + '/oauth/v2/login';
12+
13+
window.location.href = cont
14+
? loginUrl + '?cont=' + encodeURIComponent(cont)
15+
: loginUrl;
16+
};
17+
</script>
18+
</head>
19+
<body>
20+
<noscript>
21+
<div class="loginpage-fullscreenDiv">
22+
<div class="loginpage-center">
23+
Your browser does not support JavaScript! You need to enable JavaScript to continue.
24+
</div>
25+
</div>
26+
</noscript>
27+
</body>
28+
</html>
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Login</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="apple-mobile-web-app-capable" content="yes" />
8+
9+
{{themecss}} {{appicons}} {{manifest}} {{startupimages}}
10+
</head>
11+
12+
<body>
13+
<div class="loginpage">
14+
<div class="loginpage-left">
15+
<div class="loginpage-image"></div>
16+
</div>
17+
<div class="loginpage-right">
18+
<div class="loginpage-formwrapper">
19+
<h2 id="loginHeader">Sign in</h2>
20+
<form id="loginForm" class="loginpage-form" autocomplete="off">
21+
<div>
22+
<div id="loginMessage" class="alert alert-danger"></div>
23+
<div class="form-group">
24+
<label class="control-label" id="usernameLabel" for="usernameInput">User name</label>
25+
<div class="inputwrapper">
26+
<input
27+
id="usernameInput"
28+
class="form-control"
29+
type="text"
30+
placeholder="User name"
31+
autocorrect="off"
32+
autocapitalize="none"
33+
autocomplete="off"
34+
/>
35+
<span class="glyphicon glyphicon-user"></span>
36+
</div>
37+
</div>
38+
<div class="form-group">
39+
<label class="control-label" id="passwordLabel" for="passwordInput">Password</label>
40+
<div class="inputwrapper">
41+
<input
42+
id="passwordInput"
43+
class="form-control"
44+
type="password"
45+
placeholder="Password"
46+
autocorrect="off"
47+
autocapitalize="none"
48+
autocomplete="off"
49+
/>
50+
<span class="glyphicon glyphicon-eye-close" id="passwordToggle"></span>
51+
</div>
52+
</div>
53+
<button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
54+
<button id="logiSSOnButton" type="button" onclick="SSOlogin()" class="btn btn-lg">OIDC SSO Login</button>
55+
</div>
56+
</form>
57+
</div>
58+
</div>
59+
<div class="loginpage-logo">
60+
<img src="logo.png" role="presentation" height="45" alt="" />
61+
</div>
62+
</div>
63+
<script>
64+
65+
function SSOlogin() {
66+
const cont = window.location.search + window.location.hash;
67+
const base = window.location.pathname.replace(/\/login\.html$/, '');
68+
const loginUrl = base + '/oauth/v2/login';
69+
window.location.href = cont
70+
? loginUrl + '?cont=' + encodeURIComponent(cont)
71+
: loginUrl;
72+
}
73+
74+
75+
</script>
76+
77+
<script src="js/login_i18n.js?{{cachebust}}"></script>
78+
<script src="js/login.js?{{cachebust}}"></script>
79+
<script src="js/toggle-password.js?{{cachebust}}"></script>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)