Help us understand the problem. What is going on with this article?

ReactとAmplifyでCognitoとgoogleサインイン/サインナップ試してみた

一通り設定内容を把握したかったので、マニュアルで設定してみた記録です。先に感想ですが、サードパーティーのログイン機構が簡単に実装でき、だいぶ強力なサービスでした。

参考にしたページは、以下になります。
https://aws-amplify.github.io/docs/js/authentication

CognitoとGoogle APIsの設定

Mange User Pools

ユーザープールにアクセスします。
ユーザープールにアクセス

Create a user poolをクリックします。
Create a user poolをクリック

Pool nameを指定します。Pool nameは再設定ができない様なので、名前を決める時はよく考えて決めたほうが良いです。
Pool nameを指定

Review defaultsを選択します。
Review defaultsを指定

Review画面
Review画面

Attributesを設定します。一度設定すると再設定できないようなので、扱う情報をどうするか事前に考える必要があります。
Attributesを設定

今回は、Emailアドレスとユーザー名でサインインできるようにします。Standard attributesは、ログインに使用するものだけ指定します。必要に応じて変更するとよいと思いますが、最初に決める必があります。Custom attribe(後で新たに追加)もできるようなので、この辺りは慎重に考えて決めたほうが良いでしょう。
Attributesを設定

パスワードの強さの設定やPoliciesで、管理者のみ追加権限指定で、任意のユーザー登録を無効にできます。
Attributesを設定

後、MFAの設定などありますが、必要に応じて設定ができるのでスルーします。

最後に、App Clientsの設定をします。
App Clientsの設定

Webのみで認証するので、以下の設定にします。
App Clientsの設定1

App Clientsが作成されると、App Client Idが発行されます。このIdは、後ほど使います。
App Clientsの設定2

作成完了します。ここで生成されたPool Idは、後ほど使います。
Cognito User Pool 設定完了

Manage Federated Identities

Federated Identitiesをクリックします。

Manage Federated Identities

Pool nameを指定して、Authentication providersを開き、赤く囲ったcognitoの設定項目に、先程作成した、User Pool IdとApp Client Idを指定します。そして、作成を押して進みます。
Identity poolの作成

最後に、Identity Pool Idが表示されるます。これも後ほど使いますので、記録してください。
Identity poolの作成

Identity Pool Idは、Edit Identity Poolから確認できます。
Identity poolの作成

Google APIsの設定

User PoolのIdのプロバイダーにGoogleも使うので、その設定をします。

Google Cloud Platformにアクセスして、

メニュー > APIs & Services > Credentials

にアクセスします。
GCP APIs

Create Credentialsを押します。
GCP APIs

OAuth client IDを選択します。
GCP APIs OAuth client ID

Web applicationを選択し、Restrictionsを以下の様に設定します。
GCP APIs OAuth client ID

Authorized JavaScript origins.

https://<your-user-pool-domain>

Authorized Redirect URIs.

https://<your-user-pool-domain>/oauth2/idpresponse

詳細はこちらにあります。
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html

Your Client IDをプロバイダーGoogleの設定項目に設定します。
GCP APIs OAuth client ID

Federated IdentitiesUser Pools > Edit identity poolへ移動します。UnlockしてYour Client IDを入力して保存します。
GCP APIs OAuth client ID Google Provider

後から確認もできます。
OAuth 2.0 Client IDs
GCP APIs OAuth ID & Secret

赤丸囲いクリックして詳細を確認できます。
GCP APIs OAuth ID & Secret

Reactで使う情報まとめ

UserPoolId
User Pool作成時に生成されたIDで、フォーマットは見た目は、

ap-northeast-1_*******な感じ

IdentityPoolId
Identity Pool作成時に生成されたIDで、フォーマットは見た目は、

ap-northeast-1:********-****-****-****-************な感じ

  • ClientId: App Client作成時に生成されたIDで、フォーマットは見た目は、

7nq7sou3kac74bkfuoee92nes33な感じ

  • Google Client Id: Google APIsで作成されたIDで、フォーマットの見た目は、

********-************************.apps.googleusercontent.comな感じ

Reactでサインイン/サインナップ

Reactの準備

今回はMacOSを使います。コンソールを開き、開発用のディレクトリを作成しそこに移動します。

npmの準備

$ mkdir workingdir
$ cd workingdir/
$ brew install npm
$ npm install -g n
$ n stable  # ローカルのnode_modulesを参照する
$ npm install -g yarn

バージョン確認

$ npm -v
6.13.6
$ node -v
v12.15.0

Reactをインストール

$ npm install react

Reactアプリを作成

$ npx create-react-app my-app --template typescript
$ tree -I node_modules -L 2 my-app/
my-app/  # 以下のようなディレクトリが作成されます(node_modulesは省いてます)
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── serviceWorker.ts
│   └── setupTests.ts
└── tsconfig.json
$ cd my-app
$ yarn add amazon-cognito-identity-js  # cognitoを使うためのモジュールを入れておく
$ npm start
Compiled successfully!

You can now view app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.***.***:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

となれば、OKです。ブラウザーが起動しreact-appが表示されます。
react-app

設定ファイルの準備

$ cd my-app/src
$ touch appConfig.tsx
$ vi appConfig.tsx

以下の内容を記述します。

appConfig.tsx
const appConfig = {
    aws: {
        cognito: {
            region: 'ap-northeast-1',
            IdentityPoolId: 'ap-northeast-1:********-****-****-****-************',
            UserPoolId: 'ap-northeast-1_*******',
            ClientId: '***************************'
            GoogleClientID: '*****-**********.apps.googleusercontent.com'
        }
    }
}

export default appConfig

Amplifyで認証機構を準備

$ yarn add aws-amplify aws-amplify-react
App.tsx
import React, { Component } from 'react';

import logo from './logo.svg';
import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';

import appConfig from './appConfig'

Amplify.configure({
    Auth: {
        identityPoolId: appConfig.aws.cognito.IdentityPoolId,
        region: appConfig.aws.cognito.region,
        userPoolId: appConfig.aws.cognito.UserPoolId,
        userPoolWebClientId: appConfig.aws.cognito.ClientId
    }
});

const federatedConfig = {
    google_client_id: appConfig.aws.cognito.GoogleClientID
};

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

class AppWithAuth extends Component {
  render(){
    return (
      <div>
          <Authenticator
              federated={federatedConfig}
          >
              <App />
          </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

再度、起動します。

$ npm start

以下の様なページが保存されます。cognitoでgmailアドレスでアカウントを作って、

amplify coginito & google login

感想

大体動作が把握できたので、次はHosted UI使いたいので amplify init 使ってコンフィグつくって実装しようと思いました。

Googleのみで利用できるようにして、lambda triggerのpre-signupやauthentcation機能を使ってSignupできるユーザーを事前にUserPool側に登録したユーザーの使えるようにして、細かい制御をする予定です。

自由を手に入れた感じです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした