• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Managing Location Permissions
2
3
4The **Web** component provides the location permission management capability (<!--RP1-->[Privacy Protection](../../device-dev/security/security-privacy-protection.md)<!--RP1End-->). You can use [onGeolocationShow()](../reference/apis-arkweb/arkts-basic-components-web-events.md#ongeolocationshow) to manage the location permission specific to a website. Based on the API response, the **Web** component determines whether to grant the location permission to the frontend page.
5
6- Before obtaining the device geolocation, add location-related permissions to the **module.json5** file. For details, see [Declaring Permissions](../security/AccessToken/declare-permissions.md).
7
8   ```
9   "requestPermissions":[
10      {
11        "name" : "ohos.permission.LOCATION"
12      },
13      {
14        "name" : "ohos.permission.APPROXIMATELY_LOCATION"
15      },
16      {
17        "name" : "ohos.permission.LOCATION_IN_BACKGROUND"
18      }
19    ]
20   ```
21
22In the following example, when a user clicks the **Get Location** button on the frontend page, the **Web** component notifies the application of the location permission request in a dialog box.
23
24
25- Frontend page code:
26
27  ```html
28  <!DOCTYPE html>
29  <html lang="en">
30  <head>
31      <meta charset="UTF-8">
32      <meta name="viewport" content="width=device-width, initial-scale=1.0">
33      <title>Location Information</title>
34  </head>
35  <body>
36      <p id="locationInfo">Location information</p>
37      <button onclick="getLocation()">Get Location</button>
38
39      <script>
40          var locationInfo=document.getElementById("locationInfo");
41          function getLocation(){
42              if (navigator.geolocation) {
43                  // Access to the device location by the frontend page
44                  navigator.geolocation.getCurrentPosition(showPosition);
45              }
46          }
47          function showPosition(position){
48              locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
49          }
50      </script>
51  </body>
52  </html>
53  ```
54
55
56- Application code:
57
58  ```ts
59  // xxx.ets
60  import { webview } from '@kit.ArkWeb';
61  import { BusinessError } from '@kit.BasicServicesKit';
62  import { abilityAccessCtrl, common } from '@kit.AbilityKit';
63
64  let atManager = abilityAccessCtrl.createAtManager();
65
66  @Entry
67  @Component
68  struct WebComponent {
69    controller: webview.WebviewController = new webview.WebviewController();
70    uiContext: UIContext = this.getUIContext();
71
72    aboutToAppear(): void {
73      let context : Context | undefined = this.uiContext.getHostContext() as common.UIAbilityContext;
74      // Request the location permission from the user.
75      atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => {
76        console.info('data:' + JSON.stringify(data));
77        console.info('data permissions:' + data.permissions);
78        console.info('data authResults:' + data.authResults);
79      }).catch((error: BusinessError) => {
80        console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
81      })
82    }
83
84    build() {
85      Column() {
86        Web({ src: $rawfile('getLocation.html'), controller: this.controller })
87          .geolocationAccess(true)
88          .onGeolocationShow((event) => { // Notification of the location permission request
89             this.uiContext.showAlertDialog({
90              title: 'Location Permission',
91              message:'Grant access to the device location?',
92              primaryButton: {
93                value: 'cancel',
94                action: () => {
95                  if (event) {
96                    event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
97                  }
98                }
99              },
100              secondaryButton: {
101                value: 'ok',
102                action: () => {
103                  if (event) {
104                    event.geolocation.invoke(event.origin, true, false); // Allow access to the device location.
105                  }
106                }
107              },
108              cancel: () => {
109                if (event) {
110                  event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
111                }
112              }
113            })
114          })
115      }
116    }
117  }
118  ```
119