Przewodnik po szybkiej i zweryfikowanej rejestracji

Omówienie

Użytkownicy przyzwyczaili się do życia i działania w świecie cyfrowym, w którym wygoda, szybkość i bezpieczeństwo są podstawowymi oczekiwaniami. Gdy ubiegają się o kartę kredytową, konto bankowe lub pożyczkę, oczekują, że proces będzie szybki i prosty.

Im więcej użytkowników musi wpisywać lub wpisywać duplikaty danych, tym mniejsze masz szanse na utrzymanie ich jako klientów. Szybka, łatwa i sprawdzona procedura rejestracji poprawi wrażenia użytkowników i pomoże Ci zachęcić ich do pozostania w Twojej witrynie.

Ręcznie wpisywane adresy mogą powodować spadek liczby konwersji, błędne dane w systemie CRM i drogie błędy dostawy. Szybka i weryfikowana rejestracja przyspiesza proces rejestracji, wyświetlając sugerowane adresy w pobliżu po kilku kliknięciach i potwierdzając wprowadzony adres wizualnie, aby pomóc użytkownikowi mieć pewność, że podany adres jest prawidłowy. Weryfikowanie adresu użytkownika na podstawie jego bieżącej lokalizacji pomaga też zapobiegać oszustwom oraz zwiększa zaufanie użytkowników do Twoich produktów i usług. Weryfikacja może też zwiększyć Twoje zaufanie do oferowania wirtualnych kart bankowych i kredytowych.

W tym temacie znajdziesz wskazówki dotyczące wdrażania szybkiej i zweryfikowanej rejestracji w Google Maps Platform. Użytkownicy najprawdopodobniej będą się rejestrować na urządzeniach mobilnych, dlatego większość przykładów implementacji w tym temacie dotyczy systemu Android. (pełny przykładowy kod źródłowy znajdziesz tutaj). Do tego samego możesz użyć pakietów SDK na iOS.

Poniższy diagram przedstawia podstawowe interfejsy API używane do tworzenia rozwiązania (kliknij, aby powiększyć).

Włączam interfejsy API

Aby wdrożyć te zalecenia, musisz włączyć te interfejsy API w Google Cloud Console:

• Maps SDK na Androida (lub interfejs API na wybranej platformie)
• Places API
• Geocoding API

Więcej informacji o konfigurowaniu znajdziesz w artykule Pierwsze kroki z Google Maps Platform.

Sekcje „Sprawdzone metody”

Poniżej znajdziesz omówienie metod i ustawień, które omówimy w tym temacie.

• check_circle_filled Ikona znacznika wyboru to podstawowa sprawdzona metoda.
• starsIkona gwiazdy jest opcjonalną, ale zalecaną opcją dostosowywania, która pozwala ulepszać rozwiązanie.

Autouzupełnianie adresu może uprościć wpisywanie adresu w aplikacji, co może zwiększyć współczynniki konwersji i ułatwić obsługę klienta. Autouzupełnianie udostępnia pojedyncze pole szybkiego wprowadzania danych z funkcją przewidywania adresu, która może służyć do automatycznego wypełniania formularza adresowego podczas rejestracji. Dzięki włączeniu autouzupełniania miejsc w procesie rejestracji możesz:

• zmniejszyć liczbę błędów przy wprowadzaniu adresów;
• Zmniejsz liczbę kroków w procesie rejestracji.
• uprościć wpisywanie adresów na urządzeniach mobilnych lub noszonych;
• Znacznie zmniejsza liczbę naciśnięć klawiszy i łączny czas potrzebny na rejestrację klienta.

Gdy użytkownik wybierze pole tekstowe Autouzupełnianie i zacznie pisać, pojawi się lista przewidywanych adresów.

Gdy użytkownik wybierze adres z listy przewidywanych wyników, możesz użyć odpowiedzi, aby zweryfikować adres i pobrać lokalizację. Aplikacja może następnie wypełnić odpowiednie pola formularza wprowadzania adresu, jak pokazano na poniższym rysunku.

Google Maps Platform udostępnia widżet autouzupełniania Miejsca na platformy mobilne i internet. Widżet widoczny na poprzednich ilustracjach zawiera okno wyszukiwania z wbudowaną funkcją autouzupełniania, którą możesz nawet zoptymalizować pod kątem wyszukiwania ograniczonego do lokalizacji.

W tej sekcji opisano, jak zaimplementować automatyczne wypełnianie pól w przypadku szybkiej i weryfikowanej rejestracji.

Dodawanie widżetu autouzupełniania miejsc

Na Androidzie możesz dodać widżet autouzupełniania za pomocą intencji autouzupełniania, która uruchamia autouzupełnianie miejsca w polu adresu 1, w którym użytkownik zacznie wpisywać swój adres. Gdy zaczną pisać, będą mogli wybrać swój adres z listy przewidywanego autouzupełniania.

Najpierw za pomocą ActivityResultLauncher przygotuj funkcję uruchamiającą aktywność, która nasłuchuje wyniku z uruchomionej aktywności. Wywołanie zwrotne z wynikiem zawiera obiekt Miejsce odpowiadający adresowi wybranemu przez użytkownika w prognozach autouzupełniania.

    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");
                }
            });

Następnie zdefiniuj właściwości pól, lokalizacji i typu intencji Autouzupełnianie miejsca docelowego i utwórz ją za pomocą Autocomplete.IntentBuilder. Na koniec uruchom intencję za pomocą ActivityResultLauncher zdefiniowanego w poprzednim przykładzie kodu.

    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.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

Obsługa adresu zwróconego przez Autouzupełnianie miejsc

Zdefiniowanie ActivityResultLauncher określa też, co powinno się stać, gdy w wywołaniu zwrotnym zostanie zwrócony wynik aktywności. Jeśli użytkownik wybrał prognozę, zostanie ona dostarczona w intencji zawartej w obiekcie wyniku. Ponieważ intencja została utworzona przez Autocomplete.IntentBuilder, metoda Autocomplete.getPlaceFromIntent() może wyodrębnić z niej obiekt 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");
                }
            });

Następnie wywołaj funkcję Place.getAddressComponents() i dopasuj każdy element adresu do odpowiedniego pola formularza adresu, wypełniając to pole wartością z wybranego przez użytkownika miejsca.

Pobieranie danych adresowych z prognozy zamiast z ręcznie wpisanego adresu pomaga zapewnić jego dokładność, upewnia, że adres jest znany i można do niego dotrzeć, oraz zmniejsza liczbę naciśnięć klawiszy przez użytkownika.

Uwagi dotyczące implementacji autouzupełniania miejsc

Autouzupełnianie miejsc ma wiele opcji, które umożliwiają elastyczne wdrożenie tej funkcji, jeśli chcesz korzystać z czegoś więcej niż tylko z widżetu. Możesz użyć kombinacji usług, aby uzyskać dokładnie to, czego potrzebujesz, aby dopasować lokalizację.

• W przypadku formularza ADRES ustaw parametr types na address, aby ograniczyć dopasowanie do pełnych adresów ulic. Dowiedz się więcej o typach obsługiwanych w żądaniach autouzupełniania miejsc.

• Jeśli nie musisz przeszukiwać całego świata, ustaw odpowiednie ograniczenia i ustawienia. Istnieje kilka parametrów, których można używać do ograniczania lub faworyzowania dopasowania tylko do określonych regionów.

  • Użyj parametru RectangularBounds, aby ustawić granice prostokąta, w którym ma być ograniczony obszar wyszukiwania. Użyj parametru setLocationRestriction(), aby zwrócić tylko adresy z tych obszarów.

  • Użyj znaku setCountries(), aby ograniczyć odpowiedzi do określonej grupy krajów.

• Pozostaw pola do edycji na wypadek, gdyby niektóre pola nie pasowały, i pozwól klientom zaktualizować adres w razie potrzeby. Większość adresów zwracanych przez automatyczne uzupełnianie miejsc nie zawiera numerów pomieszczeń, takich jak numer mieszkania, apartamentu czy pokoju. Możesz więc przenieść fokus na pole Adres 2, aby zachęcić użytkownika do wypełnienia tych informacji w razie potrzeby.

W ramach wprowadzania adresu daj użytkownikom możliwość wizualnego potwierdzenia adresu na mapie. Daje to użytkownikom dodatkowe poczucie pewności, że adres jest prawidłowy.

Na rysunku poniżej widać mapę z pinezką na adresie.

W tym przykładzie opisano podstawowe czynności dodawania mapy w Androidzie. Więcej informacji znajdziesz w dokumentacji.

• Dodawanie SupportMapFragment (w tym przypadku dodawanie fragmentu dynamicznie)
• Pozyskiwanie uchwytu do fragmentu i rejestrowanie wywołania zwrotnego
• Nadawanie mapie stylu i dodawanie do niej znacznika
• Wyłączanie elementów sterujących mapą

