血と汗となみだを流す

個人の思ったこと、やったことの吐き出し口です。

Developers.ioの記事を読んでやってみる「Angular+Cognito」②

連番

対象

目的

やってみる

前提

  • 機能を理解するのが目的なので、terraformは使わずにAWSコンソールからポチポチ
  • ローカル環境はMac

準備

  • npmをインストール
$ brew install npm
  • Angular CLIインストール
$ npm install -g @angular/cli
  • Anglura CLIバージョン確認
$ ng -v
  • 存在感がすごい
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 10.0.0
OS: darwin x64
Angular:
...

雛形ファイル作成

  • 雛形ファイル作成。エラーが出たので以下を追加した
    • 2行目のcd
    • 3行目のnpm install
  • エラーの内容
$ ng g service service/cognito
node_modules appears empty, you may need to run `npm install`
  • 実際打ったコマンド
$ ng new cognito-login --routing
$ cd cognito-login
$ npm install
 
$ ng g service service/cognito
$ ng g service service/pet
 
$ ng g component login
$ ng g component petlist
$ ng g component dashboard
  • 必要なパッケージインストール
$ npm i --save amazon-cognito-identity-js
$ npm i --save aws-sdk

プロジェクトの設定

  • aws-sdkを使うためにnode設定
$ vi src/tsconfig.app.json
  • typesにnodeを追加
    "types": [
      "node"
    ]
  • AWSのリソース情報を追加
$ vi src/environments/enrivonment.ts
  • region userPoolId clientIdを追加
export const environment = {
  production: false,
  region: 'ap-northeast-1',
  userPoolId: 'ap-northeast-1_xxxxxxxxx',
  clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
};
  • 追加したサービスを追加
$ vi src/app/app/module.ts
  • サービスをimportして、providersを追加
// add service
import { CognitoService } from './service/cognito.service';
import { PetService } from  './service/pet.service';
  providers: [CognitoService, PetService],

Cognito認証処理の実装

  • ログイン処理
$ vi src/app/service/cognito.service.ts
  • //ログイン処理のnewPasswordRequiredブロックで、completeNewPasswordChallengeの１番目の引数は'NewPassword'
  • ルーティングの実装
$ vi src/app/app-routing.module.ts
import { PetlistComponent } from './petlist/petlist.component';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'petlist', component: PetlistComponent },
  {
    path: 'login',
    component: LoginComponent,
    pathMatch: 'full'
  }
];
  • Petリスト取得処理の実装
$ vi src/service/pet.service.ts
  • //URL to web apiの箇所に、API Gatewayのendpointを入れる
  private Url = 'https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/pets';  // URL to web api
  • ここを見てコンポーネントの実装
    • src/app/app.components.*/の中身実装
    • src/app/dashboard/配下のファイルの中身実装
    • src/app/login/配下のファイルの中身実装
    • src/app/petlist/配下のファイルの中身実装
    • src/app/mock-test.ts追加
    • src/app/pet.ts追加
  • モジュールの設定
$ vi src/app/app.module.ts

動作確認

  • 起動
$ ng server
  • 確認
http://localhost:4200/login

f:id:Anorlondo448:20180430064100p:plain

(解決)残課題1

  • ログイン時にエラー
"Unable to verify secret hash for client [アプリクライアントID]"
  • ここを参照して、アプリクライアントにシークレットキーを使わないようにした

(解決)残課題2

  • ユーザが見つかりません
User does not exist.
  • わからん・・・
    • (追記)処理フローを見たら使用しているのはusernameだった
    • logoin.component.html内のemailをusernameに変更 f:id:Anorlondo448:20180430095659p:plain

(解決)残課題3

  • UserNameを入れたら
Password does not conform to policy: Password must have numeric characters
  • Cognito側のパスワードポリシーと違うな・・・
    • (追記)作成したユーザは仮パスワード状態で、本パスワードが発行が必要っぽい
    • (追記)cognito.service.ts内のnewPasswordRequiredで指定しているNewPasswordが本パスワードの指定箇所となるが、これがCognito User Poolのポリシーと異なっていた
        newPasswordRequired: function (userAttributes, requiredAttributes) {
          delete userAttributes.email_verified;
          delete userAttributes.phone_number_verified;
          cognitoUser.completeNewPasswordChallenge('Test@1001', userAttributes, this);
        }

f:id:Anorlondo448:20180430095552p:plain

(pending)残課題4

  • PetListが取れない
ERROR TypeError: Cannot read property 'length' of undefined
    at HttpHeaders.applyUpdate (webpack-internal:///./node_modules/@angular/common/esm5/http.js:362)
    at eval (webpack-internal:///./node_modules/@angular/common/esm5/http.js:309)
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (webpack-internal:///./node_modules/@angular/common/esm5/http.js:309)
    at HttpHeaders.forEach (webpack-internal:///./node_modules/@angular/common/esm5/http.js:408)
    at Observable.eval [as _subscribe] (webpack-internal:///./node_modules/@angular/common/esm5/http.js:2210)
    at Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177)
    at Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165)
    at subscribeToResult (webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32)
  • src/app/service/pet.serivce.tsを見ると、PetをAPI Gatewayから取っているっぽい・・・？
  • 認証はできているので一旦終えて、次に進む！
プライバシーポリシー