Guida rapida all'implementazione di Registrazione verificata

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Panoramica

Web iOS API

Google Maps Platform è disponibile per il Web (JS, TS), Android e iOS e offre anche API di servizi web per ottenere informazioni su luoghi, indicazioni stradali e distanze. Gli esempi in questa guida sono scritti per una piattaforma, ma vengono forniti i link alla documentazione per l'implementazione su altre piattaforme.

Crealo subito!

Builder rapido in Google Cloud Console ti consente di creare un completamento automatico dei moduli per gli indirizzi utilizzando un'UI interattiva che genera codice JavaScript per te.

Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui convenienza, velocità e sicurezza sono aspettative fondamentali. Quando richiedono qualcosa come una carta di credito, un conto bancario o un prestito, si aspettano che la procedura sia semplice e veloce.

Più utenti devono digitare o inserire dati duplicati, meno probabilità avrai di conservarli come clienti. La creazione di un'esperienza di registrazione rapida, semplice e verificata migliorerà l'esperienza utente, offrendoti un vantaggio nella fidelizzazione degli utenti sul tuo sito.

L'inserimento manuale degli indirizzi può causare la riduzione delle conversioni, errori nei dati CRM e costosi disguidi nella consegna. Registrazione rapida e veloce: la registrazione è più veloce, consigliando all'istante gli indirizzi vicini con pochi tocchi e mostrando l'indirizzo inserito per la conferma visiva, consentendo all'utente di avere la certezza di aver inserito l'indirizzo corretto. La verifica dell'indirizzo dell'utente utilizzando la sua posizione attuale consente inoltre di impedire le frodi e di rafforzare la fiducia degli utenti nei tuoi prodotti e servizi. La verifica può anche aumentare la tua fiducia nel fornire istantaneamente carte bancarie e di credito virtuali.

Questo argomento fornisce indicazioni sull'implementazione per creare un'esperienza di registrazione rapida e verificata con Google Maps Platform. Poiché è molto probabile che gli utenti si registrino sui dispositivi mobili, la maggior parte degli esempi di implementazione in questo argomento è incentrata su Android. Puoi visualizzare l'origine di esempio completa qui. Puoi anche utilizzare gli SDK per iOS per le stesse operazioni.

Il seguente diagramma mostra le API principali coinvolte nella creazione della soluzione (fai clic per ingrandire).

Abilitazione delle API in corso…

Per implementare questi suggerimenti, devi abilitare le API seguenti in Google Cloud Console:

Per ulteriori informazioni sulla configurazione, consulta la guida introduttiva a Google Maps Platform.

Sezioni delle best practice

Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.

  • L'icona del segno di spunta è una best practice fondamentale.
  • L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata, per migliorare la soluzione.
Aggiunta di completamento automatico ai campi di immissione Compila automaticamente un modulo. Aggiungi la funzionalità di digitazione a consumo per migliorare l'esperienza utente su tutte le piattaforme e migliorare la precisione dell'indirizzo con la pressione minima dei tasti.
Conferma visiva dell'indirizzo Consenti agli utenti di visualizzare l'indirizzo sulla mappa per confermare visivamente di aver inserito l'indirizzo corretto.
Confronto tra l'indirizzo inserito dall'utente e la posizione del dispositivo Confronta l'indirizzo selezionato o inserito dell'utente con la posizione attuale del dispositivo per contribuire a determinare che si trova all'indirizzo indicato. Per far funzionare questa funzionalità, gli utenti devono essere a casa al momento della registrazione.
Suggerimenti per migliorare ulteriormente la funzionalità Verifica rapida e registrazione Puoi migliorare ulteriormente l'inserimento dell'indirizzo con aggiunte come la personalizzazione dell'aspetto del widget Autocomplete o permettendo agli utenti di selezionare il nome di un'attività o un punto di riferimento come indirizzo.

Aggiunta del completamento automatico ai campi di immissione

In questo esempio vengono utilizzati: Places SDK for Android Disponibile anche: iOS | JavaScript

