Tự động điền trong Compose

Một số ứng dụng, chẳng hạn như trình quản lý mật khẩu, có thể điền dữ liệu mà người dùng cung cấp vào các thành phần trong ứng dụng khác. Những ứng dụng điền vào thành phần của các ứng dụng khác được gọi là dịch vụ tự động điền. Khung tự động điền quản lý quá trình giao tiếp giữa ứng dụng và dịch vụ tự động điền.

Việc điền thông tin đăng nhập và biểu mẫu rất tốn thời gian và dễ xảy ra lỗi. Tính năng tự động điền giúp người dùng tiết kiệm thời gian điền vào các trường và giảm thiểu lỗi do người dùng nhập.

Chỉ với một vài dòng mã, bạn có thể triển khai tính năng Tự động điền trong Compose. Tính năng này mang lại cho người dùng các lợi ích sau:

Điền thông tin xác thực

Tính năng tự động điền cho phép người dùng điền thông tin xác thực theo các cách sau:

  • Hệ thống sẽ hiển thị các đề xuất Tự động điền cho người dùng khi họ nhấn vào một trường đã đặt ngữ nghĩa Tự động điền.
  • Hệ thống sẽ hiển thị các đề xuất Tự động điền cho người dùng và lọc các đề xuất đó dựa trên nội dung mà người dùng nhập.

Lưu thông tin đăng nhập

Người dùng có thể lưu thông tin xác thực thông qua tính năng Tự động điền theo các cách sau:

  • Hệ thống sẽ kích hoạt hộp thoại lưu, nhắc người dùng lưu thông tin khi họ nhập thông tin mới hoặc cập nhật vào trường có bật tính năng Tự động điền. Bạn có thể lưu theo hai cách:
    • Rõ ràng, bằng cách xác nhận thông tin (ví dụ: thông qua một lượt nhấp vào nút)
    • Ngầm ẩn, khi người dùng rời khỏi trang
  • Tuỳ thuộc vào nhà cung cấp thông tin xác thực, hệ thống có thể đề xuất mật khẩu mạnh cho người dùng khi một trường được đặt ContentType.NewPassword.

Bạn có thể sử dụng tính năng Tự động điền trong ứng dụng để đơn giản hoá việc truy xuất dữ liệu đã lưu cho người dùng. Tính năng tự động điền hỗ trợ các thành phần văn bản thông qua BasicTextField và tất cả các trường văn bản Material được xây dựng dựa trên thành phần đó.

Thiết lập Tự động điền

Trước khi sử dụng API Tự động điền trên thiết bị hoặc trình mô phỏng, bạn phải kích hoạt tính năng Tự động điền trong phần Cài đặt. Tại đó, bạn có thể chỉ định một trình cung cấp thông tin xác thực để tính năng Tự động điền lưu trữ thông tin xác thực của bạn.

Trang cài đặt cho biết cách chỉ định trình cung cấp thông tin xác thực.
Hình 1. Trang cài đặt cho biết cách chỉ định trình cung cấp thông tin xác thực.

Thêm tính năng Tự động điền vào trường văn bản bằng loại nội dung

Để cho biết rằng TextField đã bật tính năng Tự động điền, hãy đặt ngữ nghĩa ContentType bằng các loại mà trường có thể chấp nhận. Điều này cho các dịch vụ Tự động điền biết loại dữ liệu người dùng có thể liên quan đến trường cụ thể này. Sử dụng ContentType.Username để đặt TextField mà người dùng có thể điền tên người dùng của họ vào.

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Bằng cách đặt ngữ nghĩa ContentType, người dùng có thể truy cập vào thông tin tự động điền đã lưu trong trình cung cấp thông tin xác thực của thiết bị. Ví dụ: nếu người dùng đã đăng nhập vào ứng dụng của bạn thông qua trình duyệt Chrome trên máy tính xách tay và lưu mật khẩu thông qua một nhà cung cấp thông tin xác thực, thì thông tin xác thực của họ sẽ được phân phát cho họ thông qua tính năng Tự động điền.

Thêm trường Tự động điền có nhiều loại

Trong một số trường hợp, bạn có thể muốn TextField xử lý nhiều ContentType. Ví dụ: trường đăng nhập có thể chấp nhận địa chỉ email hoặc tên người dùng. Bạn có thể thêm nhiều loại nội dung vào TextField bằng toán tử +. 

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Để biết tất cả các loại dữ liệu có thể lưu bằng tính năng Tự động điền, hãy xem tài liệu tham khảo về ContentType.

Điền dữ liệu bằng tính năng Tự động điền

Khi thêm ContentType vào TextField, bạn sẽ không cần làm gì khác để người dùng có thể điền thông tin xác thực.

Khi người dùng nhấp vào một trường có bật tính năng Tự động điền, nếu có dữ liệu liên quan được lưu trữ, họ sẽ thấy một khối trong thanh công cụ phía trên bàn phím nhắc họ điền thông tin xác thực.

Các khối trong thanh công cụ văn bản cho thấy thông tin xác thực đã lưu.
Hình 2. Các khối trong thanh công cụ văn bản cho thấy thông tin xác thực đã lưu.

Lưu dữ liệu bằng tính năng Tự động điền thông qua tính năng chỉ đường

Compose tự động cố gắng xác định thời điểm người dùng di chuyển từ một trang và xác nhận thông tin xác thực đã nhập. Sau khi bạn bật tính năng Tự động điền cho một trường, trường đó sẽ tự động lưu thông tin xác thực khi người dùng rời khỏi trang mà không cần thêm mã nào.

Lưu dữ liệu một cách rõ ràng bằng tính năng Tự động điền

Để lưu rõ ràng thông tin xác thực mới thông qua các trường văn bản bằng tính năng Tự động điền, trình quản lý Tự động điền phải xác nhận (hoặc huỷ) ngữ cảnh Tự động điền. Sau đó, trình quản lý Tự động điền cục bộ sẽ giao tiếp với khung Tự động điền bất cứ khi nào cần. Nếu bạn muốn xoá thông tin xác thực mà người dùng đã nhập, hãy gọi AutofillManager.cancel để xoá mọi dữ liệu đang chờ xử lý mà không lưu dữ liệu đó.

Các đoạn mã sau đây cho biết cách lưu dữ liệu bằng tính năng Tự động điền một cách rõ ràng bằng cách sử dụng nút:

  1. Tạo một biến cục bộ để lưu trữ trình quản lý Tự động điền. Bạn có thể truy xuất trình quản lý này theo cách sau: 

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

  2. Trong TextField(s), hãy thêm loại nội dung bạn muốn thông qua Modifier.semantics: 

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}
    AutofillSnippets.kt

  3. Cam kết ngữ cảnh Tự động điền nếu cần thông qua một lượt nhấp vào nút: 

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}
    AutofillSnippets.kt

Commit (Gửi) được gọi mỗi khi người dùng rời khỏi màn hình. Nếu nút Submit (Gửi) được liên kết với thao tác điều hướng, thì bạn không cần gọi Commit (Ghi). Nếu bạn vẫn muốn nhấp vào Submit (Gửi) để kích hoạt hộp thoại lưu, hãy thêm Commit (Ghi đè) vào đây.

Khi người dùng nhấp vào nút này, họ sẽ thấy trang dưới cùng này nhắc họ lưu thông tin xác thực vào trình cung cấp thông tin xác thực đã chọn:

Bảng dưới cùng nhắc người dùng lưu mật khẩu.
Hình 3. Bảng dưới cùng nhắc người dùng lưu mật khẩu.

Lưu dữ liệu bằng tính năng Tự động điền thông qua tính năng đề xuất mật khẩu mạnh

Tuỳ thuộc vào nhà cung cấp thông tin xác thực, khi bạn đang sử dụng loại nội dung NewUsername và NewPassword, người dùng có thể thấy một nút trên bàn phím để Đề xuất mật khẩu mạnh. Khi họ nhấp vào nút này, một trang dưới cùng sẽ xuất hiện, cho phép họ lưu thông tin xác thực. Bạn không cần triển khai thêm bất kỳ tính năng nào khác để người dùng có được trải nghiệm này.

Khối đề xuất mật khẩu mạnh trong thanh công cụ bàn phím.
Hình 4. Khối đề xuất mật khẩu mạnh trong thanh công cụ bàn phím.
Bảng dưới cùng nhắc người dùng sử dụng mật khẩu mạnh.
Hình 5. Bảng dưới cùng nhắc người dùng sử dụng mật khẩu mạnh.

Khắc phục sự cố

Khi gọi hành trình "lưu" của người dùng, nếu bạn nhấp vào "Không phải bây giờ" nhiều lần, thì nhà cung cấp thông tin xác thực có thể không hiển thị trang dưới cùng nữa. Để bật lại và hiển thị lại hộp thoại này, bạn cần xoá các ứng dụng cụ thể đã chặn hộp thoại "Bạn có muốn nhớ mật khẩu này không?".

Bảng dưới cùng nhắc người dùng lưu mật khẩu.
Hình 6.Bảng dưới cùng nhắc người dùng lưu mật khẩu.

Tuỳ chỉnh thêm tính năng Tự động điền

Trong hành trình điển hình của người dùng sử dụng tính năng Tự động điền, khi một thành phần hỗ trợ tính năng Tự động điền được điền thông tin xác thực, thành phần đó sẽ thay đổi màu và được làm nổi bật để báo hiệu cho người dùng rằng tính năng Tự động điền đã hoàn tất.

Để tuỳ chỉnh màu đánh dấu này, hãy sử dụng CompositionLocal và cung cấp màu bất kỳ mà bạn muốn. 

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

Màu làm nổi bật tính năng Tự động điền mặc định được xác định là Color(0x4dffeb3b).