Custom Login Page

In some scenarios, our account system may be divided into multiple groups, such as internal employees and suppliers. Internal employees typically use the company's internal unified authentication system, while suppliers generally use the software system's own authentication system. In such scenarios, the need for multiple login methods arises.

Within the platform, you can customize login pages through the component editor, combined with the automation and scripting capabilities provided by the system to complete multiple authentication systems. The following describes an example where suppliers use platform account password login, and internal employees can use both account password login and dynamic token for SSO login.

Effect Diagrams

Component Settings

Use the component editor to build the login page. The specific source code can be referenced from the Functional Demo application's "Other Cases" -> "Multi-account Type Login". The following provides the core source code of the component for explanation. This component depends on component libraries such as HTML, Informat Web Runtime, and Axios Network Request Library. Set the component's access address as the login address in the admin backend's Login Address to replace the system's default login page.

<div style="background-image:url(images/bg.jpg);min-height:100vh" class="img js-fullheight">
    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 text-center mb-5">
                    <h2 class="heading-section">
                        Login
                    </h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4">
                    <div class="login-wrap p-0">
                        <h3 class="mb-4 text-center">
                            {{type == 'pwd' ? 'Account Password' : 'Dynamic Token'}}
                        </h3>
                        <div v-if="type == 'pwd'">
                            <div class="signin-form">
                                <div class="form-group">
                                    <input v-model="userName" type="text" placeholder="Username" required
                                        class="form-control"></input>
                                </div>
                                <div class="form-group">
                                    <input v-model="password" id="password-field" type="password" placeholder="Password"
                                        required class="form-control"></input>
                                    <span toggle="#password-field"
                                        class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                </div>
                                <div class="form-group">
                                    <button type="button" class="form-control btn btn-primary submit px-3"
                                        v-on:click="login">
                                        Login
                                    </button>
                                </div>
                            </div>
                            <p class="w-100 text-center">
                                — Other Login Methods —
                            </p>
                            <div class="social d-flex text-center">
                                <a href="javascript:;" class="px-2 py-2 mr-md-1 rounded" v-on:click="switchType('sso')">
                                    Login (SSO)
                                </a>
                            </div>
                        </div>
                        <div v-if="type=='sso'">
                            <div class="signin-form">
                                <div class="form-group">
                                    <input v-model="code" type="text" placeholder="Dynamic Token" required class="form-control"
                                        v-on:input="if($event.target.composing)return;code=$event.target.value"></input>
                                </div>
                                <div class="form-group">
                                    <button type="button" class="form-control btn btn-primary submit px-3"
                                        v-on:click="ssoLogin">
                                        Login (SSO)
                                    </button>
                                </div>
                            </div>
                            <div class="social d-flex text-center">
                                <a href="javascript:;" class="px-2 py-2 mr-md-1 rounded" v-on:click="switchType('pwd')">
                                    Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

export default {
  data() {
    return {
      userName: null,
      password: null,
      code: null,
      type: "pwd",
    };
  },
  mounted() {
    // Get the redirect URL for login, and redirect after successful login
    const params = this.getQueryParams();
    this.rdUrl = params.rdUrl || "/";
  },
  methods: {
    // Password login
    async login() {
      const { userName, password } = this;
      try {
        const resp = await informatweb.callAutomatic({
          automaticId: "pwdLogin",
          args: [userName, password, "index"],
        });
        this.loginResult(resp);
      } catch (e) {
        alert(e);
      }
    },
    switchType(type) {
      this.type = type;
    },
    // SSO login
    async ssoLogin() {
      const { code } = this;
      try {
        const resp = await informatweb.callAutomatic({
          automaticId: "ssoLogin",
          args: [code, "index"],
        });
        this.loginResult(resp);
      } catch (e) {
        alert(e);
      }
    },
    // Get URL parameters
    getQueryParams() {
      let params = {};
      let url = window.location.search.substring(1);
      let queryString = url.split("&");

      queryString.forEach((param) => {
        let keyValue = param.split("=");
        let key = decodeURIComponent(keyValue[0]);
        let value = decodeURIComponent(keyValue[1]);
        params[key] = value;
      });

      return params;
    },
    // Add parameters to URL
    addURLParam(url, param, value) {
      // If URL already has query parameters, use & otherwise use ?
      let separator = url.indexOf("?") !== -1 ? "&" : "?";
      // Combine new URL
      return url + separator + param + "=" + encodeURIComponent(value);
    },
    // After successful login, append token parameter to URL and redirect
    loginResult(resp) {
      const result = resp.returnValue;
      if (!result.success) {
        alert(`Login failed: ${result.message || "Unknown error"}`);
        return;
      }
      // Single sign-on can be achieved by appending the [_token] parameter to the URL
      window.location.href = this.addURLParam(this.rdUrl, "_token", result.token); 
    },
  },
};

Automation Settings

In the login component's script, we called two automations pwdLogin and ssoLogin through the Informat Web Runtime. Both automations only use code snippets to complete their respective business logic. The following is the specific source code.

TIP

Since the component uses Informat Web Runtime which is called via HTTP, automations need to enable Allow calling automations via HTTP.

Authenticate by verifying whether the incoming account password is correct. After successful authentication, create a Token through the user's ID and return it to the front-end page.

Automation Input Parameters

Parameter	Type	Required	Description
userName	String	Yes	Username
password	String	Yes	Password
type	String	Yes	Login type, generally divided into PC login: index, mobile login: mobile, custom types are also supported. For the same type, tokens from the same account will squeeze each other out.

Code Snippet

const userName = automatic.getVar("userName");
const password = automatic.getVar("password");
const type = automatic.getVar("type");

var accountList = informat.system.queryAccountList({
  filter: {
    conditionList: [{ fieldId: "userName", opt: "eq", value: userName }],
  },
});

if (accountList.length < 1) {
  informat.app.abort("Account or password error");
}

// Platform authenticates username and password and returns results
var result = informat.system.validateAccount(userName, password); 

if (!result) {
  informat.app.abort("Account or password error");
} else {
  // Create Token through user ID
  const token = informat.system.createToken(accountList[0].id, type); 
  automatic.setReturnValue({
    success: true,
    accountId: accountList[0].id,
    token: token,
  });
}

Authenticate by verifying whether the token in the dynamic token table exists. If it exists, it is valid access; if not, it is invalid access. Then obtain the binding relationship between the dynamic token and the account, create a Token through the bound user's ID, and return it to the front-end page. This is an example SSO login scenario. The actual SSO login business should be integrated with the enterprise's internal unified authorization system.

Dynamic Token Data Table

Field Name	Identifier	Type
Bound User	user	User Selection
Dynamic Token	code	Single Line Text

Automation Input Parameters

Parameter	Type	Required	Description
code	String	Yes	Dynamic Token
type	String	Yes	Login type, generally divided into PC login: index, mobile login: mobile, custom types are also supported. For the same type, tokens from the same account will squeeze each other out.

Code Snippet

const code = automatic.getVar("code");
const type = automatic.getVar("type");

// Here is the specific SSO login logic, which is generally integrated with the unified permission system, and obtains the account of the unified permission system, and maps it to the platform account.
// The example uses the binding relationship between dynamic token and user for login
const codeRecord = informat.table.queryList("ssoCode", {
  pageSize: 1,
  filter: {
    conditionList: [
      {
        fieldId: "code",
        opt: "eq",
        value: code,
      },
    ],
  },
})[0];
if (codeRecord) {
  const token = informat.system.createToken(codeRecord.user.id, type); 
  automatic.setReturnValue({
    success: true,
    accountId: codeRecord.user.id,
    token: token,
  });
} else {
  automatic.setReturnValue({
    success: false,
    message: "Invalid token",
  });
}