Быстрый и усилитель; Руководство по реализации проверенной регистрации

Обзор

веб iOS API

Платформа Google Maps доступна для веб-приложений (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, маршрутах и ​​расстояниях. Примеры в этом руководстве написаны для одной платформы, но для реализации на других платформах предоставлены ссылки на документацию.

Создайте прямо сейчас!

Инструмент Quick Builder в консоли Google Cloud позволяет создавать автозаполнение адресных форм с помощью интерактивного пользовательского интерфейса, который генерирует для вас код JavaScript.

Пользователи привыкли жить и работать в цифровом мире, где удобство, скорость и безопасность являются базовыми ожиданиями. Когда они подают заявку на что-либо, например, на кредитную карту, банковский счет или кредит, они ожидают, что процесс будет быстрым и простым.

Чем чаще пользователям приходится вводить повторяющиеся данные, тем меньше у вас шансов удержать их в качестве клиентов. Создание быстрой, простой и проверенной процедуры регистрации улучшит пользовательский опыт и поможет вам удержать пользователей на вашем сайте.

Ввод адресов вручную может привести к снижению конверсии, ошибочным данным в CRM и дорогостоящим ошибкам доставки. Быстрая и подтвержденная регистрация ускоряет процесс, мгновенно предлагая адреса поблизости всего несколькими касаниями и отображая введенный адрес для визуального подтверждения, что помогает пользователю убедиться в правильности введенного адреса. Подтверждение адреса пользователя с использованием его текущего местоположения также помогает предотвратить мошенничество и укрепляет доверие пользователей к вашим продуктам и услугам. Подтверждение также может повысить вашу уверенность в мгновенной выдаче виртуальных банковских и кредитных карт.

В этом документе представлены рекомендации по реализации быстрой и подтвержденной регистрации с использованием платформы Google Maps. Поскольку пользователи, скорее всего, будут регистрироваться на мобильных устройствах, большинство примеров реализации в этом документе ориентированы на Android. Полный пример см. в исходном коде . Для достижения тех же целей можно также использовать SDK для iOS.

На следующей диаграмме показаны основные API-интерфейсы, используемые при создании решения (нажмите для увеличения).

Включение API

Для реализации этих рекомендаций необходимо включить следующие API в консоли Google Cloud:

• SDK для карт Android (или API для выбранной вами платформы)
• API мест
• API геокодирования

Для получения дополнительной информации о настройке см. раздел «Начало работы с платформой Google Maps» .

Разделы, посвященные передовым практикам

В данном документе описаны следующие методы и настройки.

• Значок является одним из основных рекомендуемых методов работы.
• Значок звезды — это необязательная, но рекомендуемая настройка для улучшения решения.

	Добавление автозаполнения в поля ввода	Автоматическое заполнение адресной формы. Добавьте функцию ввода текста по мере необходимости, чтобы улучшить пользовательский опыт на всех платформах и повысить точность адресов с минимальным количеством нажатий клавиш.
	Визуальное подтверждение адреса.	Предоставьте пользователям возможность видеть свой адрес на карте в качестве визуального подтверждения того, что они ввели правильный адрес.
	Сравнение введенного пользователем адреса с местоположением устройства.	Чтобы определить, находится ли пользователь по указанному адресу, сравните выбранный или введенный им адрес с текущим местоположением его устройства. (Для этого пользователь должен находиться дома во время регистрации.)
	Советы по дальнейшему улучшению быстрой и подтвержденной регистрации	Вы можете еще больше улучшить ввод адреса, добавив такие функции, как настройка внешнего вида виджета автозаполнения или предоставление пользователям возможности выбирать название компании или достопримечательности в качестве адреса.

Добавление автозаполнения в поля ввода

В этом примере используется: Places SDK для Android

Также доступно: iOS | JavaScript

Функция автозаполнения Place Autocomplete может упростить ввод адреса в вашем приложении, что приведет к повышению коэффициента конверсии и обеспечит удобство использования для ваших клиентов. Автозаполнение предоставляет одно поле для быстрого ввода с функцией автозаполнения адреса, которое можно использовать для автоматического заполнения формы регистрации. Внедрив Place Autocomplete в процесс регистрации, вы сможете:

• Сократите количество ошибок при вводе адресов.
• Сократите количество шагов в процессе регистрации.
• Упростите ввод адреса на мобильных или носимых устройствах.
• Значительно сократить количество нажатий клавиш и общее время, необходимое клиенту для регистрации.

Когда пользователь выбирает поле ввода «Автозаполнение» и начинает печатать, появляется список предполагаемых адресов.

Когда пользователь выбирает адрес из списка вариантов, вы можете использовать полученный ответ для проверки адреса и определения местоположения. Затем ваше приложение может заполнить соответствующие поля формы ввода адреса, как показано на следующем рисунке.

Видео: Улучшите формы адресов с помощью функции автозаполнения мест.

Адресные формы

Android

iOS

Веб

Платформа Google Maps предоставляет виджет автозаполнения мест для мобильных платформ и веб-версии. Виджет, показанный на предыдущих рисунках, предоставляет диалоговое окно поиска со встроенной функцией автозаполнения, которую можно оптимизировать даже для поиска по местоположению.

В этом разделе описывается, как реализовать функцию автозаполнения поля «Быстрая и подтвержденная регистрация».

Добавление виджета автозаполнения «Местоположение»

В Android можно добавить виджет автозаполнения с помощью интента Autocomplete , который запускает Place Autocomplete из поля ввода «Адресная строка 1», где пользователь начнет вводить свой адрес. Когда он начнет печатать, он сможет выбрать свой адрес из списка подсказок автозаполнения.

Сначала подготовьте средство запуска активности, используя ActivityResultLauncher , которое будет отслеживать результат запущенной активности. Функция обратного вызова для получения результата будет содержать объект Place, соответствующий адресу, который пользователь выберет из подсказок автозаполнения.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Далее определите свойства полей, местоположения и типа для интента Place Autocomplete и создайте его с помощью Autocomplete.IntentBuilder . Наконец, запустите интент, используя ActivityResultLauncher определенный в предыдущем примере кода.

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LOCATION, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(List.of("US"))
                .setTypesFilter(List.of("establishment"))
                .build(this);
        startAutocomplete.launch(intent);
    }

