Contact Picker API를 사용하면 사용자가 연락처 목록의 연락처를 쉽게 공유할 수 있습니다.
연락처 선택 도구 API란 무엇인가요?
휴대기기에서 사용자의 연락처에 액세스하는 기능은 거의 초창기부터 iOS/Android 앱의 기능이었습니다. 이 기능은 웹 개발자로부터 받는 가장 일반적인 기능 요청 중 하나이며, iOS/Android 앱을 빌드하는 주된 이유이기도 합니다.
Android M 이상의 Chrome 80에서 사용할 수 있는 Contact Picker API 사양은 사용자가 연락처 목록에서 항목을 선택하고 선택된 항목의 제한된 세부정보를 웹사이트와 공유할 수 있는 주문형 API입니다. 사용자는 이 서비스를 통해 원하는 시간에 원하는 정보만 공유할 수 있으며, 친구나 가족과 더 쉽게 연락하고 소통할 수 있습니다.
예를 들어 웹 기반 이메일 클라이언트는 Contact Picker API를 사용하여 이메일 수신자를 선택할 수 있습니다. Voice-over-IP 앱은 통화할 전화번호를 조회할 수 있습니다. 또는 소셜 네트워크를 통해 사용자가 이미 가입한 친구를 찾을 수 있습니다.
연락처 선택 도구 API 사용
Contact Picker API에는 원하는 연락처 정보 유형을 지정하는 옵션 매개변수가 있는 메서드 호출이 필요합니다. 두 번째 방법은 기본 시스템이 제공하는 정보를 알려줍니다.
기능 감지
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.
}
연락처 선택 도구 API는 보안의 최상위 탐색 컨텍스트에서만 호출할 수 있으며 다른 강력한 API와 마찬가지로 사용자 동작이 필요합니다.
사용 가능한 속성 감지
사용 가능한 속성을 확인하려면 navigator.contacts.getProperties()를 호출합니다.
이 메서드는 사용 가능한 속성을 나타내는 문자열 배열로 확인되는 프로미스를 반환합니다. 예를 들면 ['name', 'email', 'tel', 'address']입니다.
이 값을 select()에 전달할 수 있습니다.
속성을 항상 사용할 수 있는 것은 아니며 새 속성이 추가될 수 있습니다. 향후 다른 플랫폼과 연락처 소스에서 공유되는 속성을 제한할 수 있습니다.
결과 처리
Contact Picker API는 연락처 배열을 반환하고 각 연락처에는 요청된 속성의 배열이 포함됩니다. 연락처에 요청된 속성의 데이터가 없거나 사용자가 특정 속성 공유를 선택 해제하면 API는 빈 배열을 반환합니다. 사용자 컨트롤 섹션에서 사용자가 속성을 선택하는 방법을 설명합니다.
예를 들어 사이트에서 name, email, tel를 요청하고 사용자가 이름 필드에 데이터가 있는 연락처 1개를 선택하고 전화번호를 2개 제공하지만 이메일 주소가 없는 경우 반환되는 응답은 다음과 같습니다.
[{
"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 요청, 연락처 1개가 선택되었습니다.
tel만 요청, 연락처 1개가 선택되었습니다.
연락처를 길게 누르면 연락처가 선택된 경우 공유되는 모든 정보가 표시됩니다. (Chcheshire Cat 연락처 이미지를 참조하세요.)
권한 지속성 없음
연락처 액세스는 주문형이며 유지되지 않습니다. 사이트에서 액세스 권한을 요청할 때마다 사용자 동작으로 navigator.contacts.select()를 호출해야 하며 사용자는 사이트와 공유할 연락처를 개별적으로 선택해야 합니다.
의견
Chrome팀은 Contact Picker API 사용 경험에 관한 의견을 듣고자 합니다.
구현에 문제가 있나요?
Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보를 포함하고, 버그 재현을 위한 간단한 안내를 제공하고, 구성요소를
Blink>Contacts로 설정하세요. Glitch는 문제를 쉽고 빠르게 재현할 때 유용합니다.
API를 사용할 계획이신가요?
Contact Picker API를 사용할 계획이신가요? 공개 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
- 사용 계획을 WICG 담화 대화목록에서 공유해 주세요.
- 해시태그
#ContactPicker를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.
유용한 링크
- 공개 설명
- 연락처 선택 도구 사양
- Contact Picker API 데모 및 Contact Picker API 데모 소스
- 추적 버그
- ChromeStatus.com 항목
- 깜박임 구성요소:
Blink>Contacts
감사합니다.
이 기능을 구현하는 Finnur Thorarinsson과
Rayan Kanso와 제가 데모를 위해
부끄러워하며
훔쳐서 리팩터링한 코드의 피터 베벌루에게 감사의 인사를 전합니다.
추신: 주소록 선택기에 있는 이름은 이상한 나라의 앨리스에서 온 문자입니다.