• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.userIAM.userAuthIcon (Embedded User Authentication Icons)
2
3<!--Kit: User Authentication Kit-->
4<!--Subsystem: UserIAM-->
5<!--Owner: @WALL_EYE-->
6<!--SE: @lichangting518-->
7<!--TSE: @jane_lz-->
8
9**userAuthIcon** provides user identity authentication icons used on the application UI. With **userAuthIcon**, you can:
10
111. Easily integrate the facial authentication and fingerprint authentication icons into your applications.
12
132. Customize the color and size of the icons. The icon style cannot be changed.
14
153. Start the facial or fingerprint authentication pop-up component once the icon is tapped.
16
17> **NOTE**
18> - The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
19
20## Modules to Import
21
22```ts
23import { userAuth, UserAuthIcon } from '@kit.UserAuthenticationKit';
24```
25
26## Child Components
27
28None.
29
30## Attributes
31
32The universal attributes are not supported.
33
34## UserAuthIcon
35
36UserAuthIcon({
37  authParam: userAuth.AuthParam,
38  widgetParam: userAuth.WidgetParam,
39  iconHeight?: Dimension,
40  iconColor?: ResourceColor,
41  onIconClick?: ()=>void,
42  onAuthResult: (result: userAuth.UserAuthResult)=>void
43})
44
45**Decorator**: @Component
46
47**Atomic service API**: This API can be used in atomic services since API version 12.
48
49**System capability**: SystemCapability.UserIAM.UserAuth.Core
50
51**Parameters**
52
53| Name          | Type                                                        | Mandatory| Description                                                        |
54| -------------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
55| authParam      | [AuthParam](js-apis-useriam-userauth.md#authparam10)        | Yes  | User authentication parameters.                                            |
56| widgetParam    | [WidgetParam](js-apis-useriam-userauth.md#widgetparam10)    | Yes  | Parameters on the user authentication page.                                     |
57| iconHeight     | [Dimension](../apis-arkui/arkui-ts/ts-types.md#dimension10) | No  | Height of the icon. The aspect ratio is 1:1. The default value is **64**.                            |
58| iconColor      | [ResourceColor](../apis-arkui/arkui-ts/ts-types.md#resourcecolor) | No  | Color of the icon. The default value is **$r('sys.color.ohos_id_color_activated')**.|
59| onIconClick    | ()=>void                                                      | No  | Callback to be invoked when the icon is tapped.                                        |
60| onAuthResult   | (result: [UserAuthResult](js-apis-useriam-userauth.md#userauthresult10))=>void| Yes  | Callback used to return the user authentication result.<br>**Required permissions**: ohos.permission.ACCESS_BIOMETRIC |
61
62## Events
63
64Universal events are not supported.
65
66## Example
67
68```ts
69import { cryptoFramework } from '@kit.CryptoArchitectureKit';
70import { userAuth, UserAuthIcon } from '@kit.UserAuthenticationKit';
71
72@Entry
73@Component
74struct Index {
75  rand = cryptoFramework.createRandom();
76  len: number = 16;
77  randData: Uint8Array = this.rand?.generateRandomSync(this.len)?.data;
78  authParam: userAuth.AuthParam = {
79    challenge: this.randData,
80    authType: [userAuth.UserAuthType.FACE, userAuth.UserAuthType.PIN],
81    authTrustLevel: userAuth.AuthTrustLevel.ATL3
82  };
83  widgetParam: userAuth.WidgetParam = {
84    title: 'Verify identity'
85  };
86
87  build() {
88    Row() {
89      Column() {
90        UserAuthIcon({
91          authParam: this.authParam,
92          widgetParam: this.widgetParam,
93          iconHeight: 200,
94          iconColor: Color.Blue,
95          onIconClick: () => {
96            console.info('The user clicked the icon.');
97          },
98          onAuthResult: (result: userAuth.UserAuthResult) => {
99            console.info(`Get user auth result, result = ${JSON.stringify(result)}`);
100          }
101        })
102      }
103    }
104  }
105}
106```
107
108An error may be thrown when **onAuthResult** is called. For details about the error codes, see [User Authentication Error Codes](errorcode-useriam.md).
109
110**Facial authentication icon**
111
112![Face Icon](figures/user_auth_icon_face.png)
113
114**Fingerprint authentication icon**
115
116![Fingerprint icon](figures/user_auth_icon_fingerprint.png)
117