Erste Schritte mit AWS
Erstellen einer iOS-Anwendung
Erstellen Sie eine einfache iOS-Anwendung mit AWS Amplify

Authentifizierung hinzufügen
Modul 3: Authentifizierung hinzufügen
In diesem Modul verwenden Sie die Amplify-CLI und -Bibliotheken zur Konfiguration und zum Hinzufügen von Authentifizierung zu Ihrer Anwendung.
Einführung
Die nächste Funktion, die Sie hinzufügen werden, ist die Benutzerauthentifizierung. In diesem Modul lernen Sie, wie Sie einen Benutzer mit der Amplify-CLI und -Bibliotheken authentifizieren und dabei Amazon Cognito, einen verwalteten Benutzeridentitätsservice, nutzen können.
Sie werden auch lernen, wie man die Cognito Hosted User Interface (also eine gehostete Benutzeroberfläche) verwendet, um einen kompletten Benutzer-Authentifizierungsfluss darzustellen, der es den Benutzern ermöglicht, sich mit nur wenigen Codezeilen anzumelden, sich anzumelden und ihr Passwort zurückzusetzen.
Die Verwendung einer "gehosteten Benutzeroberfläche" bedeutet, dass die Anwendung die Cognito-Webseiten für die Abläufe der Anmeldung und der Benutzeroberflächen-Anmeldung nutzt. Der Benutzer der App wird auf eine von Cognito gehostete Webseite umgeleitet und nach der Anmeldung wieder auf die App zurückgeleitet. Natürlich unterstützen Cognito und Amplify auch native UI und Sie können diesen Workshop-Anweisungen folgen, um mehr über die benutzerdefinierte Authentifizierungs-UI zu erfahren.
Lerninhalte
- Erstellen und Bereitstellen eines Authentifizierungsdienstes
- Konfigurieren Sie Ihre iOS-Anwendung so, dass sie Cognito Hosted UI-Authentifizierung enthält
Wichtige Konzepte
Amplify-Bibliotheken – Die Amplify-Bibliotheken ermöglichen Ihnen die Interaktion mit AWS-Services über eine Web- oder mobile Anwendung.
Authentifizierung – In der Software ist Authentifizierung der Prozess der Verifizierung und Verwaltung der Identität eines Benutzers unter Verwendung eines Authentifizierungsdienstes oder einer API.
Veranschlagte Zeit
10 Minuten
Verwendete Services
Implementierung
-
Erstellen Sie den Authentifizierungs-Service
Um den Authentifizierungs-Service zu erstellen, öffnen Sie ein Terminal und führen Sie diesen Befehl aus:
amplify add auth ? Do you want to use the default authentication and security configuration? Select Default configuration with Social Provider and press enter ? How do you want users to be able to sign in? Select the default Username and press enter ? Do you want to configure advanced settings? Select the default No, I am done and press enter ? What domain name prefix do you want to use? Select the default and press enter Enter your redirect signin URI: type gettingstarted:// and press enter ? Do you want to add another redirect signin URI? Select the default N and press enter Enter your redirect signout URI: type gettingstarted:// and press enter ? Do you want to add another redirect signout URI? Select the default N and press enter ? Select the social providers you want to configure for your user pool: do not select any provider and press enter
Sie werden wissen, dass die Konfiguration erfolgreich ist, wenn Sie diese Meldung sehen (der genaue Name der Ressource variiert):
Successfully added resource iosgettingstartedfc5a4717 locally
-
Stellen Sie den Authentifizierungs-Service bereit
Nun, da der Authentifizierungs-Service lokal konfiguriert wurde, können wir ihn in der Cloud bereitstellen. Führen Sie diesen Befehl in einem Terminal in Ihrem Projektverzeichnis aus:
amplify push # press Y when asked to continue
Nach einer Weile sollten Sie die folgende Meldung sehen:
✔ All resources are updated in the cloud Hosted UI Endpoint: https://iosgettingstarted-dev.auth.eu-central-1.amazoncognito.com/ Test Your Hosted UI Endpoint: https://iosgettingstarted-dev.auth.eu-central-1.amazoncognito.com/login?response_type=code&client_id=1234567890&redirect_uri=gettingstarted://
-
Hinzufügen der Amplify-Authentifizierungsbibliothek zum Projekt
Bevor wir zum Code übergehen, fügen Sie die Amplify-Authentifizierungsbibliothek zu den Abhängigkeiten Ihres Projekts hinzu. Öffnen Sie die Podfile-Datei und fügen Sie die Zeile mit AmplifyPlugins/AWSCognitoAuthPlugin hinzu oder kopieren Sie die gesamte Datei
# you need at least version 13.0 for this tutorial, more recent versions are valid too platform :ios, '13.0' target 'getting started' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for getting started pod 'Amplify', '~> 1.0' # required amplify dependency pod 'Amplify/Tools', '~> 1.0' # allows to call amplify CLI from within Xcode pod 'AmplifyPlugins/AWSCognitoAuthPlugin', '~> 1.0' # support for Cognito user authentication end
Führen Sie den Befehl in einem Terminal aus:
pod install
Die Ausführung des Befehls dauert einige Sekunden. Sie sollten dies sehen (die tatsächlichen Versionsnummern können variieren):
Analyzing dependencies Downloading dependencies Installing AWSAuthCore (2.14.1) Installing AWSCognitoIdentityProvider (2.14.1) Installing AWSCognitoIdentityProviderASF (1.0.1) Installing AWSCore (2.14.1) Installing AWSMobileClient (2.14.1) Installing AWSPluginsCore (1.0.4) Installing AmplifyPlugins (1.0.4) Generating Pods project Integrating client project Pod installation complete! There are 3 dependencies from the Podfile and 8 total pods installed.
-
Authentifizierungsbibliothek zur Laufzeit konfigurieren
Zurück zu Xcode, öffnen Sie die Datei Backend.swift. In der Backend-Klasse:
- eine Import-Anweisung für die AmplifyPlugins hinzufügen
- eine Zeile zu dem verstärkten Initialisierungscode hinzufügen, den wir im vorigen Abschnitt hinzugefügt haben.
Der vollständige Codeblock sollte wie folgt aussehen:
// at the top of the file import AmplifyPlugins private init () { // initialize amplify do { try Amplify.add(plugin: AWSCognitoAuthPlugin()) try Amplify.configure() print("Initialized Amplify") } catch { print("Could not initialize Amplify: \(error)") } }
Um zu überprüfen, ob alles wie erwartet funktioniert, erstellen Sie das Projekt. Klicken Sie auf das Menü Produkt und wählen Sie Build oder geben Sie ⌘B ein. Es sollte kein Fehler vorliegen.
-
Authentifizierung zur Laufzeit auslösen
Die verbleibende Codeänderung verfolgt den Status des Benutzers (ist er angemeldet oder nicht angemeldet?) und löst die SignIn/SignUp-Benutzeroberfläche (zum Registrieren/Anmelden) aus, wenn der Benutzer nicht angemeldet ist.
a. Hinzufügen von SignIn- und SignOut-Code. Fügen Sie an beliebiger Stelle in der Backend-Klasse die folgenden drei Methoden hinzu:
// MARK: - User Authentication // signin with Cognito web user interface public func signIn() { _ = Amplify.Auth.signInWithWebUI(presentationAnchor: UIApplication.shared.windows.first!) { result in switch result { case .success(_): print("Sign in succeeded") case .failure(let error): print("Sign in failed \(error)") } } } // signout public func signOut() { _ = Amplify.Auth.signOut() { (result) in switch result { case .success: print("Successfully signed out") case .failure(let error): print("Sign out failed with error \(error)") } } } // change our internal state, this triggers an UI update on the main thread func updateUserData(withSignInStatus status : Bool) { DispatchQueue.main.async() { let userData : UserData = .shared userData.isSignedIn = status } }
b. Hinzufügen eines Authentifizierungs-Hub-Listeners
Um die Änderungen des Authentifizierungsstatus zu verfolgen, fügen wir Code hinzu, um die von Amplify gesendeten Authentifizierungsereignisse zu abonnieren. Wir initialisieren den Hub in der Methode Backend.init().
Wenn ein Authentifizierungsereignis empfangen wird, rufen wir die Methode updateUserData() auf. Diese Methode hält das UserData-Objekt synchron. Die Eigenschaft UserData.isSignedIn ist @Published, das bedeutet, dass die Benutzeroberfläche automatisch aktualisiert wird, wenn sich der Wert ändert.
Wir fügen auch Code hinzu, um den vorherigen Authentifizierungsstatus beim Start der Anwendung zu überprüfen. Wenn die Anwendung startet, prüft sie, ob bereits eine Cognito-Sitzung existiert und aktualisiert die UI entsprechend.
Fügen Sie in Backend.init() den folgenden Code nach der Initiierung von Amplify hinzu:
// in private init() function // listen to auth events. // see https://github.com/aws-amplify/amplify-ios/blob/master/Amplify/Categories/Auth/Models/AuthEventName.swift _ = Amplify.Hub.listen(to: .auth) { (payload) in switch payload.eventName { case HubPayload.EventName.Auth.signedIn: print("==HUB== User signed In, update UI") self.updateUserData(withSignInStatus: true) case HubPayload.EventName.Auth.signedOut: print("==HUB== User signed Out, update UI") self.updateUserData(withSignInStatus: false) case HubPayload.EventName.Auth.sessionExpired: print("==HUB== Session expired, show sign in UI") self.updateUserData(withSignInStatus: false) default: //print("==HUB== \(payload)") break } } // let's check if user is signedIn or not _ = Amplify.Auth.fetchAuthSession { (result) in do { let session = try result.get() // let's update UserData and the UI self.updateUserData(withSignInStatus: session.isSignedIn) } catch { print("Fetch auth session failed with error - \(error)") } }
c. Aktualisieren Sie den Code der Benutzeroberfläche
Die letzte Änderung im Code bezieht sich auf die Benutzeroberfläche, wir fügen einen ZStack zur ContentView hinzu. Abhängig vom Wert von UserData.isSignedIn zeigt die UI entweder eine SigninButton- oder die Hauptlistenansicht.
Öffnen Sie ContentView.swift und ersetzen Sie den Body in der ContentView-Struktur:
var body: some View { ZStack { if (userData.isSignedIn) { NavigationView { List { ForEach(userData.notes) { note in ListRow(note: note) } } .navigationBarTitle(Text("Notes")) .navigationBarItems(leading: SignOutButton()) } } else { SignInButton() } } }
Fügen Sie in derselben Datei eine SignInButton- und eine SignOutButton-Ansicht hinzu:
struct SignInButton: View { var body: some View { Button(action: { Backend.shared.signIn() }){ HStack { Image(systemName: "person.fill") .scaleEffect(1.5) .padding() Text("Sign In") .font(.largeTitle) } .padding() .foregroundColor(.white) .background(Color.green) .cornerRadius(30) } } } struct SignOutButton : View { var body: some View { Button(action: { Backend.shared.signOut() }) { Text("Sign Out") } } }
Um zu überprüfen, ob alles wie erwartet funktioniert, erstellen Sie das Projekt. Klicken Sie auf das Menü Produkt und wählen Sie Build oder geben Sie ⌘B ein. Es sollte kein Fehler vorliegen.
d. Info.plist aktualisieren
Schließlich müssen wir sicherstellen, dass unsere Anwendung am Ende der Web-Authentifizierungssequenz, die von der von Cognito gehosteten Benutzeroberfläche bereitgestellt wird, gestartet wird. Wir fügen das getstarted URI-Schema zur Info.plist-Datei der App hinzu.
Wählen Sie in Xcode die Datei Info.plist aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie Öffnen als Quellcode.
Fügen Sie die unteren Elemente <key> und <array> innerhalb des oberen Elements <dict> hinzu.
<plist version="1.0"> <dict> <!-- YOUR OTHER PLIST ENTRIES HERE --> <!-- ADD AN ENTRY TO CFBundleURLTypes for Cognito Auth --> <!-- IF YOU DO NOT HAVE CFBundleURLTypes, YOU CAN COPY THE WHOLE BLOCK BELOW --> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>gettingstarted</string> </array> </dict> </array> <!-- ... --> </dict>
e. Erstellen und testen
Um zu überprüfen, ob alles wie erwartet funktioniert, erstellen Sie das Projekt. Klicken Sie auf das Menü Produkt und wählen Sie Ausführen oder geben Sie ⌘R ein. Es sollte kein Fehler vorliegen. Die App startet über die Schaltfläche Anmelden.
Hier ist der vollständige Anmeldungsablauf: