月間26,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

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

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

 

Angular7でCognito認証を実装したい

でも、よう分からん!

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

 

 

僕の環境

OS:Windows10

Angular:7

Node.js:10.8.0

 

 

 

参考にしたサイト

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

■Angular+Cognitoで作るログインページ

URL:「https://dev.classmethod.jp/cloud/aws/angular-cognito-api-gateway-loginpage/」

 

 

Cognitoの設定

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

・ユーザプールの設定

・ユーザの追加

・API GateWayの設定

 

 

 

Angularの設定

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

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

 

参考ソース

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

URL:「https://github.com/izumin0401/angular-cognito-api」

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

 

ライブラリを入れる

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

・amazon-cognito-identity-js

・aws-sdk

 

「tsconfig.app.json」の設定

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

 

「polyfills.ts」の設定

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

 

「environment.ts」の設定

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

 

「app.module.ts」の設定

 

 

Advertisement

 

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

 

「cognito.service.ts」の設定

 

「pet.service.ts」の設定

 

 

おすすめ本

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

 

 

 

 

まとめ

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

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

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

Travelerを知らないの?