Просмотр кода страницы Маскировка взаимодействия пользователя с мобильными интерфейсами

= Маскировка взаимодействия пользователя с мобильными интерфейсами =

'''Ранний доступ'''

Взаимодействия пользователя фиксируют имена элементов пользовательского интерфейса, таких как метки кнопок или названия полей ввода. Если эти имена содержат или раскрывают личную информацию, можно скрыть отдельные представления, чтобы имена их элементов пользовательского интерфейса были заменены на <code>***</code> в зафиксированных взаимодействиях.

В ваши обязанности входит выявление того, какие представления и компоненты вашего приложения могут раскрывать персональные данные, и соответствующее маскирование.

== Маскирование отображения в нативных приложениях Android ==

Установите тег <code>data-dt-mask</code> для представления.

'''Kotlin'''
<pre>
myView.tag = "data-dt-mask"
</pre>

'''Java'''
<pre>
myView.setTag("data-dt-mask");
</pre>

В результате взаимодействия имя представления будет заменено на <code>***</code>.

== Маскируемые элементы в Android Jetpack Compose ==

Примените модификатор <code>dtMask()</code> к составному элементу.

<pre>
Button(
    onClick = { /* ... */ },
    modifier = Modifier.dtMask()
) {
    Text("Оплатить сейчас")
}
</pre>

В результате взаимодействия имя составного элемента будет заменено на <code>***</code>.

== Маскирование отображения нативных элементов iOS ==

Установите для параметра <code>accessibilityIdentifier</code> вида значение <code>data-dt-mask</code>.

'''Swift'''
<pre>
myView.accessibilityIdentifier = "data-dt-mask"
</pre>

'''Objective-C'''
<pre>
myView.accessibilityIdentifier = @"data-dt-mask";
</pre>

В результате взаимодействия имя представления будет заменено на <code>***</code>.

== Маскирование представлений в iOS SwiftUI ==

Используйте модификатор <code>.astromkeyMasked()</code> или установите значение <code>accessibilityIdentifier</code> на <code>data-dt-mask</code>.

=== Модификатор ===

<pre>
Button("Оплатить сейчас") {
    // ...
}
.astromkeyMasked()
</pre>

=== Доступность ID ===

<pre>
Button("Оплатить сейчас") {
    // ...
}
.accessibilityIdentifier("data-dt-mask")
</pre>

В результате взаимодействия имя представления будет заменено на <code>***</code>.

== Взаимодействие с масками в React Native ==

'''React Native''' поддерживает два подхода к маскированию: маскирование на основе маркеров с использованием свойства <code>dtMask</code> и маскирование на основе правил через конфигурацию.

=== Используйте маскирование на основе маркеров ===

Чтобы скрыть компонент и все его дочерние элементы, добавьте свойство <code>dtMask</code> к любому родительскому представлению.

<pre>
<View dtMask>
  <Pressable onPress={onPress}>
    <Text>john.doe@example.com</Text>
  </Pressable>
</View>
</pre>

Любое взаимодействие, разрешаемое через поддерево с предком <code>dtMask</code>, маскируется. Взаимодействие по-прежнему фиксируется, но имя элемента пользовательского интерфейса заменяется на <code>***</code>.

=== Используйте маскирование на основе правил ===

Чтобы скрывать взаимодействия на основе шаблонов <code>testID</code> или длины текстового содержимого, настройте правила маскирования в конфигурации Ключ-АСТРОМ.

<pre>
const config = {
  mask: {
    replaceWith: '***',
    testID: (id: string) => /email|phone/i.test(id),
    text: (text: string) => text.length > 20,
  },
};
</pre>

При такой конфигурации:

* Элементы, <code>testID</code> соответствующие заданной функции, маскируются.
* Элементы, обнаруженное текстовое содержимое которых соответствует заданной функции, маскируются.

Оба подхода заменяют конфиденциальную метку значением <code>replaceWith</code> (по умолчанию: <code>***</code>), сохраняя при этом идентификатор взаимодействия и путь к элементу.

== Маскирующие виджеты во Flutter ==

Оберните виджет в <code>UserInteractionWidget</code> и установите <code>masked</code> значение <code>true</code>.

<pre>
UserInteractionWidget(
  masked: true,
  child: TextField(
    decoration: InputDecoration(labelText: 'Password'),
  ),
)
</pre>

В результате взаимодействия имя виджета будет заменено на <code>***</code>.