Use embeded login component to authenticate

Update Time: 2022-05-14 10:21:54

The embedded login component (Guard) is considered to be the best balance between flexibility and integration.If the integration requires a deeper level of customization or the hosting mode cannot be used in some scenarios where the front end and back end are separated, it is recommended to use this mode.The embedded login component is built and updated by Authing, using the best practice security design in industry. Only a few lines of JavaScript code is needed and then it can be integrated into your development project.

You can click here to understand the difference between the Authing hosted login page (Hosted) and the embedded login component (Embedded).

The following functions are integrated in the Authing embedded login component:

Login: including account password login (including mobile phone number + password, email + password, username + password) and SMS code login.
Registration: including mobile phone SMS code registration, and username and password registration.
Social login, such as GitHub login (need to be configured in the background first).
APP QR code login (need to access APP scan code login first).
Mini Program QR code login (need to be configured in the background).
Enterprise identity source login (need to configure enterprise identity source).
Forget password and reset password.
MFA validation.

It has the following features:

Lightweight: All resources are packaged in only a few hundred KB.
Responsive: compatible with mobile and PC web pages.
Customization: It can support a complete UI customization function.

¶ Integrate with different front-end frameworks

Framework

¶ Install

It is recommended to use create-react-app to initialize a React project

npx create-react-app first-authing-app --template typescript

And then, install @authing/react-ui-components SDK:

yarn add @authing/react-ui-components

Or:

npm install @authing/react-ui-components --save

¶ Initialize

You need to import AuthingGuard from @authing/react-ui-components. Initializing AuthingGuard requires only one parameter-your application ID (appId). You can get the appId of the application on the application list page of the console.

import { AuthingGuard } from "@authing/react-ui-components";
import "@authing/react-ui-components/lib/index.min.css";

function App() {
  return (
    <div className="App">
      <AuthingGuard appId="authing_APP_ID" />
    </div>
  );
}

Authing Guard will automatically pull the configuration of the application, such as name, logo, etc., from the server.Refresh the page and an embedded login form is displayed:

Next, let's monitor user login events, and obtain user information after the user logs in successfully.

It is simple. You only need to pass a callback onLogin.

function App() {
  return (
    <div className="App">
      <AuthingGuard
        appId="authing_APP_ID"
        onLogin={userinfo => {
          console.log(userinfo);
        }}
      />
    </div>
  );
}

Here we can use console.log to show user information:

The token field in user information is the identity credential. In the following steps, you need to carry it in requests when you want to access back-end resources. The back end will verify this token.

¶ Validate user token in back-end

The token field of the user information is a standard OIDC IdToken. You can use the application ID and Secret to verify this token on the backend.

An example of token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJiaXJ0aGRhdGUiOiIiLCJmYW1pbHlfbmFtZSI6IiIsImdlbmRlciI6IiIsImdpdmVuX25hbWUiOiIiLCJsb2NhbGUiOiIiLCJtaWRkbGVfbmFtZSI6IiIsIm5hbWUiOiIiLCJuaWNrbmFtZSI6IiIsInBpY3R1cmUiOiJodHRwczovL3VzZXJjb250ZW50cy5hdXRoaW5nLmNuL2F1dGhpbmctYXZhdGFyLnBuZyIsInByZWZlcnJlZF91c2VybmFtZSI6InRlc3RAZXhhbXBsZS5jb20iLCJwcm9maWxlIjoiIiwidXBkYXRlZF9hdCI6IjIwMjEtMDEtMThUMDc6NDg6NTUuNzgxWiIsIndlYnNpdGUiOiIiLCJ6b25laW5mbyI6IiIsImFkZHJlc3MiOnsiY291bnRyeSI6IiIsInBvc3RhbF9jb2RlIjoiIiwicmVnaW9uIjoiIiwiZm9ybWF0dGVkIjoiIn0sInBob25lX251bWJlciI6bnVsbCwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJkYXRhIjp7InR5cGUiOiJ1c2VyIiwidXNlclBvb2xJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImFwcElkIjoiNjAwNTNiNzQxNjQ3OGRlMmU4OGZhYjQzIiwiaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJ1c2VySWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJfaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJwaG9uZSI6bnVsbCwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidXNlcm5hbWUiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidW5pb25pZCI6bnVsbCwib3BlbmlkIjpudWxsLCJjbGllbnRJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyJ9LCJ1c2VycG9vbF9pZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImF1ZCI6IjYwMDUzYjc0MTY0NzhkZTJlODhmYWI0MyIsImV4cCI6MTYxMjE2NTg4OCwiaWF0IjoxNjEwOTU2Mjg4LCJpc3MiOiJodHRwczovL3NhbXBsZS1hcHAuYXV0aGluZy5jbi9vaWRjIn0.SNyGBffF-zBqDQFINGxUJZrWSAADHQhbEOsKvnH4SLg

You can decode the IdToken in this website (opens new window):

The sub field is the ID of the user, and the aud field is the ID of the application. You can learn the detailed definition of each field of OIDC IdToken through this article (opens new window).

Basically all languages provide libraries for validating IdToken. Take Node.js as an example, you can use JSON Web Token (opens new window) to verify IdToken.

const jwt = require("jsonwebtoken");

try {
  const data = jwt.verify("YOUR_ID_TOKEN", "YOUR_APP_SECRET");
} catch (error) {
  // token might be invalid or expired
  console.error(error);
}

If the validation is successful, you can get the unique ID of the user through the sub field, and then you can combine the user ID with your own business logic code. If you need to assign different roles and privileges to different users, you can learn how to assign roles and privileges to users for fine-grained permission control.

¶ Detailed parameter and event list

The Authing embedded login component is highly customizable. The Authing embedded login component supports highly customizable.In addition to customizing the basic configuration such as the title and Logo, you can also control the visibility of the login method, fully customize the style through custom CSS, and so on. In addition to successful login events, the Authing embedded login component also encapsulates events such as successful registration, login failure, and login registration mode switching. For detailed documentation, please refer to the Guard document.

Prev: Use the hosted login page to complete the authentication Next: Use API & SDK to complete authentication

¶ Use embeded login component to authenticate

¶ Embedded login component introduction

¶ Integrate with different front-end frameworks

¶ Validate user token in back-end

¶ Detailed parameter and event list