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. To obtain the device location, you need to declare the [ohos.permission.LOCATION](../security/AccessToken/request-user-authorization.md), [ohos.permission.APPROXIMATELY_LOCATION](../security/AccessToken/request-user-authorization.md), and [ohos.permission.LOCATION_IN_BACKGROUND](../security/AccessToken/request-user-authorization.md) permissions, and enable on the device the location permission for the application and the location information for the control panel. For details, see [Geolocation](../reference/apis-location-kit/js-apis-geolocation.md).
5
6
7In 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.
8
9
10- Frontend page code:
11
12  ```html
13  <!DOCTYPE html>
14  <html>
15  <body>
16  <p id="locationInfo">Location information</p>
17  <button onclick="getLocation()">Get Location</button>
18  <script>
19  var locationInfo=document.getElementById("locationInfo");
20  function getLocation(){
21    if (navigator.geolocation) {
22      <!-- Access to the device location by the frontend page -->
23      navigator.geolocation.getCurrentPosition(showPosition);
24    }
25  }
26  function showPosition(position){
27    locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
28  }
29  </script>
30  </body>
31  </html>
32  ```
33
34
35- Application code:
36
37  ```ts
38  // xxx.ets
39  import { webview } from '@kit.ArkWeb';
40  import { BusinessError } from '@kit.BasicServicesKit';
41  import { abilityAccessCtrl, common } from '@kit.AbilityKit';
42
43  let context = getContext(this) as common.UIAbilityContext;
44  let atManager = abilityAccessCtrl.createAtManager();
45
46  // Request the location permission from the user.
47  atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => {
48    console.info('data:' + JSON.stringify(data));
49    console.info('data permissions:' + data.permissions);
50    console.info('data authResults:' + data.authResults);
51  }).catch((error: BusinessError) => {
52    console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
53  })
54
55  @Entry
56  @Component
57  struct WebComponent {
58    controller: webview.WebviewController = new webview.WebviewController();
59
60    build() {
61      Column() {
62        Web({ src: $rawfile('getLocation.html'), controller: this.controller })
63          .geolocationAccess(true)
64          .onGeolocationShow((event) => { // Notification of the location permission request
65            AlertDialog.show({
66              title: 'Location Permission',
67              message:'Grant access to the device location?',
68              primaryButton: {
69                value: 'cancel',
70                action: () => {
71                  if (event) {
72                    event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
73                  }
74                }
75              },
76              secondaryButton: {
77                value: 'ok',
78                action: () => {
79                  if (event) {
80                    event.geolocation.invoke(event.origin, true, false); // Allow access to the device location.
81                  }
82                }
83              },
84              cancel: () => {
85                if (event) {
86                  event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
87                }
88              }
89            })
90          })
91      }
92    }
93  }
94  ```
95