'लिखें' विकल्प में ऑटोमैटिक भरने की सुविधा

बीटा वर्शन: यह दस्तावेज़, ऑटोमैटिक भरने की सुविधा वाले एपीआई के बीटा वर्शन के लिए है. कोई भी सुझाव, राय या शिकायत देने के लिए, हमारे समस्या ट्रैकर पर जाएं.

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

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

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

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

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

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

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

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

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

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

अपने आप भरें जाना सेट करें

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

पहली इमेज. सेटिंग पेज, जिसमें क्रेडेंशियल उपलब्ध कराने वाली कंपनी की जानकारी देने का तरीका बताया गया है.

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

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

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

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

एक से ज़्यादा तरह के ऑटोमैटिक भरने वाले फ़ील्ड जोड़ना

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

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

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

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

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

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

   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 को कॉल किया जाता है. अगर सबमिट करें बटन, नेविगेशन से लिंक है, तो कमिट करें को कॉल करने की ज़रूरत नहीं है. अगर आपको सेव करने के लिए, अब भी सबमिट करें पर क्लिक करना है, तो यहां कमिट करें जोड़ें.

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

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

'मज़बूत पासवर्ड सुझाएं' सुविधा की मदद से, अपने-आप भरने की सुविधा का इस्तेमाल करके डेटा सेव करना

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

चौथी इमेज. कीबोर्ड टूलबार में, मज़बूत पासवर्ड का सुझाव देने वाला चिप.

पांचवीं इमेज. उपयोगकर्ताओं को मज़बूत पासवर्ड इस्तेमाल करने के लिए कहने वाली बॉटम शीट.

समस्या का हल

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

छठी इमेज.बॉटम शीट, उपयोगकर्ताओं को पासवर्ड सेव करने के लिए कहती है.

अपने-आप जानकारी भरने की सुविधा को ज़्यादा पसंद के मुताबिक बनाना

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

हाइलाइट करने के लिए इस्तेमाल किए जाने वाले रंग को पसंद के मुताबिक बनाने के लिए, CompositionLocal का इस्तेमाल करें और अपनी पसंद का रंग डालें.

val customHighlightColor = Color.Red

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

ऑटोमैटिक भरने की सुविधा के हाइलाइट किए गए टेक्स्ट का डिफ़ॉल्ट रंग Color(0x4dffeb3b) है.