Subterranean Flower

Permissions APIでブラウザからの各種機能へのアクセス権限を確認・要求する

Author
古都こと
ふよんとえんよぷよぐやま!!!

ウェブの発展に伴い、ブラウザにも様々な機能へアクセスするAPIが整備されてきました。現在では、位置情報や加速度センサーなど、従来ならネイティブアプリでしか利用できなかった機能も、ブラウザ上から使用できるようになっています。

そして、それらの機能を使用するには、当然パーミッション(アクセス権限)が必要になります。しかしパーミッションの確認・要求の方法はAPIによって異なっており、開発者を大きく混乱させてきました。

そこで現在策定中なのがPermissions APIです。Permissions APIを使うことで、簡単にパーミッションを得ることができるようになります。

Permissions APIについて

Permissions APIは、ブラウザのパーミッションを統一的に扱うことができるAPIです。従来ではAPIごとに異なる方法でのパーミッションの取得が必要でしたが、Permissions APIを使うことで、一貫性をもってパーミッションを管理することができます。

最新の仕様は以下になります:

実装状況

Permissions APIは現在策定中のAPIで、ブラウザ側の実装はまだ出揃っていません。

Permissions APIの各機能の実装状況は以下のようになります:

  • パーミッションを確認する
    • Chrome
    • Firefox
  • パーミッションを要求する
    • なし
  • パーミッションを取り消す
    • Firefox(フラグ付き)

パーミッションを確認する – query

Permissions APIの最も基本的な使い方は、現在のパーミッションを確認することです。この機能はChromeとFirefoxが既に実装済みです。

パーミッションを確認するには、navigator.permissions.queryを呼び出します。例えば位置情報のパーミッションを確認するには以下のようにします:

navigator.permissions.query({name:'geolocation'});

ここでqueryはPromiseを返します。このPromiseはPermissionStatusオブジェクトとして解決されます。

navigator.permissions.query({name:'geolocation'})
    .then((result) => {
      // なんらかの処理。
    });

PermissionStatusオブジェクトにはstateプロパティとonchangeプロパティがあります。

stateプロパティは’granted’、’prompt’、’denied’のいずれかの値になります。これらの値の意味は以下の通りです:

  • ‘granted’ – パーミッションを得ており、使用可能です。
  • ‘prompt’ – ユーザーの確認が必要です。
  • ‘denied’ – パーミッションがなく、使用不可能です。

これらの値によって処理を変えることで、パーミッションに応じた処理が可能になります。例えば以下のようにします:

navigator.permissions.query({name:'geolocation'})
    .then((result) => {
      if(result.state == 'granted') {
        console.log('使用できます。')
      } else if(result.state == 'prompt') {
        console.log('確認が必要です。')
      } else if (result.state == 'denied') {
        console.log('許可されていません。')
      }
      
      result.onchange = () => {
        console.log('パーミッションが変更されました。');
      }
    });

問い合わせできるパーミッションの種類

位置情報だけではなく、以下のパーミッションを確認することができます。各パーミッションの詳細は省きます。

  • geolocation
  • notifications
  • push
  • midi
  • camera
  • microphone
  • speaker
  • device-info
  • background-sync
  • bluetooth
  • persistent-storage
  • ambient-light-sensor
  • accelerometer
  • gyroscope
  • magnetometer
  • clipboard

より詳しいパーミッションを確認する

パーミッションによっては、単に名前だけでなく、より詳しい情報が必要になることがあります。

例えばWebMIDI APIでは、sysex機能が重要になることがあります。このとき、sysex有りでのパーミッションを確認するには以下のようにします:

navigator.permissions.query({name: 'midi', sysex: true});

このようにしてname以外のオプションを付与することによって、詳細なパーミッションを問い合わせることができます。

複数のパーミッションを同時に確認する

複数のパーミッションを同時に確認したい場合、Promise.allを使用してください。

Promise.all([
  navigator.permissions.query({ name: 'geolocation' }),
  navigator.permissions.query({ name: 'notifications' })
])
.then(([geolocationStatus, notificationStatus]) => {
  console.log(geolocationStatus.state);
  console.log(notificationStatus.state);
});

パーミッションを要求する – request

パーミッションを要求するには、navigator.permissions.requestを使用します。requestを実行すると、確認ダイアログが表示されます。これを実装しているブラウザは、まだありません。

使用方法はqueryと同じです。

navigator.permissions.request({name: 'geolocation'})
    .then((result) => {
      console.log(result.state);
    });

queryのときと同様に、より詳しいパーミッションを得るためには、name以外の値も指定します。

パーミッションを取り消す – revoke

パーミッションを取り消してデフォルトの値に戻すには、navigator.permissions.revokeを使用します。これはFirefoxがフラグ付きで実装済みです。

navigator.permissions.revoke({name: 'geolocation'})
    .then((result) => {
      console.log(result.state);
    });

使用方法はqueryやrequestと同じです。取り消されたパーミッションは一般的には’prompt’に戻ります。