Implémentation

• Créer le service d'authentification

  Pour créer le service d'authentification, ouvrez un terminal et exécutez cette commande :

  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

  Vous saurez que la configuration est réussie lorsque vous verrez ce message (le nom exact de la ressource peut être différent) :

  Successfully added resource iosgettingstartedfc5a4717 locally

• Déployer le service d'authentification

  Une fois le service d'authentification configuré localement, nous pouvons le déployer. Dans un terminal, exécutez cette commande dans votre répertoire de projet :
  

  amplify push
  
  # press Y when asked to continue

  Après un certain temps, vous devrez voir le message suivant :
  

  ✔ 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://

• Ajouter la bibliothèque d'authentification Amplify au projet

  Avant de passer au code, vous ajoutez la bibliothèque d'authentification Amplify aux dépendances de votre projet. Ouvrez le fichier Podfile et ajoutez la ligne avec AmplifyPlugins/AWSCognitoAuthPlugin ou copiez/collez le fichier entier ci-dessous
  

  # 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

  Dans un terminal, exécutez la commande :

  pod install

  L'exécution de la commande prend quelques secondes. Le résultat suivant doit être produit (les numéros de version réels peuvent varier) :

  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.

• Configurer la bibliothèque d'authentification Amplify au moment de l'exécution

  De retour dans Xcode, ouvrez le fichier Backend.swift. Dans la classe Backend,

  • ajoutez une instruction import pour AmplifyPlugins
  • ajoutez une ligne au code d'initialisation Amplify que nous avons ajouté à la section précédente.

  Le bloc de code complet doit ressembler à ceci :

  // 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)")
    }
  }

  Pour vérifier que tout fonctionne comme prévu, générez le projet. Cliquez sur le menu Produit et sélectionnez Générer ou tapez ⌘B. Il ne devrait pas y avoir d'erreur.

• Déclencher l'authentification au démarrage

  Les autres modifications de code suivent le statut de l'utilisateur (est-il connecté ou non ?) et déclenchent l'interface utilisateur SignIn/SignUp lorsque l'utilisateur n'est pas connecté. 

  a. Ajouter le code SignIn et SignOut. Dans la classe Backend, ajoutez les trois méthodes suivantes :

   

  // 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. Ajouter un écouteur du hub d'authentification.

  Pour suivre les changements de statut d'authentification, nous ajoutons un code pour nous abonner aux événements d'authentification envoyés par Amplify. Nous initialisons le hub dans la méthode Backend.init().

  Lorsqu'un événement d'authentification est reçu, nous appelons la méthode updateUserData(). Cette méthode permet de garder l'objet UserData synchronisé. La propriété UserData.isSignedIn est @Published, ce qui signifie que l'interface utilisateur est automatiquement actualisée lorsque la valeur change. 

  Nous ajoutons également un code pour vérifier le statut d'authentification précédent au moment du démarrage de l'application. Lorsque l'application démarre, elle vérifie si une session Cognito existe déjà et met à jour l'interface utilisateur en conséquence.

  Dans Backend.init(), ajoutez le code suivre après l'initialisation d'Amplify :

  // 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. Mettre à jour le code de l'interface utilisateur

  Le dernier changement dans le code est lié à l'interface utilisateur, nous ajoutons une ZStack à la ContentView. Selon la valeur de UserData.isSignedIn, l'interface utilisateur affiche soit un SigninButton, soit la vue principale de la liste.

  Ouvrez ContentView.swift et remplacez le corps dans la structure ContentView :
  

  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()
          }
      }
  }

  Dans le même fichier, ajoutez un SignInButton et une vue SignOutButton :

  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")
          }
      }
  }

  Pour vérifier que tout fonctionne comme prévu, générez le projet. Cliquez sur le menu Produit et sélectionnez Générer ou tapez ⌘B. Il ne devrait pas y avoir d'erreur.
  

  d. Mettre à jour Info.plist

  Enfin, nous devons nous assurer que notre application est lancée à la fin de la séquence d'authentification web, fournie par l'interface utilisateur hébergée par Cognito. Nous ajoutons le schéma URI de démarrage au fichier Info.plist de l'application.

  Dans Xcode, sélectionnez le fichier Info.plist, cliquez à l'aide du bouton droit dessus et sélectionnez Open As, Source Code (Ouvrir en tant que, Code source).
  

  

  Ajoutez les éléments <key> et <array> ci-dessous dans l'élément <dict> supérieur.

  <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. Générer et tester

  Pour vérifier que tout fonctionne comme prévu, générez le projet. Cliquez sur le menu Produit et sélectionnez Exécuter ou tapez ⌘R. Il ne devrait pas y avoir d'erreur. L'application démarre avec le bouton Se connecter.

  Voici le flux d'inscription complet :