1# Managing Location Permissions
2
3
4The **Web** component provides the location permission management capability. You can use [onGeolocationShow()](../reference/apis-arkweb/ts-basic-components-web.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- To obtain 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>
30  <body>
31  <p id="locationInfo">Location information</p>
32  <button onclick="getLocation()">Get Location</button>
33  <script>
34  var locationInfo=document.getElementById("locationInfo");
35  function getLocation(){
36    if (navigator.geolocation) {
37      <!-- Access to the device location by the frontend page -->
38      navigator.geolocation.getCurrentPosition(showPosition);
39    }
40  }
41  function showPosition(position){
42    locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
43  }
44  </script>
45  </body>
46  </html>
47  ```
48
49
50- Application code:
51
52  ```ts
53  // xxx.ets
54  import { webview } from '@kit.ArkWeb';
55  import { BusinessError } from '@kit.BasicServicesKit';
56  import { abilityAccessCtrl, common } from '@kit.AbilityKit';
57
58  let context = getContext(this) as common.UIAbilityContext;
59  let atManager = abilityAccessCtrl.createAtManager();
60
61  // Request the location permission from the user.
62  atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => {
63    console.info('data:' + JSON.stringify(data));
64    console.info('data permissions:' + data.permissions);
65    console.info('data authResults:' + data.authResults);
66  }).catch((error: BusinessError) => {
67    console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
68  })
69
70  @Entry
71  @Component
72  struct WebComponent {
73    controller: webview.WebviewController = new webview.WebviewController();
74
75    build() {
76      Column() {
77        Web({ src: $rawfile('getLocation.html'), controller: this.controller })
78          .geolocationAccess(true)
79          .onGeolocationShow((event) => { // Notification of the location permission request
80            AlertDialog.show({
81              title: 'Location Permission',
82              message:'Grant access to the device location?',
83              primaryButton: {
84                value: 'cancel',
85                action: () => {
86                  if (event) {
87                    event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
88                  }
89                }
90              },
91              secondaryButton: {
92                value: 'ok',
93                action: () => {
94                  if (event) {
95                    event.geolocation.invoke(event.origin, true, false); // Allow access to the device location.
96                  }
97                }
98              },
99              cancel: () => {
100                if (event) {
101                  event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
102                }
103              }
104            })
105          })
106      }
107    }
108  }
109  ```
110