web-dev-qa-db-ja.com

AWS IoTを使用してWebブラウザーとメッセージを送受信する方法

Amazon Webサービスモノのインターネット(AWS IoT)を使用してWebブラウザーとの間でメッセージを送信しようとしています(例:AWS IoTがJavaScriptをサポートしている場合、expectこれはpossible...

AWS IoTドキュメントで検索しましたが、only サーバー側の例( AWSシークレット/キーを公開しています...)

ブラウザでWebSockets/MQTTを介してAWS IoTを使用してメッセージを送受信するための適切なworkingの例またはチュートリアルはありますか(例:AWS Cognitoによる認証)?ありがとう!

32
Jack Carlisle

以下は、JSのCognito IDプールを使用して、サブスクリプションに接続、公開、および反応するサンプルです。

// Configure Cognito identity pool
AWS.config.region = 'us-east-1';
var credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-1:your identity pool guid',
});

// Getting AWS creds from Cognito is async, so we need to drive the rest of the mqtt client initialization in a callback
credentials.get(function(err) {
    if(err) {
        console.log(err);
        return;
    }
    var requestUrl = SigV4Utils.getSignedUrl('wss', 'data.iot.us-east-1.amazonaws.com', '/mqtt',
        'iotdevicegateway', 'us-east-1',
        credentials.accessKeyId, credentials.secretAccessKey, credentials.sessionToken);
    initClient(requestUrl);
});

function init() {
  // do setup stuff
}

// Connect the client, subscribe to the drawing topic, and publish a "hey I connected" message
function initClient(requestUrl) {
    var clientId = String(Math.random()).replace('.', '');
    var client = new Paho.MQTT.Client(requestUrl, clientId);
    var connectOptions = {
        onSuccess: function () {
            console.log('connected');

            // subscribe to the drawing
            client.subscribe("your/mqtt/topic");

            // publish a lifecycle event
            message = new Paho.MQTT.Message('{"id":"' + credentials.identityId + '"}');
            message.destinationName = 'your/mqtt/topic';
            console.log(message);
            client.send(message);
        },
        useSSL: true,
        timeout: 3,
        mqttVersion: 4,
        onFailure: function () {
            console.error('connect failed');
        }
    };
    client.connect(connectOptions);

    client.onMessageArrived = function (message) {

        try {
            console.log("msg arrived: " +  message.payloadString);
        } catch (e) {
            console.log("error! " + e);
        }

    };
}

credentials.get呼び出しのドキュメント、ここ

IAMロールのサブスクライブ/パブリッシュも許可することを忘れないでください。サンプルを次に示します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "iot:Connect"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": "iot:Receive",
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": "iot:Subscribe",
            "Resource": [
                "arn:aws:iot:us-east-1::your/mqtt/topic"
            ]
        },
        {
            "Effect": "Allow",
            "Action": "iot:Publish",
            "Resource": [
                "arn:aws:iot:us-east-1::your/mqtt/topic"
            ]
        }
    ]
}
25
Kyle Roche

他の誰かが解決策を探している場合: チュートリアルはこちら AWS IOT上のServerlessとWebsocketを使用して、ReactJSフロントエンドにリアルタイムの更新を取得する方法を簡単なチャットアプリを介して示します。チュートリアルのソースコードは利用可能です Githubで

2
Chris

ブラウザにAWS IoTを統合するための優れたチュートリアルを見つけるのは困難です。

基本的に、何らかの認証方法(Facebook、Google、AWS Cognito、SAMLをサポートする独自のSSOサービス)が必要です。その後、次の手順を実行する必要があります。

  1. 認証方法でCognitoユーザープールまたはフェデレーションIDプールを構成します。
  2. ブラウザで拡張フローを実装する必要があります( https://aws.Amazon.com/blogs/mobile/understanding-Amazon-cognito-authentication-part-4-enhanced-flow/
  3. ユーザーのCognito AttachPolicyのIoTでidentityIdが必要です-プリンシパルとして使用されます(デバイスが証明書を使用しているのと同じ方法)。
  4. https://github.com/aws/aws-iot-device-sdk-js を使用してMQTTクライアントを作成し、一時的なaccessKeyIdsecretKeyを提供する必要がありますおよびsessionTokenは、拡張フロー認証から受信しました。
1

ここでIAMポリシーとAWS IOTポリシーの違いを理解することは非常に重要です。 IDプロバイダーとしてcognito user poolを使用するとします。

まず、cognito identity poolを設定し、IDプールをuser poolにリンクし、このIDプールにロールを割り当てます(このロールにIAMポリシーをアタッチ)する必要があります。

次に、アプリで最初にログインしてユーザープールの資格情報を取得し、次に呼び出します

    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-west-2:b8d2b32b-cbab-4ae3-9d47-1624d09c9350',
      Logins: {
        'cognito-idp.us-west-2.amazonaws.com/${userPoolIdentity}': userPoolCredential.getIdToken().getJwtToken(),
      }
    });

ユーザープール認証情報をaws一時アクセス認証情報と交換するには:

    AWS.config.getCredentials(e => {
      if(e) console.log("Get credential failed", e);
      this.device = AwsIot.device({//AwsIot is the aws-iot-sdk package
        clientId: clientID,//clientId is just random string
        Host: '*-ats.iot.us-west-2.amazonaws.com',//replace * with your own Host
        protocol: 'wss',
        accessKeyId: AWS.config.credentials.accessKeyId,
        secretKey: AWS.config.credentials.secretAccessKey,
        sessionToken: AWS.config.credentials.sessionToken
      });
      this.device.on('connect', function() {
        console.log("DEVICE CONNECTED");
      });
      this.device.subscribe('test');
      this.device
      .on('message', function(topic, payload) {
        console.log(`TOPIC IS ${topic}\nMESSAGE IS ${payload.toString()}`);
      });
    });

しかし、上記のコードは機能しません!!!ここに注意が必要な部分があります。ユーザープールの資格情報を交換することで取得する資格情報は、IDプールにアタッチしたAWS IAMポリシーを表す単なる一時的な資格情報です。 IOTとの接続をリクエストすると、AWSはリクエストが許可されているかどうか、およびユーザーがリクエストしたことを実行できるかどうかを確認します。すでにIAMポリシーを取得しているので、リクエストすることはできますが、このIDに添付されているAWS IOTポリシーをチェックします。これを行っていないため、実際に要求したこと(つまり接続)を行うことはできません。したがって、最初に接続する場合は、IOTポリシーをこのIDに添付する必要があります。これは、コマンドラインまたは

  (<AWS.CognitoIdentityCredentials>AWS.config.credentials).refresh(e => {
    if(e) console.log('error', e);
    const principal = (<AWS.CognitoIdentityCredentials>AWS.config.credentials).identityId;
    console.log(`IdentityId: ${principal}`);
    this.attachPrincipalPolicy("test-delete-after-use", principal);
  });
  attachPrincipalPolicy(policyName, principal) {
    new AWS.Iot().attachPrincipalPolicy({ 
      policyName: policyName, // you need to create policy beforehand in iot
      principal: principal 
    }, err => {
      err ? console.log('ATTACH PRINCIPAL POLICY ERROR', err) : console.log('ATTACH PRINCIPAL POLICY SUCCESS');
    });
  }

これで、IDがIOTと接続しようとすると、IOTはこのIDにアタッチされたIOTポリシーを見つけ、この接続を承認します。

悪い言い回しについてすみません。要約すると、IAMポリシーとIOTポリシーの違いを明確にする必要があります。これは私が理解していることであり、間違った場所があるかもしれません。見つかったら、コメントを残すか、回答を編集してください。

[〜#〜] important [〜#〜]公式ドキュメントから次の2つのポリシー間の関係が見つかりました: https:// docs .aws.Amazon.com/iot/latest/developerguide/pub-sub-policy.html セクションを見るHTTPおよびWebSocketクライアントのポリシー

0
xwa130