1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Cognitoのユーザプールでの認証するところまでを最速でやる

Last updated at Posted at 2019-04-13

概要

cognitoのユーザプール認証をやる。

  • AWSコンソールでCognitoユーザプールへ登録したユーザを認証する。
  • Amplify使うと色々速い気がするけど、一旦、AWSの公式にに記載されている方法で。。
  • ※実質、Githubに書かれてる手順をなぞるだけになるけど。。

手順

Amazon Cognito Identity SDK for JavaScript をローカルに落とす

どこかのCDNに上がってない?ので、npmで自分でinstallする。
[※元ネタ@SDK公式]
(https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js#using-npm-and-webpack)

package.jsonを用意

package.json
{
  "private": true
}

npm install する

npm install --save-dev webpack json-loader
npm install --save amazon-cognito-identity-js

node_modules\amazon-cognito-identity-js\dist の中の amazon-cognito-identity.js を後で使う。

ユーザプールの認証をするためのjsの用意

公式ユーザの認証 項に記載されているjavascriptをjsファイルにコピペする。
ここでは test.js というファイル名で保存することにする。

下記注意。

  • username, password をユーザプールにユーザを登録した時のものに書き換える。

  • UserPoolId, ClientId も書き換える。

  • UserPoolIdに入力する値はユーザプールの管理画面の↓の赤枠部分
    image.png

  • ClientIdに入力する値は、画面下の方にある アプリクライアント の右の方にあるエンピツボタンを押し、表示される画面の中の アプリクライアント ID の値。
    image.png

認証を実行する

適当なhtmlを作成し、javascriptとして、amazon-cognito-identity.jstest.js をhtml内で読み込む。

<script src="amazon-cognito-identity.js"></script>
<script src="test.js"></script>

htmlをブラウザで表示し、公式からコピペしたjs内の authenticateUser()onSuccess()result の内の accessToken, IdToken, refreshToken に値が入っていれば成功。

認証できない時

↓のようなエラーが出る場合

TypeError: callback.newPasswordRequired is not a function

コンソールからユーザを登録した場合、初回認証時に強制的にパスワードを変える必要がある。
ので、test.jsauthenticateUser に↓のメソッドを追加する。

※パスワードが password になるのでそこは任意で。
※追加してもエラーが出る場合、リクエストへのレスポンスの内容を見ると何が悪いか書いてあるのでそれ見ながら修正する。
公式の元ネタ

newPasswordRequired: function (userAttributes, requiredAttributes) {
    cognitoUser.completeNewPasswordChallenge("password", {}, this)
}

IDプールを使って一時クレデンシャルを取得する

こっち

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?