1# @ohos.userIAM.userAuthIcon (Embedded User Authentication Icons)
2
3The system provides the facial authentication icon and fingerprint authentication icon to simplify the user authentication process.
4
5- The icons for facial authentication and fingerprint authentication can be easily integrated into your applications.
6
7- The color and size of the icons can be customized, but the icon style cannot be changed.
8
9- After you click the control icon, the face and fingerprint authentication controls are displayed in a pop-up window.
10
11> **NOTE**
12>
13> 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.
14
15
16## Modules to Import
17
18```ts
19import { userAuth, UserAuthIcon } from '@kit.UserAuthenticationKit';
20```
21
22
23## Child Components
24
25None.
26
27
28## Attributes
29
30The universal attributes are not supported.
31
32## UserAuthIcon
33
34UserAuthIcon({
35  authParam: userAuth.AuthParam,
36  widgetParam: userAuth.WidgetParam,
37  iconHeight?: Dimension,
38  iconColor?: ResourceColor,
39  onIconClick?: ()=>void,
40  onAuthResult: (result: userAuth.UserAuthResult)=>void
41})
42
43**Decorator**: @Component
44
45**Atomic service API**: This API can be used in atomic services since API version 12.
46
47**System capability**: SystemCapability.UserIAM.UserAuth.Core
48
49**Parameters**
50
51| Name          | Type                                                        | Mandatory| Description                                                        |
52| -------------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
53| authParam      | [AuthParam](js-apis-useriam-userauth.md#authparam10)        | Yes  | User authentication parameters.                                            |
54| widgetParam    | [WidgetParam](js-apis-useriam-userauth.md#widgetparam10)    | Yes  | Parameters on the user authentication page.                                     |
55| iconHeight     | [Dimension](../apis-arkui/arkui-ts/ts-types.md#dimension10) | No  | Height of the icon. <br/>The aspect ratio is 1:1. <br/>The default value is **64**.                  |
56| 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')**.|
57| onIconClick    | ()=>void                                                      | No  | Callback to be invoked when the icon is tapped.                                        |
58| 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 |
59
60
61## Events
62
63Universal events are not supported.
64
65## Example
66
67```ts
68import { userAuth, UserAuthIcon } from '@kit.UserAuthenticationKit';
69
70@Entry
71@Component
72struct Index {
73  authParam: userAuth.AuthParam = {
74    challenge: new Uint8Array([49, 49, 49, 49, 49, 49]),
75    authType: [userAuth.UserAuthType.FACE, userAuth.UserAuthType.PIN],
76    authTrustLevel: userAuth.AuthTrustLevel.ATL3
77  };
78  widgetParam: userAuth.WidgetParam = {
79    title: 'Verify identity'
80  };
81
82  build() {
83    Row() {
84      Column() {
85        UserAuthIcon({
86          authParam: this.authParam,
87          widgetParam: this.widgetParam,
88          iconHeight: 200,
89          iconColor: Color.Blue,
90          onIconClick: () => {
91            console.info('The user clicked the icon.');
92          },
93          onAuthResult: (result: userAuth.UserAuthResult) => {
94            console.info(`Get user auth result, result = ${JSON.stringify(result)}`);
95          }
96        })
97      }
98    }
99  }
100}
101```
102
103An error may be thrown when **onAuthResult** is called. For details about the error codes, see [User Authentication Error Codes](errorcode-useriam.md).
104
105**Facial authentication icon**
106
107![Face Icon](figures/user_auth_icon_face.png)
108
109**Fingerprint authentication icon**
110
111![Fingerprint icon](figures/user_auth_icon_fingerprint.png)
112