Flutter på AWS Amplify

AWS Amplify med stöd för Flutter

Sidinnehåll

En snabbstart - hur man skapar Flutter fullstack-projekt på AWS Amplify plattform.

topimage

När

Amplify är en mycket användbar plattform för värd för fullstack-applikationer.

Bland andra howtos Här är en snabbstart för att starta ett nytt Flutter-projekt som integreras bra med AWS Amplify.

Installera

Innan du börjar, se till att du har följande installerat:

Node.js v18.17 eller senare - (Installera Node.js med NVM)
npm v9 eller senare
git v2.14.1 eller senare (Installera några trevliga verktyg för linux)
Du kommer också att behöva skapa ett AWS-konto om du inte har det än. AWS Amplify är en del av AWS Free Tier.
En stabil version av Flutter - (Installera Flutter)
Konfigurera ditt AWS-konto för att använda med Amplify-instruktioner. (se nedan)

Om du har IAM-profil, fäst AmplifyBackendDeployFullAccess-managed-policyn till din IAM-användare. annars - se nedan konfigurera...

För uppdaterad information, se https://docs.amplify.aws/flutter/start/quickstart/

Konfigurera ditt AWS-konto för att använda med Amplify-instruktioner

https://docs.amplify.aws/flutter/start/account-setup/

Skapa användare med Amplify-behörigheter

Logga in på AWS Console för att komma åt IAM Identity Center-sidan och välj Aktivera.

Ett dialogfönster öppnas och uppmanar dig att “Välj hur du konfigurerar IAM Identity Center i din AWS-miljö.”

Välj Aktivera med AWS Organizations och välj Fortsätt.

Därefter kommer vi att automatisera ett antal steg som simulerar operationerna för att skapa en användare i IAM Identity Center-konsolen.

För att börja, öppna CloudShell, som finns i konsolfoten.
Klistra in följande kommando i CloudShell-terminalen och ange en e-postadress som du vill associera med detta AWS-konto:

read -p "Ange e-postadress: " user_email # tryck på enter

Ange e-postadress: <din-e-postadress>

Nu, kör följande kommando

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)
email_json=$(jq -n --arg email "$user_email" '{"Type":"Work","Value":$email}')
response=$(aws identitystore create-user --identity-store-id $ssoId --user-name amplify-admin --display-name 'Amplify Admin' --name Formatted=string,FamilyName=Admin,GivenName=Amplify --emails "$email_json")
userId=$(echo $response | jq '.UserId' -r)
response=$(aws sso-admin create-permission-set --name amplify-policy --instance-arn=$ssoArn --session-duration PT12H)
permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)
aws sso-admin attach-managed-policy-to-permission-set --instance-arn $ssoArn --permission-set-arn $permissionSetArn --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess
accountId=$(aws sts get-caller-identity | jq '.Account' -r)
aws sso-admin create-account-assignment --instance-arn $ssoArn --target-id $accountId --target-type AWS_ACCOUNT --permission-set-arn $permissionSetArn --principal-type USER --principal-id $userId

För att validera att detta fungerade, kör följande kommando i CloudShell. Om

printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Du bör se

Start session url: https://d-XXXXXXXXXX.awsapps.com/start
Region: us-east-1
Username: amplify-admin

Nu skapar du ett lösenord för användaren som vi behöver för nästa steg.

I IdC-konsolen, navigera till Användare > amplify_admin > Återställ lösenord > Skicka en e-post till användaren med instruktioner för att återställa lösenordet.
Kontrollera din e-post (se till att du också kontrollerar din skräppostmapp). Klicka på länken Återställ lösenord och välj ett lösenord efter ditt eget val. När du loggar in, se till att använda amplify-admin som Användarnamn.
Nu, konfigurera en AWS-profil som är länkad till användaren du just skapat på din lokala maskin. Det finns några alternativ för att få IAM Identity Center-användarautentiseringsuppgifter, men vi kommer att använda AWS CLI-konfigurationsguiden.
Installera aws cli
Öppna din terminal, du är redo att konfigurera en AWS-profil som använder SSO-användaren. Använd informationen från CloudShell för att fylla i informationen nedan.

aws configure sso

| SSO session name (Recommended): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO region: <din-region>
| SSO registration scopes [sso:account:access]: <lämna tomt>
| Attempting to automatically open the SSO authorization page in your default browser.
| If the browser does not open or you wish to use a different device to authorize this request, open the following URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Then enter the code:
|
| SOME-CODE

Efter att du har gett denna information, kommer webbläsaren att öppnas automatiskt och be dig att logga in med användarnamnet och lösenordet du just skapat och konfigurera en multi-factor-enhet för autentisering.
Nu återgår du till terminalen och anger följande information:

The only AWS account available to you is: <din-aws-konto-id>
Using the account ID <din-aws-konto-id>
The only role available to you is: amplify-policy
Using the role name "amplify-policy"
CLI default client Region [us-east-1]: <din-region>
CLI default output format [None]:

Se till att ange profilnamnet till standard. Alternativt, kom ihåg det automatiskt genererade profilnamnet; du kommer att behöva det senare.

Om du redan har standardprofil konfigurerad - kommer den att erbjuda ett annat profilnamn

CLI profile name [amplify-policy-<din-aws-konto-id>]: default
To use this profile, specify the profile name using --profile, as shown:

aws s3 ls --profile default

Om du inspekterar ~/.aws/config, bör du nu se SSO-profilen:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <din-aws-konto-id>
sso_role_name = AdministratorAccess
region = <din-region>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <din-region>
sso_registration_scopes = sso:account:access

Bootstrappa ditt AWS-konto

Nu är du redo att använda denna AWS-profil med AWS Amplify.

Öppna ditt Amplify-projekt och starta sandlådan.

det här är nästa steg!!! utan projekt kommer detta inte att fungera.

Om du har flera lokala profiler eller namngivit din profil något annat än standard, kan du ange en profil med –profile.

npx ampx sandbox

eller

npx ampx sandbox --profile <profilnamn>

Skapa flutter Amplify-app

flutter create my_amplify_app
cd my_amplify_app

Skapa Amplify-backend

npm create amplify@latest -y

Att köra detta kommando kommer att skapa Amplify-backend-filer i ditt nuvarande projekt med följande filer tillagda:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

utdatan kommer att se ut så här

Installing devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installing dependencies:
 - aws-amplify

✔ DevDependencies installed
✔ Dependencies installed
✔ Template files created
Successfully created a new project!

Welcome to AWS Amplify!
 - Get started by running npx ampx sandbox.
 - Run npx ampx help for a list of available commands.

Amplify collects anonymous telemetry data about general usage of the CLI. Participation is optional, and you may opt-out by using npx ampx configure telemetry disable. To learn more about telemetry, visit https://docs.amplify.aws/react/reference/telemetry

ser du? du kan köra…

npx ampx configure telemetry disable

Nu konfigurerar du Amplify’s per-developer cloud sandbox

För att distribuera din backend använder du Amplify’s per-developer cloud sandbox. Den här funktionen ger en separat backend-miljö för varje utvecklare i ett team, idealisk för lokal utveckling och testning. För att köra din applikation med en sandlådemiljö kan du köra följande kommando:

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

eller

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <profilnamn>

Lägga till autentisering

Den initiala grundstrukturen har redan en förkonfigurerad autentiseringsbakgrund definierad i amplify/auth/resource.ts-filen. Vi har konfigurerat den för att stödja inloggning med e-post och lösenord, men du kan utöka den för att stödja olika inloggningsmekanismer, inklusive Google, Amazon, Sign In With Apple och Facebook.

Snabbast sätt att få din inloggningsupplevelse igång är att använda vår Authenticator UI-komponent som finns i Amplify UI-biblioteket.

För att använda Authenticator måste du lägga till följande beroenden i ditt projekt:

pubspec.yaml:

beroenden:
  amplify_flutter: ^2.0.0       # för att ansluta din applikation till Amplify-resurserna.
  amplify_auth_cognito: ^2.0.0  # för att ansluta din applikation till Amplify Cognito-resurserna.
  amplify_authenticator: ^2.0.0 # för att använda Amplify UI-komponenterna.

Efter att du har lagt till beroendena måste du köra följande kommando för att installera beroendena:

flutter pub get

Uppdatera din main.dart-fil för att använda Amplify UI-komponenterna

main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Fel vid konfiguration av Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Konfigurerades framgångsrikt');
  } on Exception catch (e) {
    safePrint('Fel vid konfiguration av Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SignOutButton(),
                Text('TODO Applikation'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Och nu titta på den här skönheten, inloggningssidan är här:

inloggningssida

och AWS Cognito gör e-postverifieringen redan

Inte mycket inne, men ändå:

tom applikationssida

När

Installera

Konfigurera ditt AWS-konto för att använda med Amplify-instruktioner

Skapa flutter Amplify-app

Skapa Amplify-backend

Lägga till autentisering

Användbara länkar