ナビゲーション PHPからNuxt.js + Vue.js、Flutterまでフルスタックの世界へようこそ PHPからNuxt.js + Vue.js、Flutterまでフルスタックの世界へようこそ
  • お客様の買い物かご
  • ログイン
  • 登録
  • カートは空です.
    ショップへ
  • Home
    • DALL-E3を無料で使おう!bing
    • 40代男性が美女に変身
    • リアルタイムボイスチェンジャー
    • TIKTOK×AIで月30万円稼ぐ
    • 2019年に既に実現していた
  • スキル
    • Laravel
      • Laravel入門
      • Laravel実践
    • PHP
      • PHP入門
      • phpl実践
    • React.js
      • React入門
      • React実践
      • Redux
    • Vue.js
      • Vue.js入門
      • Vue.jsテクニック
    • JavaScript
    • Typescript
      • Typescript入門
      • Typescriptテクニック
    • Node.js
      • Node.js入門
      • Node.jsテクニック
    • Bootstrap
      • bootstrap入門
      • bootstrapテクニック
      • AdminLTE
    • Nuxt.js
      • Nuxt.js入門
      • Nuxt.js テクニック
    • Async-Await
    • Serverless
    • Excel
      • Excelダウン・アップ
      • Excl業務管理システム
    • WordPress
      • WordPressカスタマイズ
    • Chart.js
    • ECサイト
    • markdown
    • Next.js
      • Next.js入門
    • Express
      • Express入門
    • Python
      • Python入門
      • Python実践
    • Flutter
      • Flutter入門
      • Flutterテクニック
  • ブログ
    • AIとCanva
    • Canvaの使い方
      • Canva入門(概要説明)
      • Canva入門(文字の変更と装飾)
      • Canva入門(3)
      • Canva入門(4)
      • Canva入門(5)
    • markdown
      • markdown入門
      • markdownテクニック
    • ECサイト
      • カート・サンプル
      • ECサイト構築例
    • 開発のノウハウ・小技など
    • おとぎばなし 4コマ
    • Stable Diffusion – ControlNet入門
    • Lambada開発情報
  • 会社情報

ブログ詳細

  • ホーム
  • AWS Cognitoとは?

AWS Cognitoとは?

libe-irevo@master 2024年2月2日

AWSが提供する認証・認可基盤です。通常は、IAMユーザーのアクセスキーや、インスタンスに対するIAMロールを使用して認証します。

目次

Toggle
  • なぜCognitoを使うのか?
  • Cognitoを使う理由について
    • Cognitoてなに?
    • Cognitoを使う3つの理由
  • 用語について
  • どうやって使うのか
    • 未認証でとりあえず使ってみる
    • Cognitoユーザによる認証
  • 参考記事
    • 関連記事:

なぜCognitoを使うのか?

・クライアントアプリ(SPAやスマホのネイティブアプリ)より直接AWSリソースへアクセスしたい要件が増えてきている中で、扱いに困るのがIAMユーザーのアクセスキーやシークレットキーの扱いです。

特に、SPAのようなJavaScriptを使用したアプリケーションは、容易にブラウザのデバックツールより抜き取ることが可能なため、セキュリティ上問題があります。
また、仮になんらかの方法で、ファイルを難読化したとしても、永続的に権限を付与し続けることになるため、健全な運用ではありません。

そこで、Cognitoを使用してクライアントアプリからの認証を行い、IAMロールを使用して権限を払い出す仕組みを実現しています。

Cognitoを使う理由について

Cognitoてなに?

Cognitoとは、認証、承認、およびユーザー管理機能を提供するAWS(Amazon Web Service)のサービスです。Cognitoの主な機能は、以下の通りです。

  1.  ユーザープール
    Cognitoの認証機能です。ユーザー管理、サインイン、サインアップを提供します。
  2. IDプール
    Cognitoの認証機能です。一時的なAWS認証情報を発行することで他のAWSサービスへのアクセスを許可させることができます。IDプールはユーザープールと統合する必要があります。

Cognitoを使う3つの理由

ログイン画面作成にCognitoを利用すべき3つの理由について説明します。

  1. パスワードなどのユーザーデータを保持しないため、安心
    ユーザー管理における重要事項は、パスワードなどの機密性の高いユーザー情報を安全に保存することです。Cognitoでユーザー管理を行うと、ユーザーデータを開発者側で保持する必要がないため、安心です。
  2. GoogleやFacebook、AppleなどのID・パスワードでもログイン可能
    Cognitoのユーザー認証方法には、以下の2つがあります。独自の認証情報を使用しなくてもGoogleやFacebookなどサードパーティーを通じてサインインできるため、ユーザーが使いやすいログイン画面が作成できます。

    ・独自のID・パスワードを利用した認証
     Cognitoに認証情報(ユーザーID、パスワードなど)を保存する必要があります

    ・外部プロパイダーを利用した認証
     Cognitoに認証情報を保存する必要はなく、Google、Facebook、Amazon、Apple経由、
     または SAML / OpenID Connect 経由でログインを行います
  3. ログイン画面の作成が簡単
    AWS Amplify(以下、Amplify)のフレームワークを利用する前提の場合、簡単にログイン画面の作成が可能です。
    カスタマイズも簡単なので、用意されているフォーマットから必要ない機能を削除することも可能です。
    ※参考記事: ログイン画面の作成に、Amazon Cognitoを使うべき3つの理由とは?

用語について

Cognitoで使用される用語をまとめてみました。

  • フェデレーティッドアイデンティティ
    どのようにして、認証を行うかの設定を行います。ソーシャルIDプロバイダー(FB、Twitter etc)の指定や、認証後の使用可能なAWSリソースのIAMロール設定等を行います。
     
  • ユーザプール
    「フェデレーティッドアイデンティティ」で作成されたIDプールに対してユーザの紐付けを行います。その際に使用するのが、ユーザプールです。
    どのアプリケーションに対して、どのような認証を行い(メール認証の有無や、MFA等)、パスワードポリシーの設定や、ユーザのアクティベーション等もあります。

どうやって使うのか

AWS SDK for JavaScriptを使用して、Cognito経由でDynamoDBへアクセスしてみます。

未認証でとりあえず使ってみる

まずは、フェデレーティッドアイデンティティを新規に作成して、未認証でも権限の払い出しをしてもらい、どんな感じになるか試します。

1. フェデレーテッドアイデンティティを作成する

  • 「フェデレーテッドアイデンティティの管理」-> 「新しいIDプールの作成」
    • ID プール名: 今回は、demo_cognito_unauthenticated
    • 「認証されていない ID に対してアクセスを有効にする」をチェックし、「プールの作成」
    • 「Your Cognito identities require access to your resources」は「許可」
スクリーンショット 2017-12-07 0.17.09.png

2. IAMロールの編集
DynamoDBへのアクセス許可の設定を追加します。
IAMから、ロールをクリックすると、以下のようなIAMロールが作成されて
いるはずです。

oneClick_Cognito_[ID プール名]Auth_Role_XXXXXXXXXXX
oneClick_Cognito_[ID プール名]UnAuth_Role_XXXXXXXXXXX

編集するロールを選択 -> 「ポリシーの編集」で以下のようにDynamoDBの権限を追加してください。
ここでは、
oneClick_Cognito_demo_cognito_unauthenticatedAuth_Role_XXXXXXXXXXX
を指定します

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
                "cognito-sync:*",
                "cognito-identity:*"
            ],
            "Resource": [
                "*"
            ]
        },
        {   // 追加します。(コメントは追加時には削除しましょう。書式チェックで怒られます)
            "Effect": "Allow",
            "Action": [
                "dynamodb:BatchGetItem",
                "dynamodb:BatchWriteItem",
                "dynamodb:DeleteItem",
                "dynamodb:GetItem",
                "dynamodb:PutItem",
                "dynamodb:Query",
                "dynamodb:Scan",
                "dynamodb:UpdateItem"
            ],
            "Resource": [
                "arn:aws:dynamodb:ap-northeast-1:XXXXXXXXXXXX:table/demo_cognito_table", // DynamoDBのARNを指定
            ]
        }       
    ]
}

3. DynamoDBにアクセスする

「AWS SDK for JavaScript」を使用すると、IdentityIdを取得することが出来ます。こちらのIDは、SDKがよろしく保持してくれるので、こちらで管理する必要はありません。

poolIdには、「フェデレーテッドアイデンティティ」のプールIDを指定します。プールIDにはユーザプールIDもあるので、ちょっと紛らわしいですね・・

以下は、DynamoDBのテーブルからのデータ取得例です。

var aws = require('aws-sdk');
var config = {
    poolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    region: 'ap-northeast-1'        
};

aws.config.region = config.region;
aws.config.credentials = new aws.CognitoIdentityCredentials(
                                {IdentityPoolId: config.poolId});

aws.config.credentials.get(function(err) {
    if (!err) {
        console.log("Cognito Identify Id: " + aws.config.credentials.identityId);                

        // DynamoDBへ接続
        var dynamoDB = new aws.DynamoDB();
        var docClient = new aws.DynamoDB.DocumentClient({service:dynamoDB});

        var params = {
            TableName : 'demo_cognito_table',
            Key: {
                'id': '1'
            }
        };  

        docClient.get(params, function(err, data) {
            if (!err){
                console.log(data);
            } else {
                console.log(err);
            }
        });        
    }
}); 

実行するとDynamoDBにアクセスして、データ取得できました。

$ node unauth.js 
Cognito Identify Id: ap-northeast-1:xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
{ Item: { id: '1', username: 'katekichi' } }

DynamoDB周りのAPI仕様は別途ご確認ください。

未認証アクセスの用途としては、認証画面が存在しないアプリケーションで直接クライアントからAWSリソースに対してアクセスした場合等に使用することになると思います。

Cognitoユーザによる認証

ソーシャルIDプロバイダー(FB、Twitter etc)で認証することが実際の用途としては多いかなと思いますが、今回は、Cognitoの認証プロバイダを使用してみます。

Cognitoの認証プロバイダは、メールやSMSを使用したアクティベーションも可能です(アクティベーションメールのテンプレートもあります)が、諸々用意するのが大変なので、今回はnodeから直接認証のみを実施してみます(こちらを参考にさせて頂きました)。

1. Cognitoユーザーを作成
上記、記事の「2.AWS cognitoでユーザー作成」に沿って作成します。

スクリーンショット 2017-12-16 18.11.32.png
スクリーンショット 2017-12-16 18.13.20.png

2. フェデレーテッドアイデンティティを作成する
– 「フェデレーテッドアイデンティティの管理」-> 「新しいIDプールの作成」
– ID プール名: 今回は、demo_cognito_authenticated
– 「認証されていない ID に対してアクセスを有効にする」をチェックを外し、「プールの作成」
– 「Your Cognito identities require access to your resources」は「許可」

3. Amazon Cognito Identity SDK for JavaScriptのインストール
AWS SDK for JavaScriptと合わせて、
Amazon Cognito Identity SDK for JavaScriptを使用します。

$ npm install amazon-cognito-identity-js --save

4. DynamoDBにアクセスする
先程のDynamoDBアクセスを認証ありで行います。

var aws = require('aws-sdk');
var aws_cognito = require('amazon-cognito-identity-js');

var config = {
    poolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    region: 'ap-northeast-1'        
};

// ユーザープール設定
var user_pool = new aws_cognito.CognitoUserPool({
    UserPoolId : 'xxxxxxxx', // 1.で作成したユーザプールID
    ClientId : 'XXXXXXXXXXXXXXXXXXXX' // 1.で作成したアプリクライアント ID
});

// ユーザー決定
const cognito_user = new aws_cognito.CognitoUser({
    Username: 'XXXXX', // 1.でユーザに作成したユーザ名
    Pool: user_pool,
});

// パスワードの設定
const authentication_details = new aws_cognito.AuthenticationDetails({
    Password: 'XXXXXX', // 1.でユーザに設定した仮パスワード
});

// ユーザープール/ユーザー/パスワードを使って認証
cognito_user.authenticateUser(authentication_details, {
    // 成功時
    onSuccess(result){
        aws.config.region = config.region;
        aws.config.credentials = new aws.CognitoIdentityCredentials(
                                        {IdentityPoolId: config.poolId,
                                            Logins: {
                                                'cognito-idp.ap-northeast-1.amazonaws.com/<YOUR_USER_POOL_ID>': result.getIdToken().getJwtToken()
                                            }                                                                                    
                                        });

        // DynamoDBへ接続
        var dynamoDB = new aws.DynamoDB();
        var docClient = new aws.DynamoDB.DocumentClient({service:dynamoDB});

        var params = {
            TableName : 'demo_cognito_table',
            Key: {
                'id': '1'
            }
        };  

        docClient.get(params, function(err, data) {
            if (!err){
                console.log(data);
            } else {
                console.log(err);
            }
        });    
    },
    onFailure(err){
        console.error(err);     
    },

    // 初回認証時のパスワード変更を仮パスワードで使いまわす。
    newPasswordRequired(user_attributes, required_attributes){
        cognito_user.completeNewPasswordChallenge(authentication_details.password, user_attributes, this);
    },
});

実行すると無認証時と同じく、DynamoDBにアクセスして、データ取得できました。

$ node auth.js 
Cognito Identify Id: ap-northeast-1:xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
{ Item: { id: '1', username: 'katekichi' } }

Cognitoで認証後に取得したトークンと、IAMからCredentialを払い出すために繋ぎ込みは分かりずらいですので、そんな時は、AWSのドキュメントを参照すれば良いと思います。

参考記事

※参考記事: ログイン画面の作成に、Amazon Cognitoを使うべき3つの理由とは?

Cognito User Pools x ログイン認証 x API認証

LambdaもAPI Gatewayも不要。AWS Amplify Frameworkを使ってブラウザ側のコードだけでWebアプリを作る。

Amazon CognitoをJavaScriptから使ってみる

Amazon CognitoのUser Groupを利用した権限管理について本気出して考えてみた。

Cognitoで学ぶ認証・認可 in AWS

AWS Amplify+IAMで未認証ユーザでもAppSyncを使えるようにする

AWS AmplifyでサーバレスWebアプリの構築(Cognito + API Gateway + IAM認証)

AWS Cognito IDプール(フェデレーティッドアイデンティティ)で詰まりがちな用語

  • Cognitoのサインイン時に取得できる、IDトークン・アクセストークン・更新トークンを理解する
  • APIGatewayのIAM認証付きのAPIをJavascriptから叩く
  • Cognitoユーザープールを使ってみました
  • ロールベースアクセスコントロール
  • Amazon Cognito グループ、およびきめ細かなロールベースのアクセス制御

関連記事:

Serverlesss(AWS Lambda) Amazon Location Serviceとは?(1) Amazon Location Service+Vue.jsマップアプリケーション Amazon Location Serviceとは?(2) Amazon Location Serviceとは?(3)+Cognito Serverlesss(AWS Lambda)(1)セットアップ Serverlesss(AWS Lambda)(4)ローカル環境 Serverlesss(AWS Lambda)(3)dynamodb Serverlesss(AWS Lambda)(2)cognito設定 Serverlesss(AWS Lambda)(5)dynamodb・NoSQL Serverlesss(AWS Lambda)(6)関連記事 AWS Cognitoを使うべき3つの理由 AWS Lambda DynamoDB でCRUD AWSとは? AWS S3入門! AWS EC2入門! AWS RDS入門! AWS EC2入門(EC2を立ててログイン) AWS RDS入門(RDSでデータベースを構築する) AWS LambdaでPythonを使う AWS EC2の作成〜Apacheの起動 WinSCPでAmazon S3に接続 AWSでWeb(3)EC2とRDSでWordPress AWSでWeb(2)EC2にApache構築 AWSでWeb(1)RDSでデータベースを構築する AWSのALB実装例(1)ALB+EC2+RDS AWSアカウントを作る(1) AWSアカウントを作る(2)普段使いのIAMユーザーを作る AWSアカウントを作る(3)EC2を立ててログインする AWSアカウントを作る(4)AWS CLIでS3を操作
Cognit,Amplify,SNSログイン,AWS,Location Service,dynamodb,AWSアカウント

Latest Posts

  • LINE入門
  • JavaScript入門
  • JavaScript JSON編集(記事)

post categories

  • Redux (9)
  • ガンチャート (2)
  • Android Studio (1)
  • GitHub (4)
  • 請求管理 (2)
  • サンプル集 (9)
  • AWS CLI (1)
  • Next.js (11)
  • 売上管理 (7)
  • Android Studio入門 (1)
  • GitHub入門 (4)
  • ジョブ管理 (1)
  • オブジェクト指向 (1)
  • RDS (5)
  • Chart.js (25)
  • Excelダウン・アップ (2)
  • Pixel Watch (1)
  • Python実践 (11)
  • 休暇・休日管理 (2)
  • Canva画像編集 (1)
  • ALB (1)
  • Chart.js入門 (5)
  • Excl業務管理システム (12)
  • Dartテクニック (2)
  • AWS (38)
  • 資産管理 (2)
  • Docker Compose (1)
  • Terraform (1)
  • Chart.js実践 (23)
  • Flutter (11)
  • Flutterテクニック (2)
  • WSL2 (2)
  • リード管理 (1)
  • LINE (1)
  • S3 (3)
  • Wordpress (31)
  • AdminLTE (3)
  • Flutter入門 (8)
  • Next.js入門 (8)
  • CI/CD (2)
  • イベント管理 (2)
  • LINE ステップ (1)
  • APACHE (3)
  • 越境サイト (8)
  • AdminLTE‐Laravel版 (2)
  • Dart (8)
  • Express (4)
  • SQL (6)
  • Dashboard (1)
  • AWSアカウント (7)
  • アーキテクチャ図 (1)
  • スクール (1)
  • AdminLTE実践 (3)
  • Dart入門 (6)
  • Express入門 (4)
  • Linux (3)
  • CRM (3)
  • コンテナ環境 (3)
  • ドメイン (1)
  • クラウドSC (1)
  • Canva (1)
  • Java (2)
  • Python (15)
  • 小技集 (12)
  • RFM分析 (2)
  • API Gateway (2)
  • 予約システム (1)
  • Laravel (11)
  • Java入門 (2)
  • Python入門 (13)
  • 業務システム (18)
  • SFA (2)
  • DynamoDB (6)
  • Async-Await (1)
  • Laravel入門 (11)
  • Kotlin入門 (1)
  • Go言語 (1)
  • 顧客管理 (7)
  • FuelPHP (4)
  • Cognit (10)
  • phpl実践 (12)
  • PHP入門 (9)
  • Kotlin (1)
  • Go言語入門 (1)
  • 従業員管理 (2)
  • FuelPHPの入門 (4)
  • CRUD (2)
  • React.js (16)
  • Laravel実践 (4)
  • Swift (3)
  • docker (4)
  • 給与管理 (2)
  • CakePHP入門 (1)
  • Amazon Location Service (6)
  • React入門 (9)
  • PHP (12)
  • Swift入門 (3)
  • docker入門 (4)
  • タスク管理 (1)
  • CakePHP実践 (2)
  • AWS Amplify (11)
  • React実践 (7)
  • REST API (4)
  • Firebase (1)
  • VSCode入門 (2)
  • プロジェクト管理 (3)
  • Cake (3)
  • SNSログイン (4)
  • Wordpressカスタマイズ (27)
  • 勤怠管理 (8)
  • Firebase入門 (1)
  • VSCode (4)
  • 見積管理 (2)
  • Django (1)
  • EC2 (8)
  • Nuxt.js (20)
  • Nuxt.js入門 (10)
  • Nuxt.jsテクニック (14)
  • Vue.js (23)
  • Vue.js入門 (10)
  • Vue.jsテクニック (19)
  • Node.js (8)
  • Node.js入門 (3)
  • Node.jsテクニック (7)
  • Bootstrap (18)
  • bootstrap入門 (1)
  • bootstrapテクニック (17)
  • Typescript (17)
  • Typescript入門 (2)
  • Typescriptテクニック (15)
  • Excel (16)
  • Excelダウンロード (3)
  • Excleインポート (3)
  • markdown (6)
  • markdown入門 (1)
  • markdownテクニック (3)
  • ECサイト (8)
  • カート・サンプル (3)
  • ECサイト構築例 (8)
  • JavaScript (15)
  • Serverless (19)
  • SHOP (4)
  • その他の技術情報 (20)

Post Tags

AdminLTE AdminLTE‐Laravel版 Android Studio Android Studio入門 AWSアカウント bootstrap Modal CRM CSRF docker Docker Compose docker入門 ECサイト構築例 Excel Excelダウンロード Firebase Firebase入門 GitHub GitHub入門 IAMユーザー INSERT javascript JavaScrpt JSON Laravel Nestjs Next.js Nuxt.jsテクニック PHPer Python総合学習【GUI編】 Python総合学習【グリッド操作編】 Python総合学習【データベース操作編】 Redux SELECT Serverless Serverless コンテナを環境 UPDATE Vue.js入門 その他 ガンチャート 勤怠管理 売上管理 従業員管理 時給制 給与管理 顧客別商品売上
Copyright © Chiba Syetems All rights reserved