Dodaję SupportMapFragment

Najpierw dodaj fragment SupportMapFragment do pliku XML układu.

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

Następnie dodaj fragment programowo, jeśli go jeszcze nie ma.

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

        // 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);
        }
    }

Pobieranie uchwytu do fragmentu i rejestrowanie wywołania zwrotnego

1. Aby uzyskać uchwyt do fragmentu, wywołaj metodę FragmentManager.findFragmentById i podaj jej identyfikator zasobu fragmentu w pliku układu. Jeśli fragment został dodany dynamicznie, pomiń ten krok, ponieważ uchwyt został już pobrany.

2. Aby ustawić wywołanie zwrotne w fragmentach, wywołaj metodę getMapAsync.

Jeśli na przykład fragment został dodany statycznie:

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

      

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

      

nadawanie mapie stylu i dodawanie do niej znacznika;

Gdy mapa będzie gotowa, ustaw styl, wyśrodkuj kamerę i dodaj znacznik w współrzędnych podanego adresu. Poniższy kod używa stylów zdefiniowanych w obiekcie JSON. Możesz też wczytać identyfikator mapy zdefiniowany za pomocą stylów map w Google Cloud.

    @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));
    }

(zobacz pełny przykład kodu)

Wyłączanie elementów sterujących mapą

Aby uprościć mapę, wyświetlając lokalizację bez dodatkowych elementów sterujących (takich jak kompas, pasek narzędzi lub inne wbudowane funkcje), możesz wyłączyć elementy sterujące, które nie są Ci potrzebne. Na Androidzie możesz też włączyć tryb uproszczony, aby ograniczyć interaktywność.

Uzyskanie dowodu adresu, czyli potwierdzenia, że użytkownik znajduje się pod podanym adresem, może być skomplikowane z powodu takich czynników, jak odległość od miejsca zamieszkania użytkownika, przeprowadzka na nowy adres czy firmy cyfrowe (np. banki internetowe), które nie mają fizycznej lokalizacji, do której użytkownicy mogliby się udać, aby przedstawić rachunek za media lub inny dokument potwierdzający adres. Dzięki cyfrowym sposobom weryfikacji adresów użytkowników możesz zapewnić szybszą i bezproblemową rejestrację.

Bezpieczeństwo jest najważniejsze podczas sprawdzania adresu, zwłaszcza w przypadku cyfrowego procesu rejestracji. W tej sekcji znajdziesz wskazówki i przykłady sprawdzania, czy lokalizacja użytkownika podczas rejestracji jest zgodna z adresem wpisanym przez niego jako własny.

Proces porównywania wpisanego adresu z lokalizacją urządzenia obejmuje te czynności:

1. Konwertowanie wprowadzonego przez użytkownika adresu na współrzędne geograficzne.
2. Prośba o zgodę na uzyskanie lokalizacji urządzenia.
3. Obliczanie odległości między wpisanym adresem a lokalizacją urządzenia. Możesz określić maksymalną odległość, która ma znaczenie w przypadku dopasowania adresu do lokalizacji.

Na rysunku poniżej widać, jak można poprosić użytkowników o porównanie wprowadzonego adresu z ich aktualną lokalizacją.

Konwertowanie adresu wpisanego przez użytkownika na współrzędne geograficzne

Gdy użytkownicy wyrażą zgodę na weryfikację adresu (klikając „Potwierdź, że jestem teraz tutaj” na poprzednim rysunku), pierwszym krokiem w porównywaniu adresu z bieżącą lokalizacją jest konwertowanie wpisanego adresu na współrzędne geograficzne.

Jeśli użytkownik wybrał adres za pomocą autouzupełniania miejsc, poproś o podanie Place.Field.LAT_LNG na liście pól autouzupełniania miejsc, jak pokazano w fragmentie kodu Dodawanie widżetu autouzupełniania miejsc, i wywołaj metodę Place.getLatLng(), aby uzyskać współrzędne geograficzne wybranego adresu.

coordinates = place.getLatLng();

Jeśli użytkownik ręcznie wpisał adres lub wprowadził zmiany po wypełnieniu pól przez Autocomplete, użyj usługi geokodowania na Androida lub interfejsu Geocoding API, aby sprawdzić współrzędne odpowiadające temu adresowi.

Przykład

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

Pamiętaj, aby zakodować URL wywołania interfejsu Geocoding API.

Szybki przewodnik po kodowaniu adresów URL: %20 = spacja, %2B = + (plus), %2B = , (przecinek)%2C

