[第四回]バックエンドの作成または既存のバックエンドの再利用

はじめに
認証リソースの新規作成方法
アプリケーションの設定方法
既存の認証リソースの再利用方法
終わりに

はじめに

皆さん。こんにちは！

DreamHanksのエルムです。

今回はバックエンドの作成方法について説明していきます。

前回の記事は[第三回] Amplifyによる認証です。

認証リソースの新規作成方法

APIカテゴリなど、舞台裏でAuthを使用するAmplifyカテゴリを以前に有効にしていた場合は、すでにAuthの設定があるかもしれません。

このような場合は、amplify auth update　コマンドを実行して、設定を編集してください。

最初から始めるには、プロジェクトのルートフォルダーで次のコマンドを実行します:

amplify add auth

1	amplify add auth

CLIのプロンプトは、アプリのためにauthフローをカスタマイズするのに役立ちます。

用意されたオプションを使えば、以下のことが可能です:

サインイン/登録フローのカスタマイズ
“Multi-Factor Authentication”のメールやSMSメッセージのカスタマイズ
ユーザーの属性をカスタマイズ（例：名前、メール)
Facebook、Twitter、Google、Amazonなどのソーシャルプロバイダーを利用可能にする

ソーシャルプロバイダーとの連携を希望する場合は、まずソーシャルプロバイダーを設定する必要があります。

認証オプションを設定したら、バックエンドを更新します:

amplify push

1	amplify push

aws-exports.jsという設定ファイルが、設定したソースディレクトリ（例：./src）にコピーされます。

アプリケーションの設定方法

yarnやnpmを使ってAmplifyをアプリに追加します:

yarn add aws-amplify

1	yarn add aws-amplify

React Nativeアプリケーションの場合は、aws-amplify-react-nativeをインストールしてリンクします。

yarn add aws-amplify aws-amplify-react-native
react-native link amazon-cognito-identity-js

1 2	yarn add aws-amplify aws-amplify-react-native react-native link amazon-cognito-identity-js

React Native 0.60.0+, iOSをお使いで、Auth.signIn, Auth.signUpなどのAuthメソッドを使用している場合は、リンクではなく以下のコマンドを実行してください。

yarn add amazon-cognito-identity-js
cd ios
pod install --repo-update

yarn add amazon-cognito-identity-js

cd ios

pod install --repo-update

アプリのエントリーポイント（App.js）で、設定ファイルをインポートして読み込みます:

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

import Amplify, { Auth } from 'aws-amplify';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

既存の認証リソースの再利用方法

AWSの既存の認証リソース（Amazon Cognito UserPoolやIdentity Poolなど）を再利用したい場合は、Amplify.configure()メソッドを以下の情報で更新します。

import Amplify, { Auth } from 'aws-amplify';

Amplify.configure({
    Auth: {

        // フェデレート認証の場合のみ必要 - Amazon Cognito Identity Pool ID
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',

        // 必須 - Amazon Cognitoリージョン
        region: 'XX-XXXX-X',

        // オプション - Amazon Cognito フェデレーテッド・アイデンティティ・プール・リージョン 
        // Amazon Cognito Regionと異なる場合のみ必要です。
        identityPoolRegion: 'XX-XXXX-X',

        // オプション - Amazon Cognito ユーザープール ID
        userPoolId: 'XX-XXXX-X_abcd1234',

        // オプション - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

        // オプション - AWSリソースにアクセスする前にユーザー認証を行うかどうか
        mandatorySignIn: false,

        // オプション - クッキーの保存に関する設定
        // Note: セキュアフラグがtrueに設定されている場合、クッキーの送信にはセキュアなプロトコルが必要です
        cookieStorage: {
        // 必須 - Cookieのドメイン（cookieStorageが指定されている場合のみ必要)
            domain: '.yourdomain.com',
        // オプション - クッキーパス
            path: '/',
        // オプション - クッキーの有効期限（日)
            expires: 365,
        // オプション -  https://*/*/*/Web/HTTP/Headers/Set-Cookie/SameSite
            sameSite: "strict" | "lax",
        // オプション - クッキー・セキュア・フラグ
        // クッキーの送信にセキュアなプロトコル（https）が必要かどうかを示す、trueまたはfalseのいずれか
            secure: true
        },

        // オプション - customized storage object
        storage: MyStorage,

        // オプション - 認証フロータイプを手動で設定します。デフォルトは「USER_SRP_AUTH」です
        authenticationFlowType: 'USER_PASSWORD_AUTH',

        // オプション - Cognito Lambda Triggersに渡すことができるキーバリューペアを手動で設定します
        clientMetadata: { myCustomKey: 'myCustomValue' },

         // オプション - Hosted UI configuration
        oauth: {
            domain: 'your_cognito_domain',
            scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
            redirectSignIn: 'http://localhost:3000/',
            redirectSignOut: 'http://localhost:3000/',
            responseType: 'code' // または'token'を指定してください。ただし、REFRESHトークンは、responseTypeがcodeの場合にのみ生成されます
        }
    }
});

// 現在のコンフィグオブジェクトを取得することができます
const currentConfig = Auth.configure();

import Amplify, { Auth } from 'aws-amplify';

Amplify.configure({

Auth: {

// フェデレート認証の場合のみ必要 - Amazon Cognito Identity Pool ID

identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',

// 必須 - Amazon Cognitoリージョン

region: 'XX-XXXX-X',

// オプション - Amazon Cognito フェデレーテッド・アイデンティティ・プール・リージョン

// Amazon Cognito Regionと異なる場合のみ必要です。

identityPoolRegion: 'XX-XXXX-X',

// オプション - Amazon Cognito ユーザープール ID

userPoolId: 'XX-XXXX-X_abcd1234',

// オプション - Amazon Cognito Web Client ID (26-char alphanumeric string)

userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

// オプション - AWSリソースにアクセスする前にユーザー認証を行うかどうか

mandatorySignIn: false,

// オプション - クッキーの保存に関する設定

// Note: セキュアフラグがtrueに設定されている場合、クッキーの送信にはセキュアなプロトコルが必要です

cookieStorage: {

// 必須 - Cookieのドメイン（cookieStorageが指定されている場合のみ必要)

domain: '.yourdomain.com',

// オプション - クッキーパス

path: '/',

// オプション - クッキーの有効期限（日)

expires: 365,

// オプション - https://*/*/*/Web/HTTP/Headers/Set-Cookie/SameSite

sameSite: "strict" | "lax",

// オプション - クッキー・セキュア・フラグ

// クッキーの送信にセキュアなプロトコル（https）が必要かどうかを示す、trueまたはfalseのいずれか

secure: true

// オプション - customized storage object

storage: MyStorage,

// オプション - 認証フロータイプを手動で設定します。デフォルトは「USER_SRP_AUTH」です

authenticationFlowType: 'USER_PASSWORD_AUTH',

// オプション - Cognito Lambda Triggersに渡すことができるキーバリューペアを手動で設定します

clientMetadata: { myCustomKey: 'myCustomValue' },

// オプション - Hosted UI configuration

oauth: {

domain: 'your_cognito_domain',

scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],

redirectSignIn: 'http://localhost:3000/',

redirectSignOut: 'http://localhost:3000/',

responseType: 'code' // または'token'を指定してください。ただし、REFRESHトークンは、responseTypeがcodeの場合にのみ生成されます

}

});

// 現在のコンフィグオブジェクトを取得することができます

const currentConfig = Auth.configure();

終わりに

今回の記事は以上になります。

次回はサインアップ、サインイン、サインアウトを学びましょう。

ご覧いただきありがとうございます。