In recent years, the word agile development is very popular. From a technical point of view, to achieve agile development, there must be enough technology precipitation, maximize the reuse of existing components (such as back-end framework best practices template scaffolding, common tool functions, common front-end components, etc.), otherwise agile development will not be fast at all.

We are also working on a new project recently, from project design, prototype design to final launch in a week. As it happens, we are a cloud manufacturer providing identity authentication services, and the user system is a reusable general component that we have accumulated. User addition, deletion, change and check, account disabling, socialized login, login form and user login state maintenance are all packaged and highly configured. The user system for this new project will have to be your own.

In the end, it took one of our engineers two hours to integrate Authing into the project, and the project was successfully launched on time. Let’s share this case.

​

First of all, let’s take a look at the requirements of the user system of the project. What needs to be done if we start from scratch:

  1. Since we generally use the enterprise wechat for daily office work, and the company’s organizational structure and employee directory are stored in the enterprise wechat, we need to support the use of enterprise wechat login.
  2. There needs to be a front-end login form to support enterprise wechat login, as beautiful as possible.
  3. Interface permissions can be configured according to the wechat department of the enterprise. For example, only members of a specific department can view some data. In this case, the organizational tree of the enterprise wechat needs to be synchronized to its own database.
  4. Because the company is developing rapidly, there are often new employees, so it is best to be able to automatically synchronize the organization of the enterprise wechat, otherwise it is very troublesome to manually add accounts every time.
  5. You need to be able to audit user login behavior and know who is logging in to the application when and where.

Isn’t it a lot of trouble? It takes a lot of time to support an enterprise wechat login alone. It is very difficult to finish the above items, let alone a complete application in 7 days. Let’s take a look at how we accomplished all of the above requirements in two hours.

Decomposition of demand

Support enterprise wechat login

Authing has nearly 20 social login methods, which are supported by wechat, GitHub, Alipay and enterprise wechat. You can configure them as follows:

Authing also provides a social login SDK. You don’t even need to pop up an enterprise wechat window or listen for window message events. Just one line of code is enough:

Const authenticationClient = new authenticationClient ({appId: "YOUR_APP_ID", }) await authenticationClient.social.authorize("wechatwork:corp:qrconnect", { onSuccess: (user) => { console.log(user) }, onError: (code, message) => { }, })Copy the code

Front-end login form

Authing provides an embedable front-end login component that supports React, Vue and Angular front-end frameworks as well as native JS calls. The React component, for example, is accessed by several lines of code. You can get A ppI D on the Authing console’s app list page.

import React, { useState } from 'react'
import { AuthingGuard, LoginMethods } from '@authing/react-ui-components'
import '@authing/react-ui-components/lib/index.min.css'

export default function App() {
  const [user, setUser] = useState(null)
        return (
                <div className="App">
                        <AuthingGuard 
                                appId="APP_ID" 
                                onLogin={(user) => setUser(user)}
                  config={{
                            disableRegister: true,
                  }}
                        />
                </div>
        );
}

Copy the code

Look at the effect, the interface is still very beautiful, a few minutes, a login form is completed.

Import enterprise wechat organization

Authing organization is also supported. At present, Authing supports importing organization from enterprise wechat, Dingpin, Active Directory and other identity sources. After configuration according to the document, the organization will be synchronized in a few minutes. At the same time, the changes of departments and personnel on the wechat of the enterprise will also be synchronized to the organization of Authing!

​

With the help of the organizational SDK, it is also easy to complete the function of judging permissions according to the department of the user.

Audit user login logs

This is also a built-in feature of Authing to see who has logged in to the app where:

Back-end user authentication

Authing uses JSON Web tokens to represent user credentials. You can use jwt.verify on the back end to verify the Token and obtain user information.

import jwt from 'jsonwebtoken'; const auth = async (req, res) => { const token = req.headers['authorization'] try { const user = jwt.verify(token, "YOUR_APP_SECRET"); Req.user = user next()} catch (error) {return res.json({code: 403, message: "please login first"})}}Copy the code

Since the token is verified directly using the JWT key, there is no network request and it is very fast.

conclusion

Basically, each of these processes took a few minutes to connect. With Authing’s strong component reuse capability, we were able to complete the launch of MVP product in the shortest possible time. As a developer, agile is not just a slogan, it is not just a methodology, the key is to have technology and good enough wheels to reuse.