Place Autocomplete può semplificare l'inserimento degli indirizzi nella tua applicazione, offrendo tassi di conversione più elevati e un'esperienza senza interruzioni per i tuoi clienti. Autocomplete fornisce un singolo campo di immissione rapida con una previsione di indirizzo di tipo "head-ahead", che può essere utilizzata per compilare automaticamente un modulo di indirizzo di registrazione. Incorporando la funzionalità di completamento automatico dei luoghi nel flusso di registrazione, puoi:

  • Riduci gli errori di inserimento dell'indirizzo.
  • Riduci il numero di passaggi della procedura di registrazione.
  • Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
  • Riducono notevolmente i tasti e il tempo totale necessario al cliente per registrarsi.

Quando l'utente seleziona la casella di immissione del completamento automatico e inizia a digitare, viene visualizzato un elenco di previsioni di indirizzi.

Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la posizione. L'applicazione può quindi compilare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato nella figura seguente.

Video: Migliorare i moduli di indirizzo con il completamento automatico del luogo

Moduli di indirizzi

Android

iOS

Web

Google Maps Platform fornisce un widget Place Autocomplete per le piattaforme per dispositivi mobili e il Web. Il widget, mostrato nelle figure precedenti, fornisce una finestra di dialogo di ricerca con funzionalità di completamento automatico integrato che puoi persino ottimizzare per la ricerca nell'ambito delle località.

In questa sezione viene descritto come implementare la funzionalità di completamento automatico del luogo per la registrazione verificata e rapida.

Aggiungere il widget Completamento automatico di un luogo

In Android, puoi aggiungere il widget completamento automatico utilizzando un intent a completamento automatico che avvia il completamento automatico di Place dal campo di immissione della riga indirizzo 1, in cui l'utente inizierà a inserire il proprio indirizzo. Quando iniziano a digitare, potranno selezionare il proprio indirizzo dall'elenco delle previsioni del completamento automatico.

Per prima cosa, prepara un Avvio app utilizzando ActivityResultLauncher, che ascolterà un risultato dell'attività avviata. Il callback del risultato conterrà un oggetto Place che corrisponde all'indirizzo che l'utente seleziona dalle previsioni del completamento automatico.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) 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");
                }
            });

Definisci quindi i campi, le proprietà di posizione e tipo dell'intent per il completamento automatico dei luoghi e crealo con Autocomplete.IntentBuilder. Infine, avvia l'intent utilizzando il ActivityResultLauncher definito nell'esempio di codice precedente.

    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)
                .setCountry("US")
                .setTypeFilter(TypeFilter.ADDRESS)
                .build(this);
        startAutocomplete.launch(intent);
    }

Gestione dell'indirizzo restituito dal completamento automatico di Place

La definizione di ActivityResultLauncher in precedenza definisce anche cosa fare quando il risultato dell'attività viene restituito nel callback. Se l'utente ha selezionato una previsione, questa verrà pubblicata nell'intent contenuto nell'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder, il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Place da questo oggetto.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) 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");
                }
            });

Da qui, chiama Place.getAddressComponents() e associa ogni componente dell'indirizzo al campo di immissione corrispondente nel modulo dell'indirizzo, completando il campo con il valore del luogo selezionato dell'utente.

L'acquisizione dei dati degli indirizzi dalla previsione anziché di un indirizzo inserito manualmente contribuisce a garantire l'accuratezza dell'indirizzo, che l'indirizzo è noto e a cui può essere recapitato e che riduce le sequenze di tasti dell'utente.

Considerazioni sull'implementazione del completamento automatico del luogo

Se vuoi utilizzare il completamento automatico, esistono diverse opzioni che consentono una flessibilità flessibile rispetto all'implementazione. Puoi utilizzare una combinazione di servizi per ottenere esattamente ciò di cui hai bisogno per una località nel modo corretto.

  • Per un modulo INDIRIZZO, imposta il parametro type su address per limitare le corrispondenze agli indirizzi completi. Scopri di più sui tipi supportati nelle richieste di completamento automatico di Place.

  • Imposta le limitazioni e i bias appropriati se non devi eseguire una ricerca in tutto il mondo. Esistono diversi parametri che possono essere utilizzati per bias o limitare qualsiasi corrispondenza a specifiche aree geografiche.

    • Utilizza RectangularBounds per impostare i limiti rettangolari da vincolare per un'area, utilizza setLocationRestriction() per assicurarti che vengano restituiti solo gli indirizzi in tali aree.

    • Utilizza setCountries() per limitare le risposte a un determinato insieme di paesi.

  • Lascia i campi modificabili nel caso in cui alcuni campi non vengano inclusi nella corrispondenza e, se necessario, consenti ai clienti di aggiornare l'indirizzo. Poiché la maggior parte degli indirizzi restituiti dal completamento automatico di un luogo non contiene numeri di sottoprestazioni come i numeri di appartamento, interno o interno, puoi spostare lo stato attivo sulla riga indirizzo 2 per incoraggiare l'utente a inserire tali informazioni, se necessario.

