> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-fix-docs-5528-php-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0でTesselデバイスを認証および認可する

> Auth0でTesselデバイスを認証および認可する方法について説明します。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

[Tessel](https://tessel.io)は優れたボードです。強力なハードウェア仕様や高い拡張性に加えて、Javascriptでもプログラミングすることができます。Kickstarterで発表があった直後から、サポートを表明し、早く手に入れたいと首を長くして待っていました。

<Frame>
  <img src="https://mintcdn.com/docs-dev-fix-docs-5528-php-updates/edu3KASxfgCs4dqF/docs/images/ja-jp/cdy7uua7fh8z/5mSnxvHvgWrHtCwk35z4Db/43577ffa6c21d71f0de472c331dfe1b1/TM-00-04-ports.png?fit=max&auto=format&n=edu3KASxfgCs4dqF&q=85&s=154dc21c6112bf2f59f4db36513bf16b" alt="Tessel - Tesselポートの図" width="750" height="511" data-path="docs/images/ja-jp/cdy7uua7fh8z/5mSnxvHvgWrHtCwk35z4Db/43577ffa6c21d71f0de472c331dfe1b1/TM-00-04-ports.png" />
</Frame>

そして、ついにその時がやってきました。Auth0からトークンを取得し、APIを呼び出して、最初のプログラムを書くことができるのです。

Tesselの目標は、Javascriptとの完全な互換性を実現することです。コアNodeモジュールの大部分も機能しますが、すべてではありません。詳細については、[GithubのTessleドキュメント](https://github.com/tessel/docs/blob/master/compatibility.md)を参照してください。

## サンプル

このサンプルはいたって単純です。

1. デバイス資格情報を使用して、Auth0でResource Owner（リソース所有者）エンドポイントを呼び出します。
2. トークンを受け取ります。
3. トークンを使ってAPIを呼び出します。

<Frame>
  <img src="https://mintcdn.com/docs-dev-fix-docs-5528-php-updates/GIkdxZNhwwEDAWNV/docs/images/ja-jp/cdy7uua7fh8z/3iyOfO564gkbyQSsvTJE9c/ad1d1427f80475be12ce1adec9cf892c/2023-09-22_13-14-21.png?fit=max&auto=format&n=GIkdxZNhwwEDAWNV&q=85&s=c031605ab2c184b026fd2c61e919f2cd" alt="Tessel - TesselからAuth0へのフロー図" width="730" height="187" data-path="docs/images/ja-jp/cdy7uua7fh8z/3iyOfO564gkbyQSsvTJE9c/ad1d1427f80475be12ce1adec9cf892c/2023-09-22_13-14-21.png" />
</Frame>

export const codeExample = `var http = require('https');
var tessel = require('tessel');

tessel.syncClock(function () {

  var device_id = 'tessel-01';
  var password = 'THE TESSEL PASSWORD';

  authenticate(device_id, password, function(e,token){

    if(e) return console.log("Error:" + e);

    getDeviceProfile(token.access_token, function(e, profile){
      console.log("Device profile:");
      console.log(profile);
    });
  });

  function getDeviceProfile(token, done){
    request('{yourDomain}',
          '/userinfo',
          'GET',
          {
          "Content-type": "application/json",
          "Authorization": "Bearer " + token
        },
        null,
        function(e,response){
          if(e) return done(e);
          done(null, JSON.parse(response));
        });
  }

  function authenticate(device_id, password, done)
  {
    request('{yourDomain}',
          '/oauth/ro',
          'POST',
          {
          "Content-type": "application/json",
        },
        JSON.stringify({
            client_id:   '{yourClientId}',
            username:    device_id,
            password:    password,
            connection:  'devices',
            grant_type:  "password",
            scope: 'openid'
          }),
          function(e,response){
            if(e) return done(e);
            done(null, JSON.parse(response));
        });
  }

  function request(host, path, method, headers, body, done){
    var options = {
      hostname: host,
      path: path,
      method: method,
      headers: headers
    };

    var req = http.request(options, function(res) {
      res.setEncoding('utf8');

      var response = "";

      res.on('data', function (chunk) {
        response += chunk;
      });

      res.on('end', function(){
        done(null, response);
        });
    });

    req.on('error', function(e) {
      done(e);
    });

    if( body ) req.write(body);
    req.end();
  }
});`;

<AuthCodeBlock children={codeExample} language="javascript" />

コードに関する注目すべき点：

1. Nodeと99%の互換性があります（唯一のデバイス固有モジュールは`tessel`で、これは適切な時間基準でSSLの呼び出しが行われることを確認するためだけに使用します）。
2. `request`関数は、`http`モジュール関数の簡単なラッパーです。`request`モジュールはTesselでは現在機能しません。

リソース所有者のエンドポイントでは資格情報（ユーザー名/パスワードなど）が必要であるため、Auth0に接続されたバックエンドユーザーストアは、これをサポートする必要があります（データベース接続やActive Directoryなど）。

## Tesselの設定

* `tessel update`を実行し、SSL対応の最新のファームウェアをインストールしてください。
* Webに接続する必要があります。WiFiの設定は`tessel wifi`コマンドを使って行います。
* 資格情報（`username`/`password`など）を送信する場合には、必ず安全なネットワーク上で行います。

## Summary（概要）

Tesselは多くの可能性を秘めた優れたボードです。このサンプルでは、これAuth0に接続することがどれほど簡単かをご紹介します。