Amplify Auth のセットアップ
Amplify Auth は Amazon Cognito により提供されています。Cognito は、ユーザー登録、認証、アカウント復旧、その他の操作を処理する堅牢なユーザーディレクトリサービスです。概念を確認してさらに学ぶ。
認証リソースの定義を開始するには、認証リソースファイルを開くか作成します:
import { defineAuth } from "@aws-amplify/backend"
/** * Define and configure your auth resource * @see https://docs.amplify.aws/gen2/build-a-backend/auth */export const auth = defineAuth({ loginWith: { email: true, },})デフォルトでは、認証リソースは email をデフォルトのログインメカニズムとしてスキャフォルドされます。認証リソースを設定して以下でのサインインを許可することもできます:
- 電話番号
- 外部プロバイダー(Google、Facebook、Amazon、または Sign in with Apple)
- パスワードレス認証(メール OTP、SMS OTP、または WebAuthn パスキー)
パスワードレス認証を有効化
パスワードレス認証方法を有効にして、より安全でユーザーフレンドリーなエクスペリエンスを提供できます:
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: { otpLogin: true // Enable email-based one-time passwords } }});認証リソースをデプロイ
認証リソースを選択して定義した後、以下のコマンドを実行して、個人用クラウドサンドボックスにリソースを作成します。
npx ampx sandbox --outputs-out-dir <path_to_app/src/main/res/raw>デプロイが成功した後、このコマンドは出力ファイル(amplify_outputs.json)も生成します。これにより、フロントエンドアプリがバックエンドリソースに接続できるようになります。バックエンド認証リソースで設定する値は、生成された出力ファイルに設定され、フロントエンドの Authenticator 接続コンポーネント が自動的に設定されます。
アプリケーションコードを認証リソースに接続
サインインフローを作成して正しく実装することは、複雑で時間がかかることがあります。Amplify の Authenticator UI コンポーネントはこれを簡素化し、アプリ全体の認証フローを迅速に構築できるようにします。コンポーネントは amplify/auth/resource.ts の設定とシームレスに連携して、バックエンドリソースに自動的に接続します。
Amplify には React、Vue、Angular、React Native、Swift、Android、Flutter 向けの事前構築 UI コンポーネントがあります。このガイドでは、Web アプリケーション向けのコンポーネントに焦点を当てています。
Authenticator コンポーネントは Jetpack Compose を使用して構築されています。アプリの build.gradle ファイルの android セクションに以下を追加することで Jetpack Compose を有効にします:
compileOptions { // Support for modern Java features isCoreLibraryDesugaringEnabled = true}buildFeatures { compose = true}composeOptions { kotlinCompilerExtensionVersion = "1.2.0"}dependencies { coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:ANDROID_DESUGAR_VERSION")}以下の依存関係をアプリの build.gradle.kts ファイルに追加して、プロンプトが表示されたら「Sync Now」をクリックします:
dependencies { implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION")}import android.app.Applicationimport android.util.Logimport com.amplifyframework.AmplifyExceptionimport com.amplifyframework.auth.cognito.AWSCognitoAuthPluginimport com.amplifyframework.core.Amplifyimport com.amplifyframework.core.configuration.AmplifyOutputs
class MyAmplifyApp: Application() { override fun onCreate() { super.onCreate()
try { Amplify.addPlugin(AWSCognitoAuthPlugin()) Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext) Log.i("MyAmplifyApp", "Initialized Amplify") } catch (error: AmplifyException) { Log.e("MyAmplifyApp", "Could not initialize Amplify", error) } }}最後に、MainActivity.kt ファイルを更新して Amplify UI コンポーネントを使用します:
import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.material3.Buttonimport androidx.compose.material3.MaterialThemeimport androidx.compose.material3.Surfaceimport androidx.compose.material3.Textimport androidx.compose.runtime.Composableimport androidx.compose.ui.Modifierimport androidx.compose.ui.tooling.preview.Previewimport com.amplifyframework.core.Amplifyimport com.amplifyframework.ui.authenticator.ui.Authenticatorimport <your-package-name>.ui.theme.MyAmplifyAppTheme
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyAmplifyAppTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Authenticator { state -> Column { Text( text = "Hello ${state.user.username}!", ) Button(onClick = { Amplify.Auth.signOut { } }) { Text(text = "Sign Out") } } } } } } }}Authenticator コンポーネントをアプリに追加したら、サインアップ、サインイン、サインアウト機能をテストできます。また Authenticator 接続コンポーネントをカスタマイズ して、必要に応じて色とスタイルを調整することもできます。
次のステップ
Amplify アプリでメールとパスワードを使用した認証のセットアップが完了しました。さらに機能を追加したい場合は、以下について学ぶことをお勧めします: