Erste Schritte mit AWS

Erstellen einer iOS-Anwendung

Erstellen Sie eine einfache iOS-Anwendung mit AWS Amplify

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.

    iOSTutorial-Module3-step1

    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:

    iOSTutorial-Module3-step2
    iOSTutorial-Module3-step5
    iOSTutorial-Module3-step3
    iOSTutorial-Module3-step6
    iOSTutorial-Module3-step4
    iOSTutorial-Module3-step7

Fazit

Mit nur wenigen Zeilen Code haben Sie jetzt die Benutzerauthentifizierung in Ihre Anwendung integriert! Im nächsten Modul werden wir eine API zu Ihrer Anwendung hinzufügen.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

GraphQL-API und -Datenbank hinzufügen