Fornisci conferma visiva dell'indirizzo

In questo esempio vengono utilizzati: Maps SDK for Android Disponibile anche: iOS | JavaScript

Come parte dell'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva dell'indirizzo su una mappa. Ciò garantisce agli utenti un'ulteriore garanzia che l'indirizzo è corretto.

La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto in corrispondenza dell'indirizzo inserito.

Il seguente esempio segue i passaggi di base per aggiungere una mappa in Android. Per ulteriori dettagli, consulta la documentazione.

Aggiunta di SupportMapFragment in corso...

Innanzitutto, aggiungi un frammento SupportMapFragment al file XML di layout.

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

Quindi, aggiungi il frammento in modo programmatico se non esiste ancora.

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

Recupero di un handle nel frammento e registrazione del callback

  1. Per ottenere un handle al frammento, chiama il metodo FragmentManager.findFragmentById e passalo l'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento in modo dinamico, salta questo passaggio perché hai già recuperato il punto di manipolazione.

  2. Chiama il metodo getMapAsync per impostare il callback sul frammento.

Ad esempio, se hai aggiunto il frammento in modo statico:

Java


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

      

Kotlin


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

      

Stili e aggiunta di un indicatore alla mappa

Quando la mappa è pronta, imposta lo stile, centra la fotocamera e aggiungi un indicatore alle coordinate dell'indirizzo inserito. Il seguente codice utilizza gli stili definiti in un oggetto JSON oppure puoi caricare un ID mappa che è stato definito con lo stile di Maps basato su cloud.

    @Override
    public void onMapReady(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));
    }

(Vedi il codice completo)

Disattivazione dei controlli della mappa

Per mantenere la mappa semplice mostrando la posizione senza ulteriori controlli della mappa (ad esempio bussola, barra degli strumenti o altre funzionalità integrate), valuta la possibilità di disattivare i controlli non necessari. Su Android un'altra opzione è attivare la modalità Lite per fornire interattività limitata.

Confronto tra l'indirizzo inserito dall'utente e la posizione del dispositivo

ottenere un certificato di residenza Fornendo modi digitali per verificare gli indirizzi degli utenti puoi fornire un'esperienza di registrazione più rapida e senza problemi.

La sicurezza è di importanza capitale per ottenere un controllo dell'indirizzo, in particolare con una procedura di registrazione digitale. In questa sezione vengono fornite indicazioni ed esempi per verificare se la località di un utente durante la registrazione corrisponde all'indirizzo inserito.

La procedura di confronto tra l'indirizzo inserito e la posizione di un dispositivo prevede i seguenti passaggi:

  1. Convertire l'indirizzo inserito dall'utente in coordinate geografiche.
  2. Chiedi all'utente l'autorizzazione per ottenere la posizione del suo dispositivo.
  3. Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo. Puoi determinare la distanza massima che viene conteggiata per una corrispondenza di indirizzo e località.

La seguente figura mostra un esempio di come potresti chiedere agli utenti di confrontare l'indirizzo che hanno inserito con la loro posizione attuale.

Conversione dell'indirizzo inserito dall'utente in coordinate geografiche

In questo esempio vengono utilizzati: Places SDK for Android Disponibile anche: iOS | JavaScript | API Geocoding

Dopo che gli utenti hanno accettato di effettuare la verifica dell'indirizzo (toccando "Verifica subito" nella figura precedente), il primo passaggio per confrontare l'indirizzo con la posizione corrente consiste nel convertire l'indirizzo inserito in coordinate geografiche.

Se l'utente ha selezionato il suo indirizzo con Place Autocomplete, assicurati di richiedere Place.Field.LAT_LNG nell'elenco dei campi Place Autocomplete, come mostrato nello snippet di codice Aggiungere il widget Place Autocomplete e chiama il metodo Place.getLatLng() per ottenere le coordinate geografiche dell'indirizzo selezionato.

coordinates = place.getLatLng();

