¶ Native JavaScript Login Component
The Authing login component (Guard) is an embeddable login form that can be configured according to your needs and is recommended for single-page applications. It allows you to easily add various social login methods so that your users can log in seamlessly and have a consistent login experience on different platforms. Guard shields many implementation details of low-level authentication for developers, as well as cumbersome UI development.
Guard can be integrated into your Native JavaScript project. You can use this component to quickly implement the login authentication process.
¶ Quick start
¶ Installation
$ yarn add @authing/native-js-ui-components
# OR
$ npm install @authing/native-js-ui-components --save
¶ Initialization
Initialize in the native JavaScript project:
import { authingGuard } from "@authing/native-js-ui-components";
// import css file
import "@authing/native-js-ui-components/lib/index.min.css";
const guard = new authingGuard("AUTHING_APP_ID");
// Event monitoring
guard.on("load", authClient => console.log(authClient));
How to initialize in an HTML file?
¶ Import by CDN
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components"></script>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet"></link>
¶ Initialize in Script code block
<script>
var guard = new authingNativeJsUIComponents.authingGuard("AUTHING_APP_ID");
// Event monitoring
guard.on("load", authClient => console.log(authClient));
</script>
¶ Monitor login events
You can monitor login events through guard.on("login", callback):
guard.on("login", user => {
console.log(user);
});
What should we do after understanding user information?
After obtaining the user information, you can get the user's identity credential (the token field ), which you can carry in subsequent requests sent by the client to the backend server token, for axios example :
const axios = require("axios");
axios
.get({
url: "https://yourdomain.com/api/v1/your/resources",
headers: {
Authorization: "Bearer ID_TOKEN"
}
})
.then(res => {
// custom codes
});
The legitimacy of this needs to be checked in the back-end interface to verify the user's identity. For details of the verification method, see Verifying User Identity Credentials (token) . After identifying the user's identity, you may also need to perform permission management on the user to determine whether the user has permission to operate this API.
¶ Add social login
Pass in the socialConnections list in the initialization parameter config to specify the social logins that need to be displayed(all social logins configured by the applicationare displayed by default).
<script>
var guard = new authingNativeJsUIComponents.authingGuard("AUTHING_APP_ID", {
socialConnections: ["github"]
});
</script>
View the list of supported social logins and access procedures
Authing currently supports 4 social logins around the world, such as GitHub, Apple, etc. The following is a complete list:
| Social Identity Provider | Scenes | Docs |
|---|---|---|
| WeChat QR Code on PC | Web | Documentation |
| WeChat Mobile | Mobile App | Documentation |
| WeChat Web Page | Wechat Browser | Documentation |
| Wechat Official Accounts QR Code | Web | Documentation |
| Mini Program | Mini Program | Documentation |
| Mini Program QR Code on PC | Web | Documentation |
| Pull-up Mini Program on App | Mobile App | Documentation |
| Web | Documentation | |
| Web | Documentation | |
| GitHub | Web | Documentation |
| Web | Documentation | |
| Web | Documentation | |
| Web | Documentation | |
| Apple (Web) | Web | Documentation |
| Apple (Mobile) | Mobile App | Documentation |
| Alipay | Mobile App | Documentation |
| Slack | Web | Documentation |
| Gitee | Web | Documentation |
| GitLab | Web | Documentation |
| Baidu | Web | Documentation |
| Web | Documentation | |
| NetEase YIDUN | Mobile App | Documentation |
| QingCloud | Web | Documentation |
| Web | Documentation |
¶ Implement single sign-on
To use Guard for single sign-on, you need to set isSSO to true during initialization.
<script>
var guard = new authingNativeJsUIComponents.authingGuard("AUTHING_APP_ID", {
isSSO: true
});
</script>
¶ Instance method
The Guard instance provides three methods:
| Method name | Method parameters | Function |
|---|---|---|
| on | evtName:Event name,Please check theevent list Handler:Corresponding event processing function | Monitor an event |
| show | - | Display the form in modal mode |
| hide | - | Hide the form in modal mode |
¶ Complete parameter
The Authing login component (Guard) provides many advanced configurations, such as customizing the UI and using specific login methods. See the complete parameter list.
¶ Event list
Event name | Event Introduction | Event parameter | Event parameter introduction |
|---|---|---|---|
load | Authing appId authenticate success，loading complete | authClient | AuthenticationClient object，can directly operate login， register，details in authing-js-sdk |
load-error | Authing appId authenticate failed，loading failed | error | Error information |
login | User login success | user, authClient | user: user information authClient same as before |
login-error | User login failed | error | Error information，including information such as missing/illegal fields or server errors |
register | User login success | user, authClient | user: user information authClient same as before |
register-error | User login failed | error | Error information，including information such as missing/illegal fields or server errors |
pwd-email-send | Forgot password email sending success | - | - |
pwd-email-send-error | Forgot password email sending failed | error | Error information |
pwd-phone-send | Forgot password mobile verification code sending success | - | - |
pwd-phone-send-error | Forgot password mobile verification code sending failed | error | Error information |
pwd-reset | Reset password success | - | - |
pwd-reset-error | Reset password failed | error | Error information |
close | guard close event in modal mode | - | - |
login-tab-change | Login tab switching event | activeTab | Tab after switching |
register-tab-change | Register tab switching event | activeTab | Tab after switching |
register-tab-change | Register tab switching event | activeTab | Tab after switching |
register-info-completed | Register Supplemental Success Event | user, udfs, authClient | user: user information udfs: Supplementary custom field information authClient same as before |
register-info-completed-error | Register Supplemental Failure Event | error, udfs, authClient | error: error information udfs: Supplementary custom field information authClient same as before |
¶ Privatization deployment
The privatization deploymentscenario needs to specify the GraphQL endpoint of your privatized Authing service(without protocol header and Path).If you are not sure, you can contact the Authing IDaaS service administrator.
<script>
var guard = new authingNativeJsUIComponents.authingGuard("AUTHING_APP_ID", {
apiHost: "https://core.you-authing-service.com"
});
</script>
¶ Online experience
¶ Get help
Join us on forum: #authing-chat (opens new window)