Proszenie użytkownika o pozwolenie na uzyskanie lokalizacji urządzenia

Aby uzyskać lokalizację urządzenia użytkownika, musisz poprosić o pozwolenie na włączenie usług lokalizacyjnych. Wykonaj te czynności, korzystając z instrukcji w dokumentacji Androida dotyczących tworzenia aplikacji korzystających z danych o lokalizacji:

• Poproś o dostęp do lokalizacji jako jednorazowego zezwolenia na dokładnym poziomie (ACCESS_FINE_LOCATION).

• Jeśli użytkownik przyzna dostęp do lokalizacji, pobierz jego lokalizację.

• Jeśli użytkownik odmówi udostępnienia dostępu do lokalizacji, odpowiednio obsłuż tę odmowę. Możesz na przykład wyświetlić komunikat o takim treści (zakładając, że nie przechowujesz bieżącej lokalizacji użytkownika):

  „Jeśli nie podasz aplikacji dokładnej lokalizacji, musisz potwierdzić adres e-mail, aby aktywować konto. [OK]"

Na rysunku poniżej znajduje się przykład prośby o przyznanie uprawnień do uzyskiwania lokalizacji urządzenia.

Aby sprawdzić uprawnienia do lokalizacji, przygotuj funkcję uruchamiającą, która będzie nasłuchiwać wyniku z uruchomionej aktywności ActivityResultLauncher. Wywołanie zwrotne z wynikiem zawierać będzie ciąg znaków wskazujący, czy użytkownik udzielił lub odmówił przyznania żądanego uprawnienia.

    // 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");
                }
            });

Następnie sprawdź, czy aplikacja ma już uprawnienie ACCESS_FINE_LOCATION. Jeśli nie, poproś o to użytkownika, uruchamiając aktywność prośby o przyznanie uprawnień za pomocą interfejsu uruchamiania określonego w poprzednim kroku.

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

Po udzieleniu uprawnienia ACCESS_FINE_LOCATION użyj dostawcy z połączonej lokalizacji, aby uzyskać ostatnią znaną lokalizację urządzenia i utworzyć z niej obiekt 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());
                    // ...
                });
    }

Obliczanie odległości między wpisanym adresem a lokalizacją urządzenia

Oblicz odległość między 2 współrzędnymi geograficznymi (wpisane adres i lokalizacja urządzenia) za pomocą matematyki. Otwarta biblioteka narzędziowa Maps SDK na Androida zawiera kilka przydatnych metod obliczania odległości na kuli ziemskiej między dwoma punktami na Ziemi.

Najpierw zainstaluj pakiet SDK Mapy na Androida dla biblioteki narzędziowej, dodając do pliku build.gradle.kts aplikacji następującą zależność:

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.8.2")
}

Następnie w pliku aktywności, po uzyskaniu ostatniej znanej lokalizacji urządzenia, zdefiniuj promień w metrach, aby uznać obie lokalizacje za „pasujące”. Promień powinien być wystarczająco duży, aby uwzględnić zmienność dokładności GPS oraz rozmiar miejsca na podanym przez użytkownika adresie. Na przykład:

private static final double acceptableProximity = 150;

Następnie użyj metody biblioteki narzędzi computeDistanceBetween(), aby obliczyć odległość między lokalizacją urządzenia a adresem wpisanym przez użytkownika. Jeśli odległość mieści się w określonym wyżej promieniu, lokalizacje uznaje się za dopasowane.

// 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
}

(zobacz pełny przykład kodu)

Jeśli adres i lokalizacja się zgadzają, wyświetl potwierdzenie w aplikacji, jak pokazano na poniższym rysunku.

Zezwalaj użytkownikom na wpisywanie adresu na podstawie nazwy firmy lub punktu zainteresowania. Usługa prognozowania „Typuj dalej” działa nie tylko w przypadku adresów, ale możesz też zezwolić użytkownikom na wpisywanie nazw firm lub miejsc. Aby umożliwić wpisywanie adresów i nazwy obiektu, usuń właściwość types z definicji autouzupełniania.

Dostosuj wygląd i sposób działania pola autouzupełniania miejsc, aby pasowały do stylu Twojej witryny. Jeśli wolisz kontrolować wygląd i działanie autouzupełniania w aplikacji zamiast używać widżetu Google, możesz użyć autouzupełniania w miejscach za pomocą kodu programu, aby utworzyć interfejs za pomocą usługi autouzupełniania w miejscach.