やっほー
Angular7×Cognitoでログイン・API処理を実装!

Angular7×Cognitoでログイン・API処理を実装!

  • 2018年12月25日
  • 2021年3月20日
  • Angular
  • 4view

Angular7でCognito認証を実装したい

でも、よう分からん!

ということで、様々なサイトを参考に、ログイン処理やAPI処理をAngular7で実装してみました。

Angularプロジェクトの新規作成方法はこちら

Angular7で新規プロジェクトを作りたい! Angularでプロジェクトを作成するのは非常に簡単です! ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します! 前提 前提として、以下がインスト[…]

超簡単!Angular7で新規プロジェクトを作成する方法!

参考にしたサイト

以下のサイトを参考にさせていただきました。

Cognitoの設定

参考サイト通りにCognitoの設定を行います。

  • ユーザプールの設定
  • ユーザの追加
  • API GateWayの設定

 

参考サイト通りにAngularの設定を行います。

僕は現時点で最新の「Angular7」で実装しています。

参考ソース

以下に格納しています。以降は参考ソースの簡単な解説をしていきます。

environment.ts」「pet.service.ts」はあなたの環境に合わせてください。

ライブラリを入れる

npmコマンドで以下のライブラリをインストールします。

  • amazon-cognito-identity-js
  • aws-sdk

「tsconfig.app.json」の設定

tsconfig.app.jsonに「“types”: [“node”]」の設定を行います。これをしないとコンパイル時にエラーが出ます。

関連記事

エラーがいっぱい出ました。イライラ度マックスです。 AngularにAWSのライブラリを入れました。入れた理由は「Angular×Cognito」を試してみたかったからです。 ライブラリを入れると、アホみたいにエラーが出ました。[…]

AngularにAWSライブラリを入れたら超エラー出ちゃったよw

「polyfills.ts」の設定

コンパイル時に「global is not defined」などのエラーが出る場合は、上記の設定を行ってください。

関連記事

Angular7で開発中のことです。以下のようなエラーが出ました。 「Uncaught ReferenceError: global is not defined」。 殺意が芽生えますが、いったん落ち着いて対処法を検討してみまし[…]

Angularの「global is not defined」エラー対処法!

「environment.ts」の設定

AWSのリージョン・ユーザプールID・クライアントIDを設定します。

「app.module.ts」の設定

「app-routing.module.ts」の設定

「cognito.service.ts」の設定

「pet.service.ts」の設定

おすすめ本

Angularの勉強をするならこの2冊がおすすめです!

まとめ

今回は、「Angular7×Cognito」の処理を実装してみました。

Angular7で実装されているものが少ないので、ネットの情報通りに実装してもうまくいかないことが多々あります。

Angular7でCognitoの処理を実装したい方は何かしら参考になるかと思います!

Angular7×Cognitoでログイン・API処理を実装!
フォローしてもらえると泣いて喜びます