Flutter op AWS Amplify

AWS Amplify met ondersteuning voor Flutter

Inhoud

Een quickstart - hoe om een Flutter fullstack project op AWS Amplify platform aan te maken.

topimage

Wanneer

Amplify is een zeer nuttig platform voor het hosten van full stack toepassingen.

Tussen andere howtos Hier is een quickstart hoe om een nieuw flutter project op te zetten dat mooi zou integreren met AWS Amplify.

Installatie

Voordat je begint, zorg er dan voor dat je de volgende items geïnstalleerd hebt:

Als je een IAM profiel hebt, voeg dan de beheerdersrechten AmplifyBackendDeployFullAccess toe aan je IAM gebruiker. anders - zie hieronder configure...

Voor de meest recente informatie zie https://docs.amplify.aws/flutter/start/quickstart/

Stel je AWS account in om te gebruiken met Amplify instructies

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

  1. Maak een gebruiker aan met Amplify rechten

Meld je aan bij de AWS Console om toegang te krijgen tot de IAM Identity Center pagina en kies Enable.

Een dialoog venster zal openen, waarbij je wordt gevraagd om “Kies hoe je IAM Identity Center in je AWS omgeving wilt configureren.”

  1. Selecteer Enable met AWS Organizations en kies Continue.

Nu gaan we een aantal stappen automatiseren die het instellen van een gebruiker in de IAM Identity Center console simuleren.

  1. Om te beginnen open je CloudShell, gelegen in de console voettekst.

  2. Plak de volgende opdracht in de CloudShell terminal en voer een e-mailadres in dat je wilt associëren met dit AWS account:

read -p "Enter email address: " user_email # enter

Enter email address: <your-email-address>
  1. Nu voer je de volgende opdracht uit
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
  1. Om te valideren dat dit werkt, voer je de volgende opdracht uit in de CloudShell. Als
printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Je zou moeten zien

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

Nu maak je een wachtwoord aan voor de gebruiker die je nodig hebt voor de volgende stap.

  1. In de IdC console, navigeer naar Gebruikers > amplify_admin > Reset wachtwoord > Stuur een e-mail naar de gebruiker met instructies voor het resetten van het wachtwoord.

  2. Controleer je e-mail (zorg er ook voor dat je de spammap controleert). Klik op de Reset wachtwoord link en kies een wachtwoord van je keuze. Bij het inloggen zorg er dan voor dat je amplify-admin gebruikt als gebruikersnaam.

  3. Nu stel je een AWS profiel in dat gekoppeld is aan de gebruiker die je net op je lokale machine hebt aangemaakt. Er zijn een paar opties om IAM Identity Center gebruikersreferenties te verkrijgen, maar we gebruiken de AWS CLI configuratie wizard.

  4. Installeer aws cli

  5. Open je terminal, je bent klaar om een AWS profiel in te stellen dat gebruik maakt van de SSO gebruiker. Gebruik de informatie van CloudShell om de informatie hieronder in te vullen.

aws configure sso

| SSO sessie naam (Aanbevolen): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO regio: <your-region>
| SSO registratie scopes [sso:account:access]: <laat leeg>
| Probeer automatisch de SSO autorisatiepagina in je standaardbrowser te openen.
| Als de browser niet opent of je een ander apparaat wilt gebruiken om deze aanvraag te autoriseren, open dan de volgende URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Vervolgens voer je de code in:
|
| SOME-CODE

  1. Nadat je deze informatie hebt opgegeven, zal de browser automatisch openen en vragen om in te loggen met de gebruikersnaam en wachtwoord die je net hebt gemaakt en configureer een multi-factor apparaat om te verifiëren.

  2. Nu keer je terug naar de terminal en voer je de volgende informatie in:

Het enige beschikbare AWS account is: <your-aws-account-id>
Gebruik van het account ID <your-aws-account-id>
Het enige beschikbare rol is: amplify-policy
Gebruik van de rol naam "amplify-policy"
CLI standaard client regio [us-east-1]: <your-region>
CLI standaard uitvoerformaat [None]:

Zorg ervoor dat je het profielnaam op default stelt. Of onthoud de automatisch gegenereerde profielnaam; je zult dit later nodig hebben.

Als je al een standaardprofiel hebt geconfigureerd - het biedt je een andere profielnaam aan

CLI profielnaam [amplify-policy-<your-aws-account-id>]: default
Om dit profiel te gebruiken, specificeer de profielnaam met --profile, zoals hieronder aangegeven:

aws s3 ls --profile default
  1. Als je ~/.aws/config inspecteert, zou je nu de SSO profiel moeten zien:
nano ~/.aws/config

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

Nu ben je klaar om dit AWS profiel te gebruiken met AWS Amplify.

Open je Amplify project en start de sandbox.

dat is de volgende stap!!! zonder project werkt dit niet.

Als je meerdere lokale profielen hebt of je profiel iets anders hebt genoemd dan default, kun je een profiel specificeren met –profile.

npx ampx sandbox

of

npx ampx sandbox --profile <profile-name>

Maak een Flutter Amplify app

flutter create my_amplify_app
cd my_amplify_app

Maak de Amplify backend aan

npm create amplify@latest -y

Het uitvoeren van deze opdracht zal de Amplify backend bestanden in je huidige project scaffolden met de volgende bestanden toegevoegd:

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

de uitvoer zal er ongeveer zo uitzien

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

zie je? je kunt uitvoeren…

npx ampx configure telemetry disable

Nu configureer je Amplify’s per-ontwikkelaar cloud sandbox

Om je backend te implementeren, gebruik je Amplify’s per-ontwikkelaar cloud sandbox. Deze functie biedt een aparte backend omgeving voor elke ontwikkelaar in een team, ideaal voor lokale ontwikkeling en testen. Om je applicatie uit te voeren met een sandbox omgeving, kun je de volgende opdracht uitvoeren:

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

of

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

Authenticatie toevoegen

De initiële scaffolding heeft al een vooraf geconfigureerde auth backend gedefinieerd in het bestand amplify/auth/resource.ts. We hebben het ingesteld om ondersteuning te bieden voor inloggen met e-mail en wachtwoord, maar je kunt het uitbreiden om ondersteuning te bieden voor een verscheidenheid aan inlogmechanismen, waaronder Google, Amazon, Sign In With Apple, en Facebook.

De snelste manier om je inlogervaring op te zetten is om onze Authenticator UI component te gebruiken die beschikbaar is in de Amplify UI bibliotheek.

Om de Authenticator te gebruiken, moet je de volgende afhankelijkheden toevoegen aan je project:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # om je applicatie te verbinden met de Amplify resources.
  amplify_auth_cognito: ^2.0.0  # om je applicatie te verbinden met de Amplify Cognito resources.
  amplify_authenticator: ^2.0.0 # om de Amplify UI componenten te gebruiken.

Na het toevoegen van de afhankelijkheden, moet je de volgende opdracht uitvoeren om de afhankelijkheden te installeren:

flutter pub get

Bijwerk je main.dart bestand om de Amplify UI componenten te gebruiken

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("Fout bij het configureren van Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Geslaagd bij het configureren');
  } on Exception catch (e) {
    safePrint('Fout bij het configureren van 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 Toepassing'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

En nu kijk hier naar deze schoonheid, de authenticatiepagina is hier:

signin page

en AWS Cognito doet al de e-mailverificatie

Niet veel binnen, maar toch:

empty app page