Compose में ऑटोमैटिक जानकारी भरने की सुविधा

पासवर्ड मैनेजर जैसे कुछ ऐप्लिकेशन, उपयोगकर्ता की ओर से दिए गए डेटा की मदद से, दूसरे ऐप्लिकेशन में मौजूद कॉम्पोनेंट को भर सकते हैं. दूसरे ऐप्लिकेशन के कॉम्पोनेंट को भरने वाले ऐप्लिकेशन को, ऑटोमैटिक भरने की सुविधा वाली सेवाएं कहा जाता है. ऑटोमैटिक भरने की सुविधा का फ़्रेमवर्क, किसी ऐप्लिकेशन और ऑटोमैटिक भरने की सुविधा वाली सेवा के बीच होने वाले कम्यूनिकेशन को मैनेज करता है.

क्रेडेंशियल और फ़ॉर्म भरना, समय लेने वाला और गड़बड़ी होने की संभावना वाला काम है. ऑटोमैटिक भरने की सुविधा से, उपयोगकर्ताओं को फ़ील्ड भरने में लगने वाला समय बचाने में मदद मिलती है. साथ ही, उपयोगकर्ता की ओर से इनपुट की जाने वाली गड़बड़ियों को कम किया जा सकता है.

Compose में, ऑटोमैटिक भरने की सुविधा को कोड की कुछ ही लाइनों की मदद से लागू किया जा सकता है. इस सुविधा से, उपयोगकर्ताओं को ये फ़ायदे मिलते हैं:

क्रेडेंशियल भरना

ऑटोमैटिक भरने की सुविधा की मदद से, उपयोगकर्ता इन तरीकों से अपने क्रेडेंशियल भर सकते हैं:

• जब उपयोगकर्ता किसी ऐसे फ़ील्ड में टैप करता है जिसके लिए, ऑटोमैटिक भरने की सुविधा की सिमैंटिक्स सेट की गई हैं, तो सिस्टम, ऑटोमैटिक भरने की सुविधा के सुझाव दिखाता है.
• सिस्टम, उपयोगकर्ता के लिए ऑटोमैटिक भरने की सुविधा के सुझाव दिखाता है. साथ ही, उपयोगकर्ता के टाइप किए गए टेक्स्ट के आधार पर उन्हें फ़िल्टर करता है.

क्रेडेंशियल सेव करना

उपयोगकर्ता, ऑटोमैटिक भरने की सुविधा की मदद से इन तरीकों से क्रेडेंशियल सेव कर सकते हैं:

• जब उपयोगकर्ता, ऑटोमैटिक भरने की सुविधा वाले किसी फ़ील्ड में नई या अपडेट की गई जानकारी डालता है, तो सिस्टम, सेव करने का डायलॉग ट्रिगर करता है. इसमें उपयोगकर्ता से जानकारी सेव करने के लिए कहा जाता है. सेव करने की सुविधा दो तरीकों से काम करती है:
  • साफ़ तौर पर, जानकारी सबमिट करके (उदाहरण के लिए, बटन पर क्लिक करके)
  • अपने-आप, जब कोई उपयोगकर्ता पेज से बाहर निकलता है
• क्रेडेंशियल देने वाली कंपनी के आधार पर, जब किसी फ़ील्ड के लिए ContentType.NewPassword सेट किया जाता है, तो सिस्टम, उपयोगकर्ता को मज़बूत पासवर्ड का सुझाव दे सकता है.

अपने ऐप्लिकेशन में, ऑटोमैटिक भरने की सुविधा का इस्तेमाल करके, उपयोगकर्ताओं के लिए सेव किए गए डेटा को आसानी से वापस पाया जा सकता है. ऑटोमैटिक भरने की सुविधा, टेक्स्ट कॉम्पोनेंट के साथ काम करती है. इसमें BasicTextField और उस कॉम्पोनेंट पर बने सभी मटीरियल टेक्स्ट फ़ील्ड शामिल हैं.

ऑटोमैटिक भरने की सुविधा सेट अप करना

अपने डिवाइस या एम्युलेटर पर, ऑटोमैटिक भरने की सुविधा के एपीआई इस्तेमाल करने से पहले, आपको सेटिंग में जाकर, ऑटोमैटिक भरने की सुविधा चालू करनी होगी. यहां, ऑटोमैटिक भरने की सुविधा के लिए, क्रेडेंशियल देने वाली कंपनी तय की जा सकती है, ताकि आपके क्रेडेंशियल सेव किए जा सकें.

कॉन्टेंट टाइप का इस्तेमाल करके, अपने टेक्स्ट फ़ील्ड में ऑटोमैटिक भरने की सुविधा जोड़ना

