Démarrer avec AWS

Créer une application iOS

Créer une application iOS simple avec AWS Amplify

Module 3 : Ajouter une authentification

Dans ce module, vous allez utiliser la ligne d'interface de commande Amplify et des bibliothèques pour configurer et ajouter une authentification à votre application.

Introduction

La prochaine fonction que vous ajouterez est l'authentification de l'utilisateur. Dans ce module, vous apprendrez comment authentifier un utilisateur avec l'interface de ligne de commande et les bibliothèques Amplify, en exploitant Amazon Cognito, un fournisseur géré d'identités des utilisateurs.

Vous apprendrez également à utiliser l'interface utilisateur hébergée Cognito pour présenter un flux complet d'authentification des utilisateurs, ce qui permettra à ces derniers de s'inscrire, de se connecter et de réinitialiser leur mot de passe avec seulement quelques lignes de code.

L'utilisation d'une « interface utilisateur hébergée » signifie que l'application exploite les pages web de Cognito pour les flux d'interface utilisateur de connexion et d'inscription. L'utilisateur de l'application est redirigé vers une page web hébergée par Cognito, puis il est redirigé à nouveau vers l'application après s'être connecté. Bien entendu, Cognito et Amplify prennent également en charge l'interface utilisateur native et vous pouvez suivre les instructions de cet atelier pour en savoir plus sur l'interface utilisateur d'authentification personnalisée.

Ce que vous apprendrez

  • Créer et déployer un service d'authentification
  • Configurer une application iOS afin d'inclure une authentification d'interface utilisateur hébergée Cognito

Concepts clés

Bibliothèques Amplify  : ces bibliothèques vous permettent d'interagir avec les services AWS à partir d'une application mobile ou web.

Authentification : au niveau logiciel, l'authentification correspond au processus de vérification et de gestion de l'identité d'un utilisateur avec un service d'authentification ou d'une API.

 Durée nécessaire

10 minutes

 Services utilisés

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).

    iOSTutorial-Module3-step1

    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 :

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

Conclusion

Vous venez d'ajouter l'authentification des utilisateurs à votre application avec seulement quelques lignes de code. Dans le module suivant, nous allons ajouter une API à votre application.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Ajouter une API GraphQL et une base de données