私のプログラミング備忘録

spring, docker, aws etc.

awslabsのcognito-apigw-angular-authを試す

はじめに

  • 今回、試してみるのはこち

https://github.com/awslabs/aws-cognito-apigw-angular-auth

手順

  • readmeに沿ってやっていくよ

1 バケットへのアップロード

  • sam/lambda.zip をバケットにアップロードして、sam/sam.yaml のバケット部分を変更
  CognitoDemoFunction:
    Type: AWS::Serverless::Function
    Properties:
      Handler: index.handler
      Runtime: nodejs4.3
      CodeUri: s3://<S3 BUCKET>/lambda.zip

2 packageとdeploy

  • packageコマンドを実行するとS3にんアップロードされるのかと思いきや、アップロードされないけど、outputファイルはできていたので、とりあえずOKか!?
  • packageコマンドを実行すると、次に実行するコマンドが標準出力されるがcapabilityが抜けてるので注意。readmeのが正解

3 google api使う準備

  • readme記載のリンク先にあるawsドキュメント通りにやっていって、oauthクライアントの追加とサービスアカウントキーの発行を行う
  • google+ apiを使用するにはアプリレビューが必要らしい。ただしテスト段階や個人利用においてはRisky Access Permissions By Unreviewed Appsグループに参加すればいいらしい。

https://developers.google.com/identity/protocols/googlescopes

  • こんな感じのエラー画面が出ると思います。

400. エラーが発生しました。

エラー: invalid_scope

このアプリは次のスコープへのアクセスの確認が完了していません: {invalid = https://www.googleapis.com/auth/contacts.readonly}。サポートについてデベロッパーにお問い合わせください。デベロッパーの方は、このプロジェクトで上記のスコープが必要な場合は、プロジェクトへのアクセス権限があるアカウントにログインして、もう一度お試しください。必要でない場合は、サポートについてデベロッパーにお問い合わせください。
Request Details

4 RESOURCE IDENTIFIERSの編集

  • /src/app/aws.service.ts のRESOURCE IDENTIFIERS部分を編集
  • googleIdは手順3で作成したoauth client id
  • それ以外はawsコンソールのCFnの出力タブに記載がある
  • regionも忘れずに

5,6,7 AUTENTICATION PROVIDERS編集

  • Federated Identitiesコンソールで作業
  • google auth client id入力

8 User Poolへ登録

  • 手順にあるコマンドを適宜変更して、awscliから登録
  • 2人ぶん登録しておく

9 cip-groupへの追加

  • User Poolコンソールにて、追加したユーザーのうち1人を選択して詳細画面を開く
  • 左上にadd to groupボタンがあるので、cip-groupへ追加する

10 angularのscaffold作成とsdk追加

  • angular-cliは1.0.0(masterのバージョンに合わせない)と動かないかも。

私の場合は1.1.2(2017年6月時点の最新バージョン)で動かしたところ、以下のエラーで動きませんでした。

Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

もしくは

MIME タイプの不一致により"/path/to/hoge.js"からのリソースがブロックされました (X-Content-Type-Options: nosniff)。

  • angular-cliはグローバルではなく、1.0.0をローカルにインストール。
npm install @angular/cli@1.0.0
  • その他は記載されているコマンド実行。restApiIdはCFnの出力タブより取得

11 masterのソースとマージ

  • /srcフォルダをコピー
  • pakcage.jsonを差分だけコピー

12-14 あとは記載通り