Node.js Single Sign-On (SSO)
Node.js JWT Single Sign-On (SSO) solution by miniOrange provides secure Single Sign-On access into Node.js application using a single set of login credentials. This is done using JSON Web Token (JWT) tokens and it can be easily integrated with Node.js built in any framework or language. You can enable social login for your users to get secure access to applications using any of their existing social providers such as Facebook, Twitter, Google, or LinkedIn.
With miniOrange Node.js SSO, you get:
- Seamless user login experience.
- Endless customizations to your login forms and pages.
- Simplified customer or user on-boarding.
Connect with External Source of Users
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Azure AD, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Shibboleth, Ping, Okta, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more.
Follow the step-by-step guide given below for Node.js Single Sign-On (SSO)
1. Configure Node.js in miniOrange
A. Add Node.js app in miniOrange:
In miniOrange dashboard, you can add JWT application with steps below:
- Login into miniOrange Admin Console.
- Go to Apps >> Add Application button.
![Node.js SSO (Single Sign-On): add app](/images/common-template-saml-images/add-app.webp)
- In Choose Application Type click on Create App button in JWT application type.
![Node.js SSO (Single Sign-On): choose app type](/images/common/select-jwt.webp)
- In the next step, search for Node.js application from the list. If your application is not found, search for External / JWT App and you can set up your Application.
![Node.js SSO (Single Sign-On): external app](/images/nodejs/node-js-dashboard.webp)
- Configure the name for Node.js and configure Redirect-URL which tells where to send JWT response.
- Redirect-URL should be an endpoint on Node.js where you want to achieve SSO:
https://<Node.js-application-base-url>/auth/callback
- In case you are setting up SSO with Mobile Applications your endpoint could be in the following format:
myapps://auth/callback
- Copy Client ID of the generated application and keep it with you for next the steps.
B. Add SSO link in Node.js:
https://login.xecurify.com/moas/broker/login/jwt/<customer-id>?client_id=<client-id>&redirect_uri=<redirect-url>
- You need to replace below values in URL:
customer-id |
Customer ID of your miniOrange account which can be found under settings menu.Refer image below. |
client-id |
Client Id of JWT application created above(Step 3.a). |
redirect-url |
Configured Redirect URL against JWT application. |
- Get CustomerID.
- Go to the Settings section, present on the top right corner.
- Copy the value mentioned against Customer Key
![Node.js SSO (Single Sign-On): customer key](/images/common/settings-customer-key.webp)
C. Verify JWT token and parse user details for SSO:
- On your Callback endpoint, you can read and parse the JWT token.
- Structure of JSON Web Token (JWT): JSON Web Tokens consist of three parts separated by dots (.), which are:
- Header: Contains the signature algorithm name used to sign the payload.
- Payload: Contains user attributes.
- Signature: Signature value of the payload.
eg. xxxx.yyyyyyyyyyyy.zzzzzz
- You will need to download a certificate from App > Manage Apps and click Certificate link against your configured application.
This certificate will be used for signature validation of the JWT response.
![Node.js SSO (Single Sign-On): certificate link](/images/common/jwt-app.png)
- Verify JSON web token: Click here to verify your JSON token.
D. Perform SSO:
- Once you have added the link above on Node.js, you can verify the Node.js SSO setup by clicking on that link.
- On successful authentication, you will be redirected to configured Redirect or Callback URL with JWT token.
2. Configure miniOrange in Node.js Application
Copy following Sample Code for setting up the Node.js application.
const fs = require("fs");
const MoJWT = require("mo-jwt-connector");
//This URL can be copied from JWT app in miniOrange dashboard
const miniOrangeSSOURL =
"https://jsdemo.xecurify.com/moas/broker/login/jwt/258267?client_id=lXN6XGc1yoh8M6Gd&redirect_uri=http://localhost:3000/auth/callback";
// start authentication request
app.get("/auth", (req, res, next) => {
res.redirect(miniOrangeSSOURL);
});
// authentication callback
app.get("/auth/callback", (req, res, next) => {
var id_token = req.query.id_token;
// var cert = fs.readFileSync("cert.crt");
var jwtBuilder = new MoJWT.JWTBuilder();
console.log("Parts " + id_token.split(".").length);
jwtBuilder.parseJwt(id_token); // initialize the token using parseJwt
jwtBuilder.setSecret(fs.readFileSync("./path/to/RSA256Cert.crt",'utf8')); // Set the certificate downloaded from miniOrange dashboard
var verified = jwtBuilder.verifyJwt(); // Verify the signed token
if (!verified) res.send("Error Occurred while verifying JWT Token");
var payload = jwtBuilder.getPayload(); // If the token is valid, use getPayload to read the data from the token.
var firstname = payload.first_name;
var lastname = payload.last_name;
var email = payload.email;
res.send(
"Email : " + email +
"
Firstname : " +
firstname +
"
Lastname: " +
lastname
);
});
3. Test SSO Configuration
Test SSO login to your Node.js account with miniOrange IdP:
Using IDP Initiated Login
- Login to miniOrange IdP using your credentials.
![Node.js Single Sign-On (SSO) login](/images/common-template-saml-images/login.webp)
- On the Dashboard, click on Node.js application which you have added, to verify SSO configuration.
![Node.js Single Sign-On (SSO) verify configuration](/images/nodejs/node-js-user-dashboard.webp)
4. Login Using Social Provider (Optional)
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Okta, Shibboleth, Ping, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more. You can configure your existing directory/user store or add users in miniOrange.
4.1. Configure Google Apps as OAuth 2.0 Provider in miniOrange.
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Providers >> Add Identity Provider.
![SSO: Add Identity Provider](/images/login-with-external-idp/select-add-identity-provider.webp)
- Select OAuth2.0
![SSO: Add OAuth2.0 Identity Provider](/images/login-with-external-idp/select-oauth.webp)
- Enter the following values:
IdP Name |
Custom Provider |
IdP Display Name |
Choose appropriate Name |
OAuth Authorize Endpoint |
https://{your-base-url}/as/authorization.oauth2 |
OAuth Access Token Endpoint |
https://{your-base-url}/as/authorization.oauth2 |
OAuth Get User Info Endpoint (optional) |
https://{your-base-url}/idp/userinfo.oauth2 |
Client ID |
From step 4.2 |
Client secret |
From step 4.2 |
Scope |
email |
4.2. Configuring miniOrange as Service Provider (SP) in Google Apps
- Go to https://console.developers.google.com/ and sign up/login.
- Click on Select Project to create a new Google Apps Project,you will see a popup with the list of all your projects.
![SSO: Creat Google Apps project](/images/googleapps/select-project-oauth-sso.webp)
- You can click on the New project button to create new project.
![SSO: Click on new project](/images/googleapps/click-on-new-project-oauth-sso.webp)
- Enter your Project name under the Project Name field and click on Create.
![SSO: Create New Project](/images/googleapps/create-project-oauth-sso.webp)
- Go to Navigation Menu >> APIs >> Services >> Credentials.
![SSO: Select Credentials](/images/googleapps/go-to-credentials-oauth-sso-1.webp)
- Click on Create Credentials button and then select OAuth Client ID from the options provided.
![SSO: Create Credentials](/images/googleapps/crentials-oauth-sso.webp)
- In case you are facing some warning saying that in order to create an OAuth Client ID, you must set a product name on consent screen (as shown in below image). Click on the Configure consent screen button.
![SSO: Configure consent screen](/images/googleapps/configure-consent-screen-oauth-sso.webp)
- Enter the required details such as App Name, User Support Email. and click on Save and Continue button.
![SSO: Enter App information](/images/googleapps/enter-app-information-oauth-sso.webp)
![SSO: Save all details](/images/googleapps/enter-all-details-and-save-oauth-sso.webp)
- Now for configuring scopes, click on Add or Remove the Scopes button.
![SSO: Add and Remove](/images/googleapps/add-remove-scope-oauth-sso.webp)
- Now, Select the Scopes to allow your project to access specific types of private user data from their Google Account and click on Save and Continue button.
![SSO: Update Selected Scope](/images/googleapps/update-the-scope-oauth-sso.webp)
- Go to the Credentials tab and click on Create Credentials button. Select Web Application from dropdown list to create new application.
![SSO: Select Web App Oauth](/images/googleapps/select-web-app-oauth-sso.webp)
- To get the Redirect URL:
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Provider.
![SSO: Select IdP](/images/login-with-external-idp/select-add-identity-provider.webp)
- Copy the Callback URL as Redirect URL required for next step.
![SSO: Select Oauth](/images/login-with-external-idp/select-oauth.webp)
- Enter the name you want for your Client ID under the name field and enter the Redirect/Callback URI and click on Create button.
![SSO: Create oauth client id](/images/googleapps/create-oauth-client-id-oauth-sso.webp)
- You will see a popup with the Client ID and Client Secret Copy your Client ID and Client Secret.
![SSO: Google client id client secret](/images/googleapps/google-sso-client-id-client-secret.webp)
- You have successfully completed your Google App OAuth Server side configurations.
4.1. Configure LinkedIn as OAuth 2.0 Provider in miniOrange.
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Providers >> Add Identity Provider.
![Social Login SSO: LinkedIn](/images/login-with-external-idp/select-add-identity-provider.webp)
- Select OAuth2.0
![SSO: Select Oauth LinkedIn](/images/login-with-external-idp/select-oauth.webp)
- Enter the following values:
IdP Name |
Custom Provider |
IdP Display Name |
Choose appropriate Name |
OAuth Authorize Endpoint |
https://www.linkedin.com/oauth/v2/authorization |
OAuth Access Token Endpoint |
https://www.linkedin.com/oauth/v2/accessToken |
OAuth Get User Info Endpoint (optional) |
https://api.linkedin.com/v2/me |
Client ID |
From step 4.2 |
Client secret |
From step 4.2 |
Scope |
r_emailaddress r_liteprofile |
4.2. Configure miniOrange as Service Provider (SP) in LinkedIn
- Go to https://www.linkedin.com/secure/developer?newapp= in order to create a new application. Click on Create Application button to create a new application.
![SSO LinkedIn: Create-application](/images/linkedin/oauth-sso-linkedin-create-app.webp)
- Enter the required details and click on the Create app button to save your changes.
![SSO LinkedIn: submit changes](/images/linkedin/oauth-sso-linkedin-fill-details.webp)
- Here you need to verify the provided page. If the verification of the page is not done, then SSO will not work.
![SSO: Verify App](/images/linkedin/verify-app.webp)
- Navigate to Products section and then select Sign in with LinkedIn.
![SSO LinkedIn: Products section](/images/linkedin/products-section-1.webp)
- Copy the Client Id and the Client Secret and save it in your miniOrange OAuth App configuration under Client Id and the Client Secret text fields respectively.
![SSO LinkedIn: Update-configuration](/images/linkedin/oauth-sso-linkedin-client-credentials.webp)
- To get the Redirect URL:
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Provider.
![SSO LinkedIn: Select IdP](/images/login-with-external-idp/select-add-identity-provider.webp)
- Copy the Callback URL as Redirect URL required for next step.
![SSO LinkedIn: Select Oauth](/images/login-with-external-idp/select-oauth.webp)
- Copy the Redirect/ Callback URl from above step and enter it under OAuth 2.0 -> Authorized Redirect URLs text box. Click on the Add button adjacent to the text box to save it. Finally, click on the Update button to save your configurations. (image on the next page).
![SSO: oauth sso linkedin redirect url](/images/linkedin/oauth-sso-linkedin-redirect-url.webp)
4.1. Configure Facebook as OAuth 2.0 Provider in miniOrange.
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Providers >> Add Identity Provider.
![Add Identity Provider](/images/login-with-external-idp/select-add-identity-provider.webp)
- Select OAuth2.0
![Social Login SSO: Facebook](/images/login-with-external-idp/select-oauth.webp)
- Enter the following values:
IdP Name |
Facebook |
IdP Display Name |
Choose appropriate Name |
Client ID |
From step 4.2 |
Client secret |
From step 4.2 |
Scope |
public_profile email |
4.2. Configure miniOrange as Service Provider (SP) in Facebook
- First of all, Login/ Signup in Facebook developer console at https://developers.facebook.com/
![SSO Facebook: SSO developer console](/images/facebook/facebook-sso-developer-console.webp)
- Go to My apps.
![SSO: Facebook SSO add new app](/images/facebook/oauth-sso-facebook-goto-myapp.webp)
- Click on Create app to create a new app.
![SSO: Facebook SSO add new app](/images/facebook/create-app-button.webp)
- Select what your app is going to work for.
![SSO: Facebook SSO add new app](/images/facebook/oauth-sso-facebook-select-option.webp)
![SSO: Facebook SSO add new app](/images/facebook/oauth-sso-facebook-add-details.webp)
- Enter the required details and click on create app.
![SSO Facebook: Fill Details](/images/facebook/facebook-sso-fill-details.webp)
- Complete the security check and click on Submit button.
![SSO: Facebook Login](/images/facebook/login-page.webp)
- Select Facebook Login by clicking on the set up button .
![Social Login SSO: Facebook: SSO login setup](/images/facebook/select-facebook-login.webp)
- Select Facebook Login >> Settings under Products option in the navigation bar.
![Social Login SSO: Facebook: SSO login setting](/images/facebook/click-on-settings.webp)
- To get the Redirect URL:
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Provider.
![Social Login SSO: Facebook](/images/login-with-external-idp/select-add-identity-provider.webp)
- Copy the Callback URL as Redirect URL required for next step.
![Social Login SSO: Facebook](/images/login-with-external-idp/select-oauth.webp)
- Under Client OAuth Settings, enter the Callback/Redirect URL in the Valid OAuth Redirect URIs field. Click on the Save button to save your configurations.
Most importantly, your Callback/Redirect URI should be https and not http. It is mandatory while configuring Facebook as an OAuth Server.
![Social Login SSO: Facebook: SSO client oauth setting](/images/facebook/redirect-url-for-miniorange.webp)
- Go to Settings -> Basic to view your App Id and App Secret (Refer to the image below).
![Social Login SSO: Facebook: SSO client oauth basic setting](/images/facebook/client-id-secret-for-idp.webp)
- You have successfully completed your Facebook App OAuth Server side configurations.
4.1. Configure Apple Apps as OAuth 2.0 Provider in miniOrange.
- Go to miniOrange Admin Console.
- From the left navigation bar select Identity Providers >> Add Identity Provider.
![Add Identity Provider](/images/login-with-external-idp/select-add-identity-provider.webp)
- Select OAuth2.0
![Social Login SSO: Apple](/images/apple-sso/select-oauth-2.0.webp)
- Fill in the details shown in the below image.
![Social Login SSO: Apple](/images/apple-sso/apple-oauth-app-details.webp)
IDP Name: |
Apple ID |
OAuth Authorize Endpoint |
https://appleid.apple.com/auth/authorize?response_mode=form_post |
OAuth Access Token Endpoint* |
https://appleid.apple.com/auth/token |
Client ID* |
{Your service id} e.g. com.john.serviceid |
Client Secret* |
eyJraWQiOiJCOTJQUDg1VUw4IiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJFW.... |
- Click Save.
4.2. Configure miniOrange as Service Provider (SP) in Apple Apps
- Go to https://developer.apple.com click on Account and Login with your Apple developer account.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-login.webp)
- Click on Certificates, Identifiers and Profiles in Apple Account.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-Profiles.webp)
- In the left menu Click on Identifiers and after that click on the Plus Icon(blue color). Click on Continue for the next 2 pages of Apple Account.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-user-Identifiers.webp)
- Enter Description and Bundle ID for the App ID. (The Bundle ID is best when it’s a reverse-dns style string.)
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-description.webp)
- In the Capabilities section scroll down and select sign up with apple. Click on Edit and select Enable as a primary App Id and click on Save. Click on Continue and then click on Register.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-capabilities.webp)
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-user-primary-app.webp)
- In the right corner click on Continue and after that Register button.
- Again click the Plus icon( blue color). Select Service IDs and click on Continue.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-plusicon.webp)
- Enter Description and Identifier( Identifier would be your client id - Copy this id and Paste in the above field of Client ID). and click on the Continue and after that Register button.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-clientid.webp)
- Click Keys from the left menu.Click on the Plus icon to register a new key.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-new-key.webp)
- Give your Key a name, and select Sign In with Apple and click on Configure button
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-key.webp)
- Select your Primary Id and click on the Save button and after that at the right corner click on Continue and Register button.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-register.webp)
- Click on the Download button once the key is downloaded click on the Done button.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-download.webp)
- In the left menu click on Identifiers.
- At the right top click on App IDs.
- Select Service IDs from the drop-down menu.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-user-ids.webp)
- Select your Service Id from the List.
- Select Sign In with Apple and click on Configure button<./li>
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-app-login-configure.webp)
- Select the Primary App Id from the drop-down, and Enter the Domain and Redirect URL in Domains and Subdomains and Return URLs respectively and click on the Next button (You will get the Domain name and Redirect URL from miniOrange dashboard).
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-user-redirect-url.webp)
- Verify the details and click on the Done button. After that at the right corner click on the Continue button.
- Copy the Identifier value and click on the Save button.
![Social Login SSO: Apple](/images/apple-sso/wp-social-login-apple-app-id-secret.webp)
- Enter the Identifier value in the App Id field and copy the downloaded key value in App secret field of the Apple Login instruction miniOrange plugin.
Generating Secret Key
- Download the Ruby installer from the following link https://rubyinstaller.org/downloads/ and then install it.
- Search for the Start command prompt with ruby open the ruby command prompt and install the JWT gem by running the following command on the command line: gem install jwt.
- Copy the below code in a file and save the file with the .rb extension. Keep this .rb file and downloaded .p8 file in the same folder.
- Enter the name of downloaded file example= "key.P8", key_id , client_id, team_id in the code
require 'jwt'
key_file = 'key.P8'
team_id = ''
client_id = ''
key_id = ''
ecdsa_key = OpenSSL::PKey::EC.new IO.read key_file
headers = {
'kid' => key_id
}
claims = {
'iss' => team_id,
'iat' => Time.now.to_i,
'exp' => Time.now.to_i + 86400*180,
'aud' => 'https://appleid.apple.com',
'sub' => client_id,
}
token = JWT.encode claims, ecdsa_key, 'ES256', headers
puts token
- Open Ruby command prompt and run the above code using the following command: ruby filename.rb.
- You will be provided with your Client secret key. Copy and save the secret key; you will need it to configure Apple ID in miniOrange Dashboard.
![Social Login SSO: Apple](/images/apple-sso/generate-secret-key.webp)
External References