obniz を特定の人だけアクセスできるようにする

# はじめに
[obniz](https://obniz.io/ja/)は、ハードウェアをあたかもWebサイトの要素の一つであるかのように制御することができるマイコン開発ボードです。
購入して電源を繋いで、Wi-Fiのパスワードを入力すれば、専用のobniz Cloudに接続され、あとはHTML+JavaScriptなどでプログラムを記述し、スマートフォンやパソコンのブラウザから制御することができます。
ファームウェアの書き換えが不要なので、I2C通信など、センサの制御をちょっと試したいときは、ブラウザで再読み込みするだけで良いのでとても便利に使っています。
obniz OS搭載のM5StickCなら、6軸センサや赤外線LEDも搭載されているので、マイコン開発がほぼ遠隔でできてしまいますね。

obniz Cloudのリポジトリでは、HTMLやJavaScriptのプログラムを書いて保存することができるようになっていて、**公開**または**非公開**から選べるようになっています。非公開の場合は、自分のobniz アカウントでログインする必要があります。

今回は、自分と、共有した相手だけobnizを制御できるようにしたいと思い、比較的簡単に実現する方法をまとめます。
**今回の方法では、必ずしも安全というわけではなく、セキュリティは弱い方法です。あくまでも簡易的に実装してみた方法ですので、今回のコードを使用される場合は、その点を必ずご承知おきください。**

# obniz のアクセストークン
obniz 初回起動時の状態では、8桁のobniz IDを入力すれば、誰でもそのobnizを制御できる状態になっています。

https://docs.obniz.io/ja/guides/common/connection/
に記載されているように、[obniz 開発者コンソールのデバイス](https://obniz.io/ja/console/devices)から、アクセストークンを発行することができます。

アクセストークンを発行すれば、以下のように正しいアクセストークンを入力しなければ、obnizに接続することができなくなります。

```javascript:index.html
new Obniz('1234-5678', {access_token: 'your token here'});
```

アクセストークンは、更新や削除もできるようになっています。
そこでこのアクセストークンを、HTMLの外から入力できるようにしてあげます。

# プロンプトと Cookie による方法
`window.prompt` と Cookie を利用して、初回接続時にはプロンプトを表示し、アクセストークンの入力を促します。一度接続できれば、アクセストークンを Cookie に保存し、次回以降は Cookie から呼び出して自動的に接続します。
[JavaScript Cookie](https://github.com/js-cookie/js-cookie)を使用しています。`js.cookie.js` へのパスは適宜書き換えてください。

```html:index.html
  <script src="/path/to/js.cookie.js"></script>
  <script>
    var access_token;    
    if(Cookies.get('obniz_access_token')){
      access_token=Cookies.get('obniz_access_token');
    }else{
      access_token=window.prompt("Input token", "");
    }

    var obniz = new Obniz("XXXX-XXXX", {access_token});

    obniz.onconnect = async function () {
      Cookies.set('obniz_access_token', access_token, { expires: 7 });
```

この方法であれば、URLとobnizのアクセストークンを共有し、URLにアクセスしてもらって、アクセストークンをコピペしてもらえば良いですね。

# URLパラメータによる方法
ただURLにアクセスするだけで繋げられる方法です。共有するURLは、通常のobniz Cloudの実行URLの後に、`?access_token=XXXXXXXXXXXXXXX`のような形で、obniz のアクセストークンを繋げたものになります。

```html:index.html
    <script>
      var queryStr = window.location.search;
      var queryObj = {};
      if(queryStr){
        queryStr = queryStr.substring(1);
        let paramArr = queryStr.split('&');
        paramArr.forEach(p=>{
          let elem=p.split('=');
          queryObj[decodeURIComponent(elem[0])]=decodeURIComponent(elem[1]);
        });
      }

      var access_token=queryObj.access_token;
      var obniz = new Obniz("OBNIZ_ID_HERE", {access_token});
```

`http://obniz.io/users/XXX/repo/XXXXX.html?access_token=XXXXXXXXXXXXXXX`
のようなURLとなります。

# 2つの方法を統合
2つの方法を統合し、一部修正しました。

URLパラメータにあればそれを使い、接続できればCookieに保存します。
URLパラメータになければ、Cookieを呼び出し、Cookieにもなければ、プロンプトで入力を促します。

```html:index.html
  <script src="/path/to/js.cookie.js"></script>
  <script>
      var queryStr = window.location.search;
      var queryObj = {};
      if(queryStr){
        queryStr = queryStr.substring(1);
        let paramArr = queryStr.split('&');
        paramArr.forEach(p=>{
          let elem=p.split('=');
          queryObj[decodeURIComponent(elem[0])]=decodeURIComponent(elem[1]);
        });
      }

      var access_token=queryObj.access_token;
      if(!access_token){
        access_token=Cookies.get('obniz_access_token');
      }
      if(!access_token){
          access_token=window.prompt("Input token", "");
      }

      var obniz = new Obniz("XXXX-XXXX", {access_token});

      obniz.onconnect = async function () {
        Cookies.set('obniz_access_token', access_token, { expires: 7 });
```

# 最後に
この方法を使えば、obniz のプログラムを友だちに共有しやすくなりますね！
Let's みんなで obniz!