Se l'utente ha inserito manualmente l'indirizzo o apportato modifiche dopo che il completamento automatico è stato compilato nei campi, utilizza il servizio Geocoder Android o l'API Geocoding per cercare le coordinate corrispondenti.

Esempio

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

Assicurati di codificare l'URL per chiamare l'API Geocoding.

Riferimento rapido per la codifica dell'URL: %20 = spazio, %2B = + (più), %2C = , (virgola)

Richiesta all'utente dell'autorizzazione per ottenere la posizione del suo dispositivo

Per ottenere la posizione del dispositivo dell'utente, devi richiedere l'autorizzazione dell'utente per abilitare i servizi di geolocalizzazione. Utilizzando le indicazioni nella documentazione di Android sulla creazione di app basate sulla posizione, implementa il seguente flusso:

  • Richiedi l'autorizzazione di accesso alla posizione, in qualità di concessione una tantum, a un livello preciso (ACCESS_FINE_LOCATION).

  • Se l'utente concede l'accesso alla posizione, recupera la sua posizione.

  • Se l'utente rifiuta l'accesso alla posizione, gestisci il rifiuto con pazienza. Ad esempio, potresti specificare il seguente tipo di messaggio (supponendo che tu non stia memorizzando la posizione corrente dell'utente):

    "Se non vuoi far sapere all'app la tua posizione esatta, dovrai verificare per posta per attivare l'account. [OK]

La figura seguente mostra agli utenti un esempio di richiesta di autorizzazione per ottenere la posizione del dispositivo.

Per verificare la presenza dell'autorizzazione di accesso alla posizione, prepara un'utilità di avvio attività che ascolterà un risultato dell'attività avviata con ActivityResultLauncher. Il callback del risultato conterrà una stringa che indica se l'utente ha concesso o negato l'autorizzazione richiesta.

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

Quindi, controlla se l'app ha già l'autorizzazione ACCESS_FINE_LOCATION. In caso contrario, chiedi all'utente di avviare l'attività di richiesta di autorizzazione utilizzando Avvio applicazioni definito nel passaggio precedente.

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

Una volta concessa l'autorizzazione ACCESS_FINE_LOCATION, utilizza il fornitore della posizione fondata per recuperare l'ultima posizione nota del dispositivo e creare un oggetto LatLng da questa.

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

Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo

Utilizza la matematica per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). L'SDK Maps per Android Utility Library open source prevede alcuni utili metodi per calcolare la distanza sferica tra due punti della Terra.

Innanzitutto, installa l'SDK Maps per Android Utility Library aggiungendo la seguente dipendenza al file build.gradle dell'app:

dependencies {
    implementation 'com.google.maps.android:android-maps-utils:2.3.0'

}

Quindi, tornando al file dell'attività dopo aver trovato l'ultima posizione nota del dispositivo, definisci un raggio in metri per considerare le due posizioni come "con corrispondenze". Il raggio deve essere abbastanza grande da tenere conto della variabilità nella precisione del GPS e delle dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:

private static final double acceptableProximity = 150;

Quindi, utilizza il metodo della libreria di utilità computeDistanceBetween() per calcolare la distanza tra la posizione del dispositivo e la località dell'indirizzo inserito dall'utente. Se la distanza rientra nel raggio definito sopra, considera le località corrispondenti.

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

(Vedi il codice completo)

Se l'indirizzo e la località corrispondono, mostra una conferma nell'app, come mostrato nella figura seguente.

Suggerimenti per migliorare ulteriormente la funzionalità Verifica rapida e registrazione

Consenti agli utenti di inserire un indirizzo in base al nome di un'attività o di un punto d'interesse. Il servizio di previsione "avanti' non solo funziona per gli indirizzi, ma puoi anche scegliere di consentire agli utenti di inserire nomi di attività o punti di riferimento. Per consentire l'inserimento sia degli indirizzi sia dei nomi delle strutture, rimuovi la proprietà types dalla definizione di completamento automatico.

Personalizza l'aspetto della casella di completamento automatico di Place in base allo stile del tuo sito web. Se preferisci controllare l'aspetto del Place Autocomplete nella tua app anziché utilizzare il widget di Google, puoi utilizzare Place Autocomplete Programmatic per potenziare l'interfaccia utente che crei con il servizio Place Autocomplete.