Обработка адреса, возвращаемого функцией автозаполнения места.

Определение ActivityResultLauncher данное ранее, также определило, что должно происходить при возврате результата действия в коллбэке. Если пользователь выбрал предсказание, оно будет передано в интенте, содержащемся в объекте результата. Поскольку интент был создан с помощью Autocomplete.IntentBuilder , метод Autocomplete.getPlaceFromIntent() может извлечь из него объект Place.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Затем вызовите метод Place.getAddressComponents() и сопоставьте каждый компонент адреса с соответствующим полем ввода в форме адреса, заполнив поле значением из выбранного пользователем места.

Использование данных об адресе, полученных в результате прогнозирования, вместо адреса, введенного вручную, помогает обеспечить точность адреса, гарантирует, что адрес известен и по нему можно доставить посылку, а также сокращает количество нажатий клавиш пользователем.

Что следует учитывать при внедрении функции автозаполнения мест?

Функция автозаполнения мест предлагает ряд опций, позволяющих гибко использовать не только виджет. Вы можете использовать комбинацию сервисов, чтобы получить именно то, что вам нужно для правильного сопоставления местоположения.

• Для формы «АДРЕС» установите параметр types в address , чтобы ограничить поиск только полными адресами улиц. Подробнее о поддерживаемых типах см. в разделе «Запросы автозаполнения» .

• Установите соответствующие ограничения и параметры, если вам не требуется поиск по всему миру. Существует ряд параметров, которые можно использовать для смещения или ограничения поиска только определенными регионами.

  • Используйте RectangularBounds для установки прямоугольных границ области, а setLocationRestriction() для обеспечения возврата только адресов в этих областях.

  • Используйте функцию setCountries() , чтобы ограничить ответы определенным набором стран.

• Оставьте поля редактируемыми на случай, если некоторые поля будут пропущены при сопоставлении, и позвольте клиентам обновлять адрес при необходимости. Поскольку большинство адресов, возвращаемых функцией автозаполнения, не содержат номеров подобъектов, таких как номера квартир, офисов или помещений, вы можете переключить фокус на строку адреса 2, чтобы побудить пользователя заполнить эту информацию при необходимости.

Визуальное подтверждение адреса.

В этом примере используется: Maps SDK для Android

Также доступно: iOS | JavaScript

В процессе ввода адреса предоставьте пользователям визуальное подтверждение адреса на карте. Это даст им дополнительную уверенность в правильности адреса.

На следующем рисунке ниже адреса показана карта с отметкой (булавкой) в указанном адресе.

В следующем примере показаны основные шаги по добавлению карты в Android. Для получения более подробной информации обратитесь к документации.

• Добавление SupportMapFragment (в данном случае, динамическое добавление фрагмента)
• Получение доступа к фрагменту кода и регистрация функции обратного вызова.
• Оформление и добавление маркера на карту.
• Отключение элементов управления картой

Добавление SupportMapFragment

Сначала добавьте фрагмент SupportMapFragment в XML-файл макета .

    <fragment
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Затем, если фрагмент еще не существует, добавьте его программным способом.

    private void showMap(Place place) {
        coordinates = place.getLocation();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

Получение доступа к фрагменту кода и регистрация функции обратного вызова.

1. Чтобы получить дескриптор фрагмента, вызовите метод FragmentManager.findFragmentById и передайте ему идентификатор ресурса фрагмента из вашего файла разметки. Если вы добавили фрагмент динамически , пропустите этот шаг, поскольку вы уже получили дескриптор.

2. Вызовите метод getMapAsync , чтобы установить функцию обратного вызова для фрагмента.

Например, если вы добавили фрагмент статически:

Котлин

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

Java

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Оформление и добавление маркера на карту.

Когда карта будет готова, задайте стиль, центрируйте камеру и добавьте маркер по координатам введенного адреса. Приведенный ниже код использует стили, определенные в объекте JSON, или вы можете загрузить идентификатор карты, определенный с помощью Cloud-based Maps Styling .

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

( См. полный пример кода )

Отключение элементов управления картой

Чтобы карта отображала местоположение без дополнительных элементов управления, таких как компас или панель инструментов, и оставалась понятной, можно отключить ненужные элементы управления . На Android можно также включить облегченный режим , обеспечивающий ограниченную интерактивность.

Сравнение введенного пользователем адреса с местоположением устройства.

Получение подтверждения адреса — уверенности в том, что пользователь находится по указанному адресу — может быть осложнено такими факторами, как удаленное местоположение пользователя, переезд на новый адрес или отсутствие у цифровых компаний (например, цифровых банков) физического офиса, куда пользователи могли бы обратиться для подтверждения адреса с помощью счетов за коммунальные услуги или других документов. Предоставление цифровых способов проверки адреса пользователя позволяет обеспечить более быструю и удобную регистрацию.

Безопасность имеет первостепенное значение при проверке адреса, особенно в процессе цифровой регистрации. В этом разделе приведены рекомендации и примеры для проверки соответствия местоположения пользователя при регистрации адресу, который он указывает в качестве своего собственного.

Внимание: Поскольку местоположение пользователя может быть подделано, или злоумышленник может приблизиться к указанному физическому адресу, чтобы зарегистрироваться, используя чужие данные, сравнение местоположения устройства пользователя, как описано в этом документе, с введенным адресом должно быть одним из нескольких показателей, используемых для подтверждения адреса.

Процесс сравнения введенного адреса с местоположением устройства включает следующие шаги:

1. Преобразование введенного пользователем адреса в географические координаты .
2. Запрос у пользователя разрешения на получение данных о местоположении его устройства .
3. Расчет расстояния между введенным адресом и местоположением устройства . Вы можете определить максимальное расстояние, которое учитывается для совпадения адреса и местоположения.

На следующем рисунке представлен пример того, как можно предложить пользователям сравнить введенный ими адрес с их текущим местоположением.

Преобразование введенного пользователем адреса в географические координаты.

В этом примере используется: Places SDK для Android

Также доступно: iOS | JavaScript | API геокодирования

После того как пользователи согласятся на проверку адреса (нажав кнопку «Подтвердить, что я сейчас нахожусь по этому адресу» на предыдущем рисунке), первым шагом в сравнении адреса с текущим местоположением является преобразование введенного адреса в географические координаты.

Если пользователь выбрал свой адрес с помощью функции автозаполнения, обязательно добавьте поле Place.Field.LAT_LNG в список полей автозаполнения, как показано в фрагменте кода добавления виджета автозаполнения , и вызовите метод Place.getLatLng() для получения географических координат выбранного адреса.

coordinates = place.getLatLng();

Если пользователь ввел свой адрес вручную или внес изменения после того, как функция автозаполнения мест заполнила поля, используйте службу геокодирования Android или API геокодирования, чтобы найти координаты, соответствующие этому адресу.

Пример

https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key= YOUR_API_KEY

Обязательно закодируйте вызов API геокодирования в формате URL .

Краткий справочник по кодировке URL: %20 = пробел, %2B = + (плюс), %2C = , (запятая)

Запрос у пользователя разрешения на получение данных о местоположении его устройства.

Чтобы получить местоположение устройства пользователя, необходимо запросить у него разрешение на включение служб определения местоположения. Следуя инструкциям в документации Android по созданию приложений, использующих определение местоположения , реализуйте следующий алгоритм действий:

• Запросите разрешение на определение местоположения в виде разового гранта на точно указанном уровне ( ACCESS_FINE_LOCATION ).

• Если пользователь предоставляет доступ к данным о местоположении, получите местоположение пользователя.

• Если пользователь отклоняет запрос на доступ к местоположению, обработайте отказ корректно. Например, вы можете отобразить следующее сообщение (при условии, что вы не сохраняете текущее местоположение пользователя):

  «Если вы не сообщите приложению своё точное местоположение, вам потребуется подтвердить его по почте для активации аккаунта. [ОК]»

На следующем рисунке показан пример запроса к пользователям на предоставление разрешения на получение данных о местоположении устройства.

Для проверки разрешения на доступ к местоположению подготовьте средство запуска активности, которое будет отслеживать результат от запущенной активности с помощью ActivityResultLauncher . В результате будет получена строка, указывающая, предоставил ли пользователь запрошенное разрешение или отклонил его.

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

Затем проверьте, есть ли у приложения уже разрешение ACCESS_FINE_LOCATION . Если нет, запросите его у пользователя, запустив действие запроса разрешения с помощью средства запуска, определенного на предыдущем шаге.

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

После получения разрешения ACCESS_FINE_LOCATION используйте объединенный поставщик местоположения, чтобы получить последнее известное местоположение устройства и создать на его основе объект LatLng .

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    // ...
                });
    }