TextField में ऑटोमैटिक भरने की सुविधा चालू है, यह बताने के लिए, ContentType सिमैंटिक्स को उन टाइप के साथ सेट करें जिन्हें फ़ील्ड स्वीकार कर सकता है. इससे, ऑटोमैटिक भरने की सुविधा वाली सेवाओं को यह पता चलता है कि इस खास फ़ील्ड के लिए, किस तरह का उपयोगकर्ता डेटा काम का हो सकता है. TextField को सेट करने के लिए, ContentType.Username का इस्तेमाल करें. इससे उपयोगकर्ता, अपने उपयोगकर्ता नाम से फ़ील्ड भर सकते हैं.

ContentType सिमैंटिक्स सेट करके, आपके उपयोगकर्ता, अपने डिवाइस के क्रेडेंशियल देने वाली कंपनी में पहले से सेव की गई ऑटोमैटिक भरने की सुविधा वाली जानकारी को ऐक्सेस कर सकते हैं. उदाहरण के लिए, अगर किसी उपयोगकर्ता ने अपने लैपटॉप पर Chrome ब्राउज़र के ज़रिए आपके ऐप्लिकेशन में पहले ही साइन इन किया है और क्रेडेंशियल देने वाली कंपनी की मदद से अपना पासवर्ड सेव किया है, तो ऑटोमैटिक भरने की सुविधा की मदद से, उसके क्रेडेंशियल उसे दिखाए जाते हैं.

वैल्यू के आधार पर टेक्स्ट फ़ील्ड

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

स्टेट के आधार पर टेक्स्ट फ़ील्ड

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

ऑटोमैटिक भरने की सुविधा वाले फ़ील्ड में एक से ज़्यादा टाइप जोड़ना

कुछ मामलों में, हो सकता है कि आपको अपने TextField के लिए एक से ज़्यादा ContentType सेट करने की ज़रूरत पड़े. उदाहरण के लिए, लॉगिन फ़ील्ड में ईमेल पता या उपयोगकर्ता नाम डाला जा सकता है. + ऑपरेटर का इस्तेमाल करके, अपने TextField में एक से ज़्यादा कॉन्टेंट टाइप जोड़े जा सकते हैं.

ऑटोमैटिक भरने की सुविधा की मदद से सेव किए जा सकने वाले सभी तरह के डेटा के बारे में जानने के लिए, ContentType रेफ़रंस देखें.

वैल्यू के आधार पर टेक्स्ट फ़ील्ड

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

स्टेट के आधार पर टेक्स्ट फ़ील्ड

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

ऑटोमैटिक भरने की सुविधा की मदद से डेटा भरना

TextField में ContentType जोड़ने पर, उपयोगकर्ताओं को क्रेडेंशियल भरने के लिए कुछ और करने की ज़रूरत नहीं होगी.

जब कोई उपयोगकर्ता, ऑटोमैटिक भरने की सुविधा वाले किसी फ़ील्ड पर क्लिक करता है और अगर उससे जुड़ा डेटा सेव है, तो उसे कीबोर्ड के ऊपर मौजूद टूलबार में एक चिप दिखती है. इसमें, क्रेडेंशियल भरने के लिए कहा जाता है.

नेविगेशन के ज़रिए, ऑटोमैटिक भरने की सुविधा की मदद से डेटा सेव करना

Compose, अपने-आप यह पता लगाने की कोशिश करता है कि कोई उपयोगकर्ता किसी पेज से कब नेविगेट करता है और डाले गए क्रेडेंशियल कब सबमिट करता है. जब कोई फ़ील्ड, ऑटोमैटिक भरने की सुविधा वाला होता है, तो उपयोगकर्ता के पेज से बाहर निकलने पर, क्रेडेंशियल की जानकारी अपने-आप सेव हो जाती है. इसके लिए, किसी अतिरिक्त कोड की ज़रूरत नहीं होती.

ऑटोमैटिक भरने की सुविधा की मदद से, साफ़ तौर पर डेटा सेव करना

ऑटोमैटिक भरने की सुविधा वाले टेक्स्ट फ़ील्ड की मदद से, नए क्रेडेंशियल साफ़ तौर पर सेव करने के लिए, ऑटोमैटिक भरने की सुविधा के मैनेजर को, ऑटोमैटिक भरने की सुविधा का कॉन्टेक्स्ट सबमिट (या रद्द) करना चाहिए. इसके बाद, स्थानीय ऑटोमैटिक भरने की सुविधा का मैनेजर, ज़रूरत पड़ने पर ऑटोमैटिक भरने की सुविधा के फ़्रेमवर्क से कम्यूनिकेट करता है. अगर आपको उपयोगकर्ता की ओर से डाले गए क्रेडेंशियल हटाने हैं, तो AutofillManager.cancel को कॉल करें. इससे, सेव किए बिना, पेंडिंग डेटा मिट जाएगा.

यहां दिए गए स्निपेट में, बटन का इस्तेमाल करके, ऑटोमैटिक भरने की सुविधा की मदद से, साफ़ तौर पर डेटा सेव करने का तरीका बताया गया है:

1. ऑटोमैटिक भरने की सुविधा के मैनेजर को सेव करने के लिए, एक स्थानीय वैरिएबल बनाएं. इसे इस तरह वापस पाया जा सकता है:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. अपने TextField(s) में, 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

   • स्टेट के आधार पर टेक्स्ट फ़ील्ड के साथ:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

3. बटन पर क्लिक करके, ज़रूरत के हिसाब से ऑटोमैटिक भरने की सुविधा का कॉन्टेक्स्ट सबमिट करें:

   • वैल्यू के आधार पर टेक्स्ट फ़ील्ड के साथ:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = usernameTextFieldValue.value,
             onValueChange = { usernameTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = passwordTextFieldValue.value,
             onValueChange = { passwordTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • स्टेट के आधार पर टेक्स्ट फ़ील्ड के साथ:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

जब भी कोई उपयोगकर्ता स्क्रीन से बाहर निकलता है, तब सबमिट करें को कॉल किया जाता है. अगर सबमिट करें बटन, नेविगेशन से लिंक है, तो सबमिट करें को कॉल करने की ज़रूरत नहीं है. अगर आपको अब भी सबमिट करें पर क्लिक करने पर, सेव करने का डायलॉग ट्रिगर करना है, तो यहां सबमिट करें जोड़ें.

जब उपयोगकर्ता बटन पर क्लिक करेगा, तो उसे यह बॉटम शीट दिखेगी. इसमें, चुने गए क्रेडेंशियल देने वाली कंपनी में क्रेडेंशियल सेव करने के लिए कहा जाएगा:

मज़बूत पासवर्ड का सुझाव देने की सुविधा के ज़रिए, ऑटोमैटिक भरने की सुविधा की मदद से डेटा सेव करना

क्रेडेंशियल देने वाली कंपनी के आधार पर, जब NewUsername और NewPassword कॉन्टेंट टाइप का इस्तेमाल किया जाता है, तो उपयोगकर्ताओं को कीबोर्ड में मज़बूत पासवर्ड का सुझाव पाएं बटन दिख सकता है. इस पर क्लिक करने पर, एक बॉटम शीट दिखती है. इसकी मदद से, उपयोगकर्ता अपने क्रेडेंशियल सेव कर सकते हैं. उपयोगकर्ताओं को यह अनुभव देने के लिए, आपको कुछ और लागू करने की ज़रूरत नहीं है.

समस्या का हल

"सेव करने" की सुविधा का इस्तेमाल करते समय, अगर आपने "अभी नहीं" पर एक से ज़्यादा बार क्लिक किया है, तो हो सकता है कि क्रेडेंशियल देने वाली कंपनी, बॉटम शीट न दिखाए. इसे फिर से चालू करने और एक बार फिर से दिखाने के लिए, आपको वे खास ऐप्लिकेशन हटाने होंगे जिन्होंने "यह पासवर्ड याद रखें?" को ब्लॉक किया है.

ऑटोमैटिक भरने की सुविधा को और कस्टमाइज़ करना

ऑटोमैटिक भरने की सुविधा के सामान्य तरीके में, जब ऑटोमैटिक भरने की सुविधा वाले किसी कॉम्पोनेंट में क्रेडेंशियल भर दिए जाते हैं, तो उसका रंग बदल जाता है और वह हाइलाइट हो जाता है. इससे उपयोगकर्ता को यह पता चलता है कि ऑटोमैटिक भरने की सुविधा का इस्तेमाल करके, क्रेडेंशियल भर दिए गए हैं.

हाइलाइट होने वाले इस रंग को कस्टमाइज़ करने के लिए, CompositionLocal का इस्तेमाल करें और अपनी पसंद का कोई भी रंग चुनें. ऑटोमैटिक भरने की सुविधा के लिए, डिफ़ॉल्ट रूप से हाइलाइट होने वाला रंग Color(0x4dffeb3b) के तौर पर तय किया गया है.

वैल्यू के आधार पर टेक्स्ट फ़ील्ड

val customHighlightColor = Color.Red

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

स्टेट के आधार पर टेक्स्ट फ़ील्ड

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt