כלי לבחירת אנשי קשר לאינטרנט

Contact Picker API מספק למשתמשים דרך קלה לשתף אנשי קשר מתוך רשימת אנשי הקשר שלהם.

Pete LePage

מהו ה-Contact Picker API?

הגישה לאנשי הקשר של המשתמש במכשיר נייד הייתה תכונה באפליקציות ל-iOS/Android מאז (כמעט) שחר. זוהי אחת מהבקשות הנפוצות ביותר להוספת תכונות שמעתי ממפתחי אתרים, ולרוב זו הסיבה העיקרית שהם מפתחים iOS או Android אפליקציה.

זמין ב-Chrome מגרסה 80 ואילך ב-Android M ואילך, המפרט של Contact Picker API API לפי דרישה שמאפשר למשתמשים לבחור פריטים מרשימת אנשי הקשר שלהם לשתף פרטים מוגבלים של הערכים שנבחרו עם אתר אינטרנט. היא מאפשרת למשתמשים משתפים רק את מה שהם רוצים, מתי שהם רוצים, ועוזרים למשתמשים ליצור קשר עם חברים ובני משפחה.

לדוגמה, לקוח אימייל מבוסס-אינטרנט יכול להשתמש ב-Contact Picker API כדי בוחרים את הנמענים של הודעת האימייל. אפליקציית קריינות לכתובת IP עשויה לחפש לאיזה מספר טלפון להתקשר. או שרשת חברתית יכולה לעזור למשתמש לגלות לחברים שכבר הצטרפו.

שימוש ב-Contact Picker API

השימוש ב-Contact Picker API מחייב הפעלת method עם פרמטר אפשרויות מציין את הסוגים של פרטי הקשר הרצויים. שיטה שנייה מאפשרת לכם לדעת איזה מידע תספק המערכת הבסיסית.

זיהוי תכונות

כדי לבדוק אם יש תמיכה ב-Contact Picker API, אפשר להשתמש במאמרים הבאים:

const supported = ('contacts' in navigator && 'ContactsManager' in window);

בנוסף, ב-Android, כדי להשתמש בבורר אנשי הקשר נדרש Android מגרסה M ואילך.

פתיחת בורר אנשי הקשר

נקודת הכניסה ל-Contact Picker API היא navigator.contacts.select(). כשהקריאה מתבצעת, היא מחזירה הבטחה ומציגה את בוחר אנשי הקשר, המשתמש כדי לבחור את אנשי הקשר שהם רוצים לשתף עם האתר. אחרי לאחר שבוחרים מה לשתף ולוחצים על סיום, ההבטחה נסגרת מערך של אנשי קשר שנבחרו על ידי המשתמש.

בקריאה ל-select(), צריך לספק מערך של נכסים מוחזר בתור הפרמטר הראשון (הערכים המותרים הם כל אחד 'name', 'email', 'tel', 'address' או 'icon'), ואם ניתן, אם מספר אנשי קשר נבחר כפרמטר שני.

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

try {
  const contacts = await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (ex) {
  // Handle any errors here.
}

ניתן לקרוא ל-Contacts Picker API רק דרך מאובטח, בהקשר של גלישה ברמה העליונה, וכמו ממשקי API מתקדמים אחרים, נדרש למשתמש.

זיהוי נכסים זמינים

כדי לזהות אילו נכסים זמינים, צריך לקרוא לפונקציה navigator.contacts.getProperties(). היא מחזירה הבטחה שמסתיימת במערך של מחרוזות שמציינות זמינים. לדוגמה: ['name', 'email', 'tel', 'address']. אפשר להעביר את הערכים האלה אל select().

זכרו, נכסים לא תמיד זמינים, ונכסים חדשים עשויים להיות זמינים נוסף. בעתיד, פלטפורמות אחרות ומקורות אחרים ליצירת קשר עשויים להגביל אילו מאפיינים משותפים.

טיפול בתוצאות

Contact Picker API מחזיר מערך של אנשי קשר, וכל איש קשר כולל מערך של המאפיינים המבוקשים. אם לאיש קשר אין נתונים עבור נכס המבוקש, או שהמשתמש בוחר לסרב לשיתוף של נכס מסוים המאפיין הזה, ה-API מחזיר מערך ריק. (אני מתאר איך המשתמש בוחר מאפיינים בקטע בקרת משתמשים).

לדוגמה, אם אתר מבקש את name, email ו-tel, ומשתמש בוחר איש קשר אחד שמכיל נתונים בשדה השם, מפיק שני אך אין לו כתובת אימייל, התשובה שתוחזר תהיה:

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

אבטחה והרשאות

צוות Chrome עיצב והטמיע את Contact Picker API באמצעות הליבה העקרונות שמוגדרים שליטה בגישה לתכונות מתקדמות של פלטפורמת האינטרנט, כולל שליטה של משתמשים, שקיפות וארגונומיה. אסביר על כל אחת מהן.

שליטת משתמשים

גישה של המשתמשים אנשי הקשר מוצגים דרך הבורר, וניתן להתקשר אליו רק תנועת משתמש, בהקשר גלישה מאובטח ברמה העליונה. כך ניתן להבטיח שהאתר לא יוכל להציג את הבורר בעת טעינת הדף, או להציג באופן אקראי באמצעות הבורר ללא הקשר.

צילום מסך, המשתמשים יכולים לבחור אילו מאפיינים לשתף.
המשתמשים יכולים לבחור שלא לשתף נכסים מסוימים. בצילום המסך הזה, המשתמש ביטל את הסימון של האפשרות 'מספרי טלפון' לחצן. למרות שהאתר ביקשו מספרי טלפון, הם לא ישותפו עם האתר.

אין אפשרות לבחור כמה אנשי קשר בבת אחת כדי לעודד משתמשים כדי לבחור רק את אנשי הקשר שהם צריכים לשתף עבור הפעולה הספציפית הזו האתר. המשתמשים יכולים גם לקבוע אילו נכסים ישותפו עם האתר על ידי החלפת המצב של לחצן הנכס בחלק העליון של הבורר.

שקיפות

כדי שיהיה ברור אילו פרטים ליצירת קשר משותפים, הבורר תמיד מציג את השם והסמל של איש הקשר, וכן את כל המאפיינים שיש באתר נדרש. לדוגמה, אם אתר מבקש את name, email ו-tel, כל שלושת המאפיינים יוצגו בבורר. לחלופין, אם אתר מבקש רק את tel, הבורר יציג רק את השם מספרי טלפון.

צילום מסך של בורר לאתר שמבקש את כל המאפיינים.
בורר, אתר שמבקש את name, email ו tel, נבחר איש קשר אחד.
צילום מסך של בורר לאתר שמבקש רק מספרי טלפון.
בורר, האתר שמבקש רק tel, נבחר איש קשר אחד.
צילום מסך של בורר כשלוחצים לחיצה ארוכה על איש קשר.
התוצאה של לחיצה ארוכה על איש קשר.

לחיצה ארוכה על איש קשר תציג את כל המידע משותף, אם נבחר איש קשר. (ראו את תמונת איש הקשר של חתול צ'שייר).

אין שמירה על הרשאות

הגישה לאנשי הקשר היא על פי דרישה, ולא נשארה. בכל פעם שאתר רוצה גישה, היא חייבת לבצע קריאה אל navigator.contacts.select() עם תנועת משתמש, והמשתמש חייב לבחור בנפרד את אנשי הקשר שהוא רוצה לשתף ולציין בו את הפרטים של האתר.

משוב

צוות Chrome רוצה לשמוע על החוויה שלך עם בורר אנשי הקשר API.

נתקלתם בבעיה בהטמעה?

מצאת באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

  • דווחו על באג בכתובת https://new.crbug.com. הקפידו לכלול כמה שיותר לפרט ככל האפשר, לספק הוראות פשוטות לשחזור הבאג, מגדירים את Components (רכיבים) ל-Blink>Contacts. תקלה פועלת מצוין לשיתוף שחזורים מהירים וקלים של בעיות.

אתם מתכננים להשתמש ב-API?

האם בכוונתך להשתמש ב-Contact Picker API? התמיכה הציבורית שלך עוזרת צוות Chrome כדי לקבוע את סדר העדיפויות של התכונות, ומראה לספקי דפדפנים אחרים איך חיוני לתמוך בהם.

קישורים שימושיים

תודה

תודה רבה ותודה לפינור תוררינסון וריאן קנסו ואת הפיצ'ר פטר בוורלו, לקודד ללא בושה גנבו והארגנו מחדש את ההדגמה (דמו).

נ.ב.: השמות בכלי לבחירת אנשי הקשר הם דמויות מאליס בארץ הפלאות.