Расчет расстояния между введенным адресом и местоположением устройства.

Используйте математические вычисления для расчета расстояния между двумя координатами широты и долготы (введенный адрес и местоположение устройства). Библиотека утилит Maps SDK для Android с открытым исходным кодом содержит несколько удобных методов для расчета сферического расстояния между двумя точками на Земле.

Сначала установите библиотеку Maps SDK for Android Utility Library, добавив следующую зависимость в файл build.gradle.kts вашего приложения:

dependencies {


    // Utility Library for Maps SDK for Android
    // You do not need to add a separate dependency for the Maps SDK for Android
    // since this library builds in the compatible version of the Maps SDK.
    implementation("com.google.maps.android:android-maps-utils:3.19.0")
}

Затем, после получения последнего известного местоположения устройства, в файле активности задайте радиус в метрах, чтобы считать два местоположения «совпадающими». Радиус должен быть достаточно большим, чтобы учесть вариативность точности GPS и размер места по указанному пользователем адресу. Например:

private static final double acceptableProximity = 150;

Затем используйте метод computeDistanceBetween() из вспомогательной библиотеки для вычисления расстояния между местоположением устройства и введенным пользователем адресом. Если расстояние попадает в радиус, определенный выше, считайте местоположения соответствующими.

// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
    Log.d(TAG, "location matched");
    // TODO: Display UI based on the locations matching
} else {
    Log.d(TAG, "location not matched");
    // TODO: Display UI based on the locations not matching
}

( См. полный пример кода )

Если адрес и местоположение совпадают, отобразите подтверждение в приложении, как показано на следующем рисунке.

Советы по дальнейшему улучшению быстрой и подтвержденной регистрации

Разрешите пользователям вводить адрес на основе названия компании или достопримечательности. Сервис автозаполнения работает не только для адресов, но вы также можете разрешить пользователям вводить названия компаний или достопримечательностей. Чтобы разрешить ввод как адресов, так и названий учреждений, удалите свойство types из определения автозаполнения.

Настройте внешний вид поля автозаполнения «Разместить» в соответствии со стилем вашего веб-сайта. Если вы предпочитаете управлять внешним видом поля автозаполнения «Разместить» в своем приложении, а не использовать виджет Google, вы можете использовать поле автозаполнения «Разместить» программно для управления пользовательским интерфейсом, который вы создаете с помощью сервиса автозаполнения «Разместить».