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: