작성자 메모: 이 문서에 설명된 기술과 프로세스는 실험적이며 일부 브라우저에서만 작동합니다. 이 글을 쓰는 시점에서 Contact Picker API는 Android Chrome(버전 80부터) 및 iOS Safari(버전 14.5부터, 그러나 플래그 뒤에서만 지원됨)에서만 지원되었습니다. 기능을 검토하려면 내 웹사이트에서 실행 중인 데모를 확인하세요.

---

휴대폰이나 태블릿의 연락처 목록 항목을 읽는 것은 전통적으로 기본 앱으로 제한되었습니다. 하지만 Contact Picker API를 사용하면 JavaScript를 사용하여 이 작업을 수행할 수 있습니다.

이 기능은 전화번호나 VoIP와 같은 연락처 정보가 필요한 앱, 알려진 사람을 검색하려는 소셜 네트워크, 데이터를 보기 위해 애플리케이션을 교체하지 않고 양식 정보를 입력해야 하는 앱에서 흥미로울 수 있습니다.

API와 기기는 사용할 수 있는 속성을 제한합니다. 개발자가 선택할 수 있는 표준은 5가지입니다:

• 이름
• 전화
• 이메일
• 구애
• 아이콘

연락처에는 둘 이상의 전화번호, 이메일 또는 여러 주소가 있을 수 있으므로 여기서 복수형이 중요합니다. 반환된 데이터는 단일 값이더라도 일관성을 위해 항상 배열 내부에 있습니다. 나중에 더 자세히 설명하겠습니다.

---

개인정보 보호 및 보안

휴대폰에 저장된 연락처 정보에는 신중하게 처리해야 하는 민감한 정보가 포함될 수 있습니다. 따라서 다음과 같은 개인 정보 보호 및 보안 고려 사항을 고려해야 합니다.

• Contact Picker API 코드는 최상위 탐색 컨텍스트에서 실행되어야 합니다. 광고나 타사 플러그인과 같은 외부 코드가 휴대폰의 연락처 목록을 읽는 것을 방지합니다.
• 연락처 선택기 API 코드는 사용자 동작 후에만 실행할 수 있습니다. 따라서 개발자는 프로세스를 완전히 자동화할 수 없습니다. 사용자는 연락처 읽기를 트리거하는 조치를 취해야 합니다.
• 해당 사람은 연락처 목록에 대한 액세스를 허용해야 합니다. 이 제한은 JS가 아닌 전화에 의해 적용됩니다. 사용자는 브라우저에 연락처에 액세스할 수 있는 권한을 부여해야 합니다(아직 연락처가 없는 경우).

연락처 선택기 API를 사용하는 웹사이트를 처음 사용하는 경우 다음과 같은 메시지가 표시될 수 있습니다.

사용자가 '허용'을 탭할 때까지 휴대전화에 항상 이 팝업이 표시됩니다. 그런 일이 발생할 때까지 Contact Picker API는 실행되지 않습니다. 좋은 일이다. 우리는 사용자에게 적절한 권한이 부여되기를 원합니다. 일회성이라는 점도 좋습니다. 페이지에서 Contact Picker API 코드를 실행할 때마다 승인을 부여하는 것은 골치 아픈 일입니다.

---

API 및 코드

Contact Picker API는 다음 두 가지 방법만 정의합니다.

• getProperties(): 장치에서 읽을 수 있는 속성 목록을 반환합니다. 정의에는 "주소", "이메일", "아이콘"(연락처 사진이 아닐 수 있음), "이름", "전화"(전화)의 5개만 있지만 장치가 모든 항목에 대한 액세스를 허용하지 않을 수 있습니다. 그 중.
• select(): 연락처 팝업을 열고 사용자가 작업을 완료하면 선택 항목을 반환합니다. 읽을 속성 목록과 옵션이 있는 선택적 개체라는 두 가지 매개 변수가 필요합니다.

두 방법 모두 약속을 반환하지만, 트리거하는 작업이 앱의 일반적인 흐름을 차단한다는 점을 고려하여 이를 처리할 때 async/await를 사용해야 합니다.

getProperties()를 무시하고 모든 속성을 직접 요청하고 싶을 수도 있습니다. 하지만 이렇게 하면 작동할 가능성이 높지만 지정된 속성을 사용할 수 없는 경우 select() 메서드에서 예외가 발생하므로 주의하세요.

예

Contact Picker API의 데모가 실행 중입니다(여기에서 온라인으로 실행하거나 이 비디오를 시청하세요). API가 지원되는 경우 연락처의 전화번호, 이름, 이메일을 읽어서 표시하는 버튼이 표시됩니다.

먼저 버튼이 필요합니다. 앞서 개인 정보 보호 및 보안 섹션에서 자세히 설명했듯이 API를 호출하려면 사용자 작업이 필요하므로 사용자 상호 작용 없이는 아무것도 트리거할 수 없습니다.

Show contact data

주 코드는 getContactData() 함수에 있습니다. 하지만 그 전에 Contact Picker API를 사용할 수 없는 경우 버튼을 표시하는 이유는 무엇입니까? 버튼을 사용할 수 없으면 숨기자. 또는 더 나은 방법은 기본적으로 버튼을 숨기고(hidden 속성 추가) API를 사용할 수 있는 경우에만 표시하는 것입니다.

// only show the button if browser supports Contact Picker API
if ("contacts" in navigator) {
  document.querySelector("button").removeAttribute("hidden");
}

이제 버튼 로직이 준비되었으므로 getContactData()에 집중하겠습니다. 다음은 함수의 주석 처리된 버전입니다:

// it is asynchronous because we'll wait for the modal selection
async function getContactData() {
  // indicate what contact values will be read
  const props = ["tel", "name", "email"];

  // wrap everything in a try...catch, just in case
  try {
    // open the native contact selector (after permission is granted)
    const contacts = await navigator.contacts.select(props);

    // this will execute after the native contact selector is closed
    if (contacts.length) {
      // if there's data, show it
      alert("Selected data: "   JSON.stringify(contacts));
    } else {
      // ...if not, indicate nothing was selected
      alert("No selection done");
    }
  } catch (ex) {
    // if something fails, show the error message
    alert(ex.message)
  }
}

버튼이 이 기능을 실행하고 브라우저에 권한이 있는 경우(이전 섹션의 스크린샷 참조) 필수 정보를 나타내는 연락처 모달이 표시됩니다. 즉, 데이터를 읽는 URL, 반환할 데이터 및 선택할 연락처 목록입니다.

모달을 닫은 후 연락처 변수는 요청된 정보가 포함된 객체가 포함된 배열로 JSON의 데이터를 저장합니다(연락처 카드에서 사용할 수 없는 경우 비어 있을 수 있음).

예를 들어 나를 연락처로 선택한 경우의 결과입니다(가짜 데이터).

[
  {
    "address": [],
    "email": [ "[email protected]" ],
    "icon": [],
    "name": [ "Alvaro Montoro" ],
    "tel": [ "555-555-5555", "555-123-4567" ]
  }
]

, "아이콘": [], "이름":

, "전화":

} ]

데이터에 아이콘이 포함된 경우 이미지가 포함된 얼룩이 됩니다. 데이터에 주소가 포함되어 있으면 거리, 도시, 국가, 우편번호 등으로 더욱 복잡한 객체가 됩니다. 반환된 값은 사양에서 확인할 수 있습니다.

그런데 연락처를 하나만 선택했는데 배열을 사용하는 이유는 무엇입니까? 하나 이상의 연락처를 선택할 수 있는 옵션이 있기 때문입니다!

여러 연락처 선택

const props = ["tel", "address", "icon", "name", "email"];
// only one option available: read multiple or only one (default)
const options = { multiple: true };

try {
  const contacts = await navigator.contacts.select(props, options);
  // ...

연락처를 두 개 이상 선택할 수 있습니다. 그렇게 하려면 이 옵션을 나타내는 navigator.contacts.select() 메서드에 두 번째 매개변수를 전달해야 합니다.

const props = ["전화번호", "주소", "아이콘", "이름", "이메일"]; // 단 하나의 옵션만 사용 가능: 여러 개 읽기 또는 하나만 읽기(기본값) const 옵션 = { 다중: true }; 노력하다 { const 연락처 = navigator.contacts.select(props, options)를 기다립니다. // ...

---

결과는 연락처 배열이므로 이 예에서는 나머지 코드가 동일하게 유지될 수 있습니다.

const props = ["tel", "address", "icon", "name", "email"];
// only one option available: read multiple or only one (default)
const options = { multiple: true };

try {
  const contacts = await navigator.contacts.select(props, options);
  // ...

위의 코드는 내가 추가한 모든 주석 때문에 위협적일 수 있습니다. 다음은 위 코드의 간단한 주석 버전입니다. 보시다시피, 매우 간단합니다:

비동기 함수 getContactData() { if (네비게이터의 "연락처") { const props = navigator.contacts.getProperties()를 기다립니다; const 옵션 = { 다중: true }; 노력하다 { const 연락처 = navigator.contacts.select(props, options)를 기다립니다. if (연락처.길이) { // 선택된 데이터를 관리하는 코드 } 또 다른 { // 아무것도 선택하지 않았을 때의 코드 } } 잡기 (예) { //오류가 있을 경우 코드 } } }

---

내 웹사이트에서 실행 중인 데모를 확인할 수 있습니다

. 걱정하지 마십시오. 저는 연락처 정보를 화면에 기록하는 것 외에는 아무 작업도 하지 않습니다. 하지만 저를 믿지 못하시겠다면 먼저 코드를 검토해 보세요.

결론: 불법 복제보다 개인 정보 보호

연락처 정보는 PII(개인 식별 정보)이므로 민감한 데이터에 필요한 모든 주의와 보안을 기울여 처리해야 합니다.

• 제가 다루지 않을 수 있는 법적 요구 사항(제가 알지 못하고 국가마다 다르기 때문에) 외에도 민감한 데이터를 다룰 때 다음과 같은 몇 가지 기본 지침이 있습니다.
사람들의 사생활을 존중하세요. 공유하고 싶지 않은 정보를 공유하도록 강요하지 마세요.
데이터를 주의 깊게 안전한 방법으로 다루십시오. 당신이 처리하고 있는 데이터가 당신의 것이라면 괜찮겠습니까?
필요하지 않은 경우 데이터를 저장하지 마세요. 읽고, 사용하고, 잊어버리세요. 사용하지 않는 데이터는 저장하지 마세요.

필요한 데이터만 얻으세요. 교활하거나 그늘지게 행동하지 마십시오. 신뢰성과 신뢰를 구축하는 데 필요한 것을 얻으세요.

웹 앱이 전화번호를 선택하는 동안 주소, 이름, 이메일을 읽으려고 한다고 가정해 보겠습니다. 저 같은 경우에는 자동으로 승인을 거부하고 사이트를 탈퇴하겠습니다.

---

---

자바스크립트와 Contact Picker API를 살펴보세요. 하지만 화면 뒤에 사람이 있다는 것과 그들이 공유하는 데이터가 잘못된 사람의 손에 들어가면 위험할 수 있다는 점을 항상 기억하세요. 무모하게 행동하지 마세요.

JavaScript에 대한 이 기사가 마음에 들었고 JS를 사용하여 웹 API 및 다양한 기능을 테스트하고 싶다면 다음 기사를 확인하세요.

HTML과 JavaScript를 사용하여 록 밴